/* EZVIZ CyberMonday 2026 — paleta del KV CACE 2026 (misma que la landing) */
:root {
--cm-blue: #3f98ff;
--cm-ink: #0c0b1c;
--cm-lime: #b8ff00;
--cm-pink: #ff84ff;
--cm-violet: #b412ff;
--cm-navy: #121c62;
--cm-display: "Oswald", "Bebas Neue", Impact, "Arial Narrow", sans-serif;
}
/* ── Cinta superior ─────────────────────────────────────────────────── */
.ezviz-cm-ribbon {
background: var(--cm-lime);
color: var(--cm-violet);
border-bottom: 1px solid rgba(12, 11, 28, 0.1);
font-family: var(--cm-display);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
font-size: 13px;
line-height: 1;
position: relative;
z-index: 50;
}
.ezviz-cm-ribbon__inner {
max-width: 1280px;
margin: 0 auto;
padding: 8px 16px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px 16px;
text-align: center;
}
.ezviz-cm-ribbon__dates {
color: var(--cm-ink);
}
.ezviz-cm-ribbon__dot {
opacity: 0.6;
margin-right: 8px;
}
.ezviz-cm-ribbon__cta {
color: var(--cm-violet) !important;
text-decoration: underline !important;
text-underline-offset: 3px;
font-weight: 700;
}
.ezviz-cm-ribbon__cta:hover {
color: var(--cm-ink) !important;
}
@media (max-width: 640px) {
.ezviz-cm-ribbon__dot {
display: none;
}
.ezviz-cm-ribbon__inner {
flex-direction: column;
gap: 6px;
}
}
/* ── Contador ───────────────────────────────────────────────────────── */
.ezviz-cm-countdown {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--cm-display);
font-variant-numeric: tabular-nums;
}
.ezviz-cm-countdown__unit {
border-radius: 10px;
display: inline-flex;
flex-direction: column;
align-items: center;
background: var(--cm-ink);
color: var(--cm-lime);
padding: 8px 10px;
min-width: 56px;
}
.ezviz-cm-countdown__value {
font-size: 26px;
font-weight: 700;
line-height: 1;
}
.ezviz-cm-countdown__name {
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.8;
margin-top: 4px;
}
/* Versión compacta (cinta): 14d : 03h : 21m : 05s */
.ezviz-cm-countdown.is-compact {
gap: 4px;
}
.ezviz-cm-countdown.is-compact .ezviz-cm-countdown__unit {
flex-direction: row;
padding: 3px 7px;
min-width: 0;
gap: 1px;
}
.ezviz-cm-countdown.is-compact .ezviz-cm-countdown__value {
font-size: 13px;
}
.ezviz-cm-countdown.is-compact .ezviz-cm-countdown__suffix {
font-size: 13px;
font-weight: 600;
}
.ezviz-cm-countdown.is-compact .ezviz-cm-countdown__unit + .ezviz-cm-countdown__unit::before {
content: ":";
color: var(--cm-violet);
opacity: 0.6;
margin-right: 4px;
background: transparent;
}
/* ── WooCommerce: cartel de oferta (solo en fase live) ──────────────── */
body.ezviz-cm-live .onsale.ezviz-cm-flash,
body.ezviz-cm-live span.onsale {
background: var(--cm-lime) !important;
color: var(--cm-violet) !important;
font-family: var(--cm-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
border-radius: 0 !important;
padding: 4px 10px;
line-height: 1.2;
min-height: 0;
min-width: 0;
}
body.ezviz-cm-live .onsale.ezviz-cm-flash {
white-space: nowrap;
max-width: calc(100% - 16px);
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 640px) {
body.ezviz-cm-live .onsale.ezviz-cm-flash,
body.ezviz-cm-live span.onsale {
font-size: 11px;
padding: 3px 7px;
}
}
/* Precio tachado y precio de oferta con el acento del KV */
body.ezviz-cm-live .price del {
text-decoration-color: var(--cm-pink);
text-decoration-thickness: 2px;
}
body.ezviz-cm-live .price ins {
color: var(--cm-violet);
text-decoration: none;
}
/* ── Bloques listos para usar en Elementor / editor ─────────────────── */
.ezviz-cm-box {
border-radius: 10px;
background: var(--cm-ink);
color: #fff;
padding: 20px 28px;
}
.ezviz-cm-box--lime {
background: var(--cm-lime);
color: var(--cm-violet);
}
.ezviz-cm-box--blue {
background: var(--cm-blue);
color: #fff;
}
.ezviz-cm-title {
font-family: var(--cm-display);
font-weight: 700;
text-transform: uppercase;
line-height: 0.95;
letter-spacing: 0.01em;
}
.ezviz-cm-title em {
font-style: normal;
color: var(--cm-pink);
}
.ezviz-cm-btn {
border-radius: 10px;
display: inline-block;
background: var(--cm-lime);
color: var(--cm-violet) !important;
font-family: var(--cm-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 12px 26px;
text-decoration: none !important;
transition: background 0.2s;
}
.ezviz-cm-btn:hover {
background: #c9ff33;
}
.ezviz-cm-btn--violet {
background: var(--cm-violet);
color: var(--cm-lime) !important;
}
.ezviz-cm-btn--violet:hover {
background: #c43bff;
}
/* ── Legal (obligatorio en piezas con ofertas) ──────────────────────── */
.ezviz-cm-legal {
max-width: 1280px;
margin: 0 auto;
padding: 12px 16px;
font-size: 11px;
line-height: 1.5;
color: #999;
text-align: center;
}
/* ── Aviso visible SOLO para el admin en modo preview ───────────────── */
body.ezviz-cm-preview::after {
content: "PREVIEW CYBERMONDAY — solo vos lo ves. Salir: Barra de admin → CM → Salir del preview";
position: fixed;
left: 12px;
bottom: 12px;
z-index: 99999;
background: var(--cm-violet);
color: var(--cm-lime);
font: 700 11px/1.3 var(--cm-display);
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 8px 12px;
max-width: 320px;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.ezviz-cm-btn {
transition: none;
}
}
/* ══════════════════════════════════════════════════════════════════════
Bloque de home CyberMonday (fase live) — hero + cinta + ofertas
══════════════════════════════════════════════════════════════════════ */
.ezviz-cm-home {
position: relative;
margin: 0 0 40px;
font-family: inherit;
}
.ezviz-cm-home__inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 16px;
}
.ezviz-cm-tag {
border-radius: 10px;
display: inline-block;
background: var(--cm-lime);
color: var(--cm-violet);
font-family: var(--cm-display);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 13px;
line-height: 1;
padding: 7px 12px;
}
.ezviz-cm-tag--center {
display: table;
margin: 0 auto 12px;
}
/* Hero azul con diagonal navy (KV) */
.ezviz-cm-home__hero {
position: relative;
overflow: hidden;
background: var(--cm-blue);
color: #fff;
padding: 56px 0 48px;
}
.ezviz-cm-home__hero::before {
content: "";
position: absolute;
inset: 0;
background: var(--cm-navy);
clip-path: polygon(56% 0, 100% 0, 100% 100%, 56% 100%);
opacity: 0.95;
pointer-events: none;
}
.ezviz-cm-home__hero .ezviz-cm-home__inner {
position: relative;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 40px;
align-items: center;
}
.ezviz-cm-home__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.ezviz-cm-home__logo {
width: 100%;
max-width: 420px;
height: auto;
}
.ezviz-cm-home__title {
border-radius: 10px;
margin: 0;
display: inline-block;
background: var(--cm-ink);
color: #fff;
padding: 18px 26px;
font-family: var(--cm-display);
font-weight: 700;
text-transform: uppercase;
line-height: 0.95;
font-size: clamp(2.2rem, 5vw, 4.2rem);
}
.ezviz-cm-home__title em {
font-style: normal;
color: var(--cm-pink);
}
.ezviz-cm-home__title small {
display: block;
margin-top: 10px;
font-size: 0.55em;
color: var(--cm-lime);
letter-spacing: 0.04em;
}
.ezviz-cm-home__text {
margin: 0;
max-width: 560px;
font-size: 17px;
line-height: 1.55;
color: #fff;
}
.ezviz-cm-home__ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.ezviz-cm-home__countdown {
display: flex;
align-items: center;
gap: 14px;
margin-top: 6px;
}
.ezviz-cm-home__countdown-label {
font-family: var(--cm-display);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 12px;
}
.ezviz-cm-home__art {
display: flex;
justify-content: center;
}
.ezviz-cm-home__art-box {
border-radius: 10px;
position: relative;
background: #fff;
padding: 36px 28px;
width: 100%;
max-width: 460px;
box-shadow: 0 32px 80px -24px rgba(12, 11, 28, 0.55);
}
.ezviz-cm-home__art-box img {
width: 100%;
height: auto;
display: block;
}
.ezviz-cm-home__sticker {
border-radius: 10px;
position: absolute;
top: 14px;
right: 16px;
background: var(--cm-lime);
color: var(--cm-violet);
font-family: var(--cm-display);
font-weight: 700;
text-transform: uppercase;
font-size: 18px;
line-height: 1;
padding: 8px 12px;
}
/* Cinta corrediza lima */
.ezviz-cm-marquee {
overflow: hidden;
background: var(--cm-lime);
color: var(--cm-violet);
padding: 11px 0;
}
.ezviz-cm-marquee__track {
display: flex;
width: max-content;
animation: ezviz-cm-marquee 30s linear infinite;
will-change: transform;
}
.ezviz-cm-marquee__half {
display: flex;
align-items: center;
gap: 40px;
padding-right: 40px;
}
.ezviz-cm-marquee__item {
display: flex;
align-items: center;
gap: 40px;
white-space: nowrap;
font-family: var(--cm-display);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 14px;
line-height: 1;
}
.ezviz-cm-marquee__item i {
width: 8px;
height: 8px;
background: var(--cm-violet);
border-radius: 50%;
flex-shrink: 0;
}
@keyframes ezviz-cm-marquee {
to {
transform: translateX(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
.ezviz-cm-marquee__track {
animation: none !important;
}
}
/* Grilla de ofertas (usa las cards del tema vía [products]) */
.ezviz-cm-home__products {
padding: 48px 0 8px;
text-align: center;
}
.ezviz-cm-home__heading {
border-radius: 10px;
margin: 0 auto 28px;
display: table;
background: var(--cm-ink);
color: #fff;
padding: 14px 28px;
font-family: var(--cm-display);
font-weight: 700;
text-transform: uppercase;
line-height: 1;
font-size: clamp(1.6rem, 3.5vw, 2.6rem);
}
.ezviz-cm-home__heading em {
font-style: normal;
color: var(--cm-pink);
}
.ezviz-cm-home__products .woocommerce {
text-align: left;
}
.ezviz-cm-home__more {
margin: 24px 0 0;
}
@media (max-width: 900px) {
.ezviz-cm-home__hero {
padding: 36px 0 32px;
}
.ezviz-cm-home__hero::before {
clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0 100%);
}
.ezviz-cm-home__hero .ezviz-cm-home__inner {
grid-template-columns: 1fr;
gap: 28px;
}
.ezviz-cm-home__copy {
align-items: center;
text-align: center;
}
.ezviz-cm-home__ctas {
justify-content: center;
}
.ezviz-cm-home__countdown {
flex-direction: column;
gap: 8px;
}
.ezviz-cm-home__art-box {
max-width: 340px;
}
}
/* ══════════════════════════════════════════════════════════════════════
1.2 — Ambientación en todo el sitio (fase live)
══════════════════════════════════════════════════════════════════════ */
/* Cinta: logo */
.ezviz-cm-ribbon__logo {
height: 30px;
width: auto;
display: block;
}
/* Hero: personajes del KV asomando detrás de la caja del logo */
.ezviz-cm-home__art {
position: relative;
align-items: flex-end;
min-height: 480px;
padding-top: 40px;
}
.ezviz-cm-home__char {
position: absolute;
bottom: -36px;
height: 470px;
width: auto;
z-index: 0;
filter: drop-shadow(0 18px 24px rgba(12, 11, 28, 0.45));
}
.ezviz-cm-home__char--l {
left: -10px;
}
.ezviz-cm-home__char--r {
right: -16px;
}
.ezviz-cm-home__art-box {
position: relative;
z-index: 1;
max-width: 340px;
padding: 28px 22px;
}
@media (max-width: 900px) {
.ezviz-cm-home__art {
min-height: 0;
padding-top: 30px;
padding-bottom: 24px;
}
.ezviz-cm-home__char {
height: 300px;
bottom: -30px;
}
.ezviz-cm-home__char--l {
left: 4px;
}
.ezviz-cm-home__char--r {
right: 4px;
}
.ezviz-cm-home__art-box {
max-width: 220px;
padding: 20px 16px;
}
}
/* (1.3) Sin marco en las cards: solo la etiqueta de descuento. */
/* Etiqueta de descuento propia del tema (Loobek: .product-label .onsale.percent) */
body.ezviz-cm-live .product-label .onsale,
body.ezviz-cm-live .product-label .onsale.percent {
background: var(--cm-lime) !important;
color: var(--cm-violet) !important;
font-family: var(--cm-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 13px;
line-height: 1.2;
border-radius: 0 !important;
padding: 5px 10px;
width: auto !important;
height: auto !important;
min-width: 0 !important;
white-space: nowrap;
}
body.ezviz-cm-live .product-label .onsale::before {
content: "CyberMonday ";
}
body.ezviz-cm-live.ezviz-cm-mode-cyberweek .product-label .onsale::before {
content: "CyberWeek ";
}
/* Tienda / categorías: banner oscuro */
/* 1.17.3 — Respaldo: si el banner quedara dentro de .before-loop-wrapper (Loobek lo deja sticky bajo el header en
mobile), el wrapper deja de ser sticky para que el banner no baje con el scroll tapando los productos. */
#page .before-loop-wrapper:has(.ezviz-cm-shopbar) {
position: static !important;
top: auto !important;
}
.ezviz-cm-shopbar {
border-radius: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 24px;
width: 100%;
margin: 0 0 24px;
padding: 16px 22px;
background: var(--cm-ink);
color: #fff;
font-family: var(--cm-display);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ezviz-cm-shopbar__logo {
height: 56px;
width: auto;
}
.ezviz-cm-shopbar__text {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1 1 260px;
}
.ezviz-cm-shopbar__text strong {
font-size: 22px;
line-height: 1;
color: var(--cm-lime);
}
.ezviz-cm-shopbar__text span {
font-size: 13px;
color: #fff;
opacity: 0.85;
}
.ezviz-cm-shopbar__count {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
letter-spacing: 0.1em;
}
.ezviz-cm-shopbar .ezviz-cm-countdown.is-compact .ezviz-cm-countdown__unit {
background: var(--cm-lime);
color: var(--cm-violet);
}
.ezviz-cm-shopbar .ezviz-cm-countdown.is-compact .ezviz-cm-countdown__unit + .ezviz-cm-countdown__unit::before {
color: var(--cm-lime);
}
/* Ficha de producto: sello */
.ezviz-cm-pbadge {
border-radius: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
margin: 0 0 14px;
padding: 10px 14px;
background: var(--cm-lime);
color: var(--cm-violet);
font-family: var(--cm-display);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ezviz-cm-pbadge img {
height: 40px;
width: auto;
}
.ezviz-cm-pbadge__text {
display: flex;
flex-direction: column;
line-height: 1.1;
font-size: 12px;
}
.ezviz-cm-pbadge__text strong {
font-size: 18px;
}
.ezviz-cm-pbadge__count {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
letter-spacing: 0.1em;
}
/* Carrito / checkout: franja */
.ezviz-cm-cartstrip {
border-radius: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
margin: 0 0 20px;
padding: 10px 16px;
background: var(--cm-lime);
color: var(--cm-ink);
font-family: var(--cm-display);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 13px;
}
.ezviz-cm-cartstrip img {
height: 36px;
width: auto;
}
.ezviz-cm-cartstrip strong {
color: var(--cm-violet);
}
.ezviz-cm-cartstrip__count {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
letter-spacing: 0.1em;
}
/* Botón flotante */
.ezviz-cm-float {
border-radius: 10px;
position: fixed;
right: 16px;
bottom: 96px;
z-index: 9990;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px 8px 8px;
background: var(--cm-violet);
color: #fff !important;
text-decoration: none !important;
box-shadow: 0 18px 40px -18px rgba(12, 11, 28, 0.6);
font-family: var(--cm-display);
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.05;
animation: ezviz-cm-pulse 2.4s ease-in-out infinite;
transition: transform 0.2s;
}
.ezviz-cm-float:hover {
transform: translateY(-2px) scale(1.02);
animation: none;
}
.ezviz-cm-float img {
border-radius: 10px;
height: 44px;
width: auto;
background: #fff;
padding: 4px 6px;
}
.ezviz-cm-float__text {
display: flex;
flex-direction: column;
}
.ezviz-cm-float__text strong {
font-size: 14px;
color: var(--cm-lime);
}
.ezviz-cm-float__text em {
font-style: normal;
font-size: 11px;
opacity: 0.9;
}
@keyframes ezviz-cm-pulse {
0%,
100% {
box-shadow: 0 18px 40px -18px rgba(12, 11, 28, 0.6), 0 0 0 0 rgba(184, 255, 0, 0.55);
}
50% {
box-shadow: 0 18px 40px -18px rgba(12, 11, 28, 0.6), 0 0 0 12px rgba(184, 255, 0, 0);
}
}
@media (max-width: 640px) {
.ezviz-cm-float {
right: 10px;
bottom: 88px;
padding: 6px 10px 6px 6px;
}
.ezviz-cm-float img {
height: 34px;
}
.ezviz-cm-float__text strong {
font-size: 12px;
}
.ezviz-cm-float__text em {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.ezviz-cm-float {
animation: none;
}
}
/* Footer: franja oscura */
.ezviz-cm-footer {
background: var(--cm-ink);
color: #fff;
padding: 32px 0;
border-top: 4px solid var(--cm-lime);
}
.ezviz-cm-footer__inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 16px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 24px 40px;
}
.ezviz-cm-footer__logo {
width: 200px;
height: auto;
flex-shrink: 0;
}
.ezviz-cm-footer__body {
flex: 1 1 320px;
}
.ezviz-cm-footer__claim {
margin: 0 0 14px;
font-size: 15px;
line-height: 1.5;
color: #fff;
}
.ezviz-cm-footer__claim a {
color: var(--cm-lime) !important;
text-decoration: underline;
}
.ezviz-cm-footer__ctas {
margin: 0 0 14px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ezviz-cm-legal--footer {
padding: 0;
margin: 0;
text-align: left;
color: rgba(255, 255, 255, 0.55);
}
/* ══════════════════════════════════════════════════════════════════════
Blindaje contra reglas globales del tema / WooCommerce
(.woocommerce-page img { height:auto; max-width:100% } gana por especificidad)
══════════════════════════════════════════════════════════════════════ */
body.ezviz-cm .ezviz-cm-ribbon__logo {
height: 30px !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
}
body.ezviz-cm .ezviz-cm-float img {
height: 44px !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
}
body.ezviz-cm .ezviz-cm-shopbar__logo {
height: 56px !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
}
body.ezviz-cm .ezviz-cm-pbadge img {
height: 40px !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
}
body.ezviz-cm .ezviz-cm-cartstrip img {
height: 36px !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
}
body.ezviz-cm .ezviz-cm-footer__logo {
width: 200px !important;
height: auto !important;
max-width: 100% !important;
}
body.ezviz-cm .ezviz-cm-home__logo {
width: 100% !important;
max-width: 420px !important;
height: auto !important;
}
body.ezviz-cm .ezviz-cm-home__char {
height: 470px !important;
width: auto !important;
max-width: none !important;
}
body.ezviz-cm .ezviz-cm-home__art-box img {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
}
body.ezviz-cm .ezviz-cm-float,
body.ezviz-cm .ezviz-cm-float:hover {
color: #fff !important;
}
@media (max-width: 900px) {
body.ezviz-cm .ezviz-cm-home__char {
height: 300px !important;
}
}
@media (max-width: 640px) {
body.ezviz-cm .ezviz-cm-float img {
height: 34px !important;
}
}
/* ══════════════════════════════════════════════════════════════════════
1.4 — Deck de upgrades en el hero (como la landing)
══════════════════════════════════════════════════════════════════════ */
.ezviz-cm-deck {
position: relative;
z-index: 1;
width: 100%;
max-width: 320px;
}
.ezviz-cm-deck__box {
border-radius: 10px;
position: relative;
display: grid; /* los paneles se apilan en la misma celda: la caja mide siempre lo del más alto (Gerva, 29/10: "debe mantener un estándar") */
background: #fff;
color: #333;
padding: 32px 16px 16px;
box-shadow: 0 32px 80px -24px rgba(12, 11, 28, 0.55);
}
.ezviz-cm-deck__ribbon {
border-radius: 10px;
position: absolute;
top: 10px;
right: 14px;
z-index: 2;
background: var(--cm-pink);
color: var(--cm-ink);
font-family: var(--cm-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 13px;
line-height: 1;
padding: 8px 14px;
}
.ezviz-cm-deck__panel {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
align-items: stretch;
text-align: center;
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.ezviz-cm-deck__panel.is-active {
visibility: visible;
opacity: 1;
pointer-events: auto;
animation: ezviz-cm-fade 0.35s ease;
}
@keyframes ezviz-cm-fade {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: none;
}
}
.ezviz-cm-deck__swap {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 64px; /* "2MP Color" ocupa dos líneas (64px): todos los paneles reservan lo mismo */
font-family: var(--cm-display);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 11px;
font-weight: 700;
}
.ezviz-cm-deck__pay {
border-radius: 10px;
background: #f2f3f4;
color: #999;
padding: 6px 12px;
}
.ezviz-cm-deck__pay s {
font-size: 18px;
text-decoration-color: var(--cm-pink);
text-decoration-thickness: 2px;
margin-left: 4px;
}
.ezviz-cm-deck__arrow {
color: var(--cm-violet);
font-size: 22px;
line-height: 1;
}
.ezviz-cm-deck__get {
border-radius: 10px;
background: var(--cm-violet);
color: var(--cm-lime);
padding: 6px 12px;
}
.ezviz-cm-deck__get b {
font-size: 18px;
margin-left: 4px;
}
.ezviz-cm-deck__img {
display: block;
margin: 12px auto 8px;
width: 190px;
height: 190px; /* fijo: la foto no cambia el alto de la tarjeta */
max-width: 100%;
flex: 0 0 auto;
}
body.ezviz-cm .ezviz-cm-deck__img img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
object-fit: contain;
display: block;
}
.ezviz-cm-deck__names {
margin: 0 0 8px;
min-height: 2.2em; /* dos líneas ("H3c Color 1080p → H3c Color 2K") en todos */
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
font-family: var(--cm-display);
font-weight: 700;
text-transform: uppercase;
font-size: 19px;
line-height: 1.1;
color: var(--cm-ink);
}
.ezviz-cm-deck__names span {
color: #999;
font-weight: 400;
margin: 0 4px;
}
.ezviz-cm-deck__names em {
font-style: normal;
color: var(--cm-violet);
}
.ezviz-cm-deck__price {
margin: 0 0 14px;
min-height: 44px; /* dos líneas (-% OFF + transferencia / cuotas) en todos */
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px 10px;
font-size: 14px;
color: #515151;
line-height: 1.3;
}
.ezviz-cm-deck__off {
border-radius: 10px;
background: var(--cm-lime);
color: var(--cm-violet);
font-family: var(--cm-display);
font-weight: 700;
font-size: 12px;
padding: 4px 8px;
}
.ezviz-cm-deck__transfer strong {
font-family: var(--cm-display);
font-size: 18px;
color: var(--cm-ink);
margin-left: 4px;
}
.ezviz-cm-deck__price small {
font-size: 12px;
color: #999;
}
.ezviz-cm-deck__buy {
display: flex;
align-items: center;
justify-content: center;
margin-top: auto; /* el botón siempre al pie de la tarjeta */
width: 100%;
min-height: 46px;
text-align: center;
font-size: 13px;
padding: 10px 12px;
line-height: 1.2;
}
.ezviz-cm-deck__tabs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.ezviz-cm-deck__tab {
border-radius: 10px;
appearance: none;
border: 0;
cursor: pointer;
background: var(--cm-ink);
color: #fff;
font-family: var(--cm-display);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 13px;
line-height: 1;
padding: 9px 14px;
transition: background 0.2s, color 0.2s;
}
.ezviz-cm-deck__tab:hover {
background: #2a2940;
}
.ezviz-cm-deck__tab.is-active {
background: var(--cm-lime);
color: var(--cm-violet);
font-weight: 700;
}
@media (max-width: 900px) {
.ezviz-cm-deck {
max-width: 320px;
}
.ezviz-cm-deck__img {
width: 200px;
height: 200px;
}
.ezviz-cm-deck__names {
font-size: 18px;
}
}
/* ══════════════════════════════════════════════════════════════════════
1.5 — Ambientación visual extra (fase live)
══════════════════════════════════════════════════════════════════════ */
/* 1. Títulos de la home con la arquitectura del KV */
body.ezviz-cm-live .ezviz-cm-kv-heading {
border-radius: 10px;
display: table !important;
margin: 0 auto 22px !important;
background: var(--cm-ink) !important;
color: #fff !important;
padding: 12px 26px !important;
font-family: var(--cm-display) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.01em !important;
line-height: 1 !important;
font-size: clamp(1.6rem, 3.4vw, 2.6rem) !important;
text-align: center !important;
}
body.ezviz-cm-live .ezviz-cm-kv-heading em {
font-style: normal;
color: var(--cm-pink);
}
/* 2. Barra de avisos del tema (celeste) en modo CyberMonday */
body.ezviz-cm-live .ts-store-notice {
background: var(--cm-ink) !important;
color: var(--cm-lime) !important;
border-top: 2px solid var(--cm-violet);
}
body.ezviz-cm-live .ts-store-notice .ezviz-topbar,
body.ezviz-cm-live .ts-store-notice .ezviz-top-headers,
body.ezviz-cm-live .ts-store-notice .container {
background: transparent !important;
color: inherit !important;
}
body.ezviz-cm-live .ts-store-notice,
body.ezviz-cm-live .ts-store-notice * {
font-family: var(--cm-display) !important;
letter-spacing: 0.06em;
text-transform: uppercase;
}
body.ezviz-cm-live .ts-store-notice a {
color: var(--cm-pink) !important;
}
/* 3. Botones de compra en modo CyberMonday */
body.ezviz-cm-live a.add_to_cart_button,
body.ezviz-cm-live .loop-add-to-cart a.button,
body.ezviz-cm-live button.single_add_to_cart_button,
body.ezviz-cm-live .single_add_to_cart_button.button {
background: var(--cm-violet) !important;
color: var(--cm-lime) !important;
border: 0 !important;
border-radius: 0 !important;
font-family: var(--cm-display) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
transition: background 0.2s, color 0.2s !important;
}
body.ezviz-cm-live a.add_to_cart_button:hover,
body.ezviz-cm-live .loop-add-to-cart a.button:hover,
body.ezviz-cm-live button.single_add_to_cart_button:hover {
background: #c43bff !important;
color: #fff !important;
}
body.ezviz-cm-live a.ts-buy-now-button,
body.ezviz-cm-live .ts-buy-now-button.button {
background: var(--cm-lime) !important;
color: var(--cm-violet) !important;
border: 0 !important;
border-radius: 0 !important;
font-family: var(--cm-display) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
}
body.ezviz-cm-live a.ts-buy-now-button:hover {
background: #c9ff33 !important;
}
/* 4. Sticker sobre la galería de la ficha (producto en oferta) */
body.ezviz-cm-live.ezviz-cm-onsale .woocommerce-product-gallery {
position: relative;
}
body.ezviz-cm-live.ezviz-cm-onsale .woocommerce-product-gallery::after {
border-radius: 10px;
content: "Oferta CyberMonday";
position: absolute;
/* Ofertas Relámpago usa el mismo ::after con top/left (1.16.2): se anulan para que el sticker
no se estire sobre toda la galería cuando el producto tiene las dos ofertas. */
top: auto;
left: auto;
width: auto;
height: auto;
border: 0;
bottom: 18px;
right: 14px;
z-index: 5;
background: var(--cm-pink);
color: var(--cm-ink);
font-family: var(--cm-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 14px;
line-height: 1;
padding: 9px 14px;
box-shadow: 0 10px 24px -12px rgba(12, 11, 28, 0.5);
pointer-events: none;
}
body.ezviz-cm-live.ezviz-cm-mode-cyberweek.ezviz-cm-onsale .woocommerce-product-gallery::after {
content: "Oferta CyberWeek";
}
/* 5. Barra inferior fija en mobile (reemplaza al flotante) */
.ezviz-cm-mobilebar {
display: none;
}
@media (max-width: 640px) {
body.ezviz-cm-live .ezviz-cm-float {
display: none !important;
}
body.ezviz-cm-live .ezviz-cm-mobilebar {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9990;
align-items: center;
gap: 10px;
padding: 8px 12px;
padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
background: var(--cm-ink);
color: #fff;
border-top: 3px solid var(--cm-lime);
box-shadow: 0 -12px 30px -16px rgba(12, 11, 28, 0.7);
font-family: var(--cm-display);
text-transform: uppercase;
letter-spacing: 0.05em;
}
body.ezviz-cm .ezviz-cm-mobilebar img {
border-radius: 10px;
height: 34px !important;
width: auto !important;
max-width: none !important;
background: #fff;
padding: 3px 5px;
}
.ezviz-cm-mobilebar__text {
display: flex;
flex-direction: column;
gap: 3px;
flex: 1;
font-size: 10px;
letter-spacing: 0.1em;
}
.ezviz-cm-mobilebar__text strong {
color: var(--cm-lime);
}
.ezviz-cm-mobilebar .ezviz-cm-countdown.is-compact .ezviz-cm-countdown__unit {
background: var(--cm-lime);
color: var(--cm-violet);
padding: 2px 5px;
}
.ezviz-cm-mobilebar .ezviz-cm-countdown.is-compact .ezviz-cm-countdown__unit + .ezviz-cm-countdown__unit::before {
color: var(--cm-lime);
}
.ezviz-cm-mobilebar__cta {
border-radius: 10px;
background: var(--cm-lime);
color: var(--cm-violet) !important;
font-weight: 700;
font-size: 13px;
padding: 10px 14px;
text-decoration: none !important;
white-space: nowrap;
}
body.ezviz-cm-live.ezviz-cm-preview::after {
bottom: 72px;
}
/* que la barra no tape el final de la página */
body.ezviz-cm-live {
padding-bottom: 64px;
}
}
/* 6. Cabecera de categorías con textura del KV */
body.ezviz-cm-live .ezviz-cm-shopbar {
position: relative;
overflow: hidden;
background: var(--cm-blue);
padding-left: 96px;
}
body.ezviz-cm-live .ezviz-cm-shopbar::before {
content: "";
position: absolute;
inset: 0;
background: var(--cm-navy);
clip-path: polygon(54% 0, 100% 0, 100% 100%, 54% 100%);
opacity: 0.95;
pointer-events: none;
}
body.ezviz-cm-live .ezviz-cm-shopbar > * {
position: relative;
z-index: 1;
}
body.ezviz-cm .ezviz-cm-shopbar__char {
position: absolute !important;
left: 14px;
bottom: -14px;
height: 118px !important;
width: auto !important;
max-width: none !important;
z-index: 1;
filter: drop-shadow(0 8px 12px rgba(12, 11, 28, 0.4));
}
body.ezviz-cm-live .ezviz-cm-shopbar__text strong {
color: var(--cm-lime);
}
@media (max-width: 640px) {
body.ezviz-cm-live .ezviz-cm-shopbar {
padding-left: 22px;
}
body.ezviz-cm .ezviz-cm-shopbar__char {
display: none !important;
}
}
/* 7. Entrada animada + brillo del "hasta -X% OFF" */
.ezviz-cm-anim {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.55s ease, transform 0.55s ease;
}
.ezviz-cm-anim.is-in {
opacity: 1;
transform: none;
}
.ezviz-cm-kv-heading.ezviz-cm-anim.is-in {
}
@keyframes ezviz-cm-glint {
0%,
100% {
text-shadow: 0 0 0 rgba(184, 255, 0, 0);
}
50% {
text-shadow: 0 0 14px rgba(184, 255, 0, 0.75), 0 0 28px rgba(184, 255, 0, 0.35);
}
}
.ezviz-cm-home__title small {
animation: ezviz-cm-glint 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.ezviz-cm-anim {
opacity: 1;
transform: none;
transition: none;
}
.ezviz-cm-home__title small {
animation: none;
}
}
/* ══════════════════════════════════════════════════════════════════════
1.6 — Cupones personales: modales, raspadita, cinta del cupón
══════════════════════════════════════════════════════════════════════ */
body.ezviz-cm-modal-open {
overflow: hidden;
}
.ezviz-cm-modal {
position: fixed;
inset: 0;
z-index: 99990;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
opacity: 0;
transition: opacity 0.25s ease;
}
.ezviz-cm-modal.is-open {
opacity: 1;
}
.ezviz-cm-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(12, 11, 28, 0.78);
backdrop-filter: blur(2px);
}
.ezviz-cm-modal__card {
border-radius: 10px;
position: relative;
user-select: none;
width: 100%;
max-width: 440px;
background: var(--cm-blue);
color: #fff;
padding: 28px 26px 22px;
text-align: center;
box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
transform: translateY(14px) scale(0.98);
transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
overflow: hidden;
}
.ezviz-cm-modal.is-open .ezviz-cm-modal__card {
transform: none;
}
.ezviz-cm-modal__card::before {
content: "";
position: absolute;
inset: 0;
background: var(--cm-navy);
display: none;
opacity: 0.9;
pointer-events: none;
}
.ezviz-cm-modal__card > * {
position: relative;
}
.ezviz-cm-modal__close {
border-radius: 10px;
position: absolute !important;
top: 8px;
right: 10px;
z-index: 3;
appearance: none;
border: 0;
background: var(--cm-ink);
color: var(--cm-lime);
width: 34px;
height: 34px;
font-size: 22px;
line-height: 34px;
cursor: pointer;
padding: 0;
}
body.ezviz-cm .ezviz-cm-modal__logo {
border-radius: 10px;
width: 120px !important;
height: auto !important;
max-width: 120px !important;
margin: 0 auto 10px !important;
display: block;
background: #fff;
padding: 6px 10px;
}
.ezviz-cm-modal__title {
margin: 12px 0 10px;
font-family: var(--cm-display);
font-weight: 700;
text-transform: uppercase;
line-height: 0.98;
font-size: clamp(1.7rem, 5vw, 2.3rem);
color: #fff;
}
.ezviz-cm-modal__title em {
font-style: normal;
color: var(--cm-lime);
}
.ezviz-cm-modal__text {
margin: 0 0 14px;
font-size: 14px;
line-height: 1.5;
color: #fff;
}
.ezviz-cm-modal__ctas {
display: flex;
flex-direction: column;
gap: 8px;
align-items: stretch;
margin-top: 14px;
}
.ezviz-cm-modal__ctas .ezviz-cm-btn {
display: block;
text-align: center;
cursor: pointer;
border: 0;
font-size: 14px;
}
.ezviz-cm-modal__fine {
margin: 12px 0 0;
font-size: 11px;
line-height: 1.4;
color: rgba(255, 255, 255, 0.75);
}
.ezviz-cm-coupon-box {
border-radius: 10px;
margin: 6px auto 0;
background: var(--cm-ink);
color: #fff;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 6px;
}
.ezviz-cm-coupon-box__code {
font-family: var(--cm-display);
font-weight: 700;
font-size: 30px;
letter-spacing: 0.08em;
color: var(--cm-lime);
line-height: 1;
}
.ezviz-cm-coupon-box__meta {
font-family: var(--cm-display);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 12px;
}
.ezviz-cm-coupon-box__meta b {
color: var(--cm-pink);
}
.is-busy {
opacity: 0.7;
pointer-events: none;
}
/* [hidden] debe ganarle a display:flex de los modales */
.ezviz-cm-modal[hidden],
.ezviz-cm-modal [hidden],
.ezviz-cm-coupon-bar[hidden],
.ezviz-cm-scratch-tab[hidden],
.ezviz-cm-applyblock[hidden] {
display: none !important;
}
/* Raspadita */
.ezviz-cm-scratch {
border-radius: 10px;
position: relative;
width: 100%;
max-width: 320px;
aspect-ratio: 16 / 9;
margin: 10px auto 0;
background: var(--cm-ink);
touch-action: none;
user-select: none;
}
.ezviz-cm-scratch__prize {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
background: var(--cm-ink);
color: #fff;
}
.ezviz-cm-scratch__pct {
font-family: var(--cm-display);
font-weight: 700;
font-size: 64px;
line-height: 1;
color: var(--cm-lime);
}
.ezviz-cm-scratch__off {
font-family: var(--cm-display);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 14px;
color: var(--cm-pink);
}
.ezviz-cm-scratch__code {
margin-top: 6px;
font-family: var(--cm-display);
font-weight: 700;
letter-spacing: 0.08em;
font-size: 16px;
}
.ezviz-cm-scratch__canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
cursor: grab;
transition: opacity 0.5s ease;
}
.ezviz-cm-scratch__canvas.is-cleared {
opacity: 0;
pointer-events: none;
}
.ezviz-cm-scratch-tab {
border-radius: 10px;
position: fixed;
left: 0;
top: 50%;
z-index: 9985;
transform: rotate(-90deg) translate(-50%, 0);
transform-origin: left top;
appearance: none;
border: 0;
cursor: pointer;
background: var(--cm-pink);
color: var(--cm-ink);
font-family: var(--cm-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 13px;
padding: 10px 18px;
box-shadow: 0 10px 24px -10px rgba(12, 11, 28, 0.6);
}
.ezviz-cm-scratch-tab:hover {
background: #ff9dff;
}
/* Cinta del cupón vigente (fija abajo; reemplaza al flotante y a la barra mobile) */
.ezviz-cm-coupon-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9991;
box-shadow: 0 -12px 30px -16px rgba(12, 11, 28, 0.7);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 14px;
padding: 8px 14px;
background: var(--cm-violet);
color: #fff;
font-family: var(--cm-display);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 13px;
border-top: 3px solid var(--cm-lime);
}
body.ezviz-cm-has-coupon-bar .ezviz-cm-float,
body.ezviz-cm-has-coupon-bar .ezviz-cm-mobilebar {
display: none !important;
}
body.ezviz-cm-has-coupon-bar {
padding-bottom: 64px;
}
body.ezviz-cm-has-coupon-bar.ezviz-cm-preview::after {
bottom: 72px;
}
body.ezviz-cm .ezviz-cm-coupon-bar img {
border-radius: 10px;
height: 32px !important;
width: auto !important;
max-width: none !important;
background: #fff;
padding: 3px 5px;
}
.ezviz-cm-coupon-bar__code {
color: var(--cm-lime);
letter-spacing: 0.08em;
}
.ezviz-cm-coupon-bar__timer {
color: var(--cm-lime);
font-variant-numeric: tabular-nums;
}
.ezviz-cm-coupon-bar__copy,
.ezviz-cm-coupon-bar__close {
appearance: none;
border: 1px solid rgba(255, 255, 255, 0.5);
background: transparent;
color: #fff;
font-family: var(--cm-display);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 11px;
padding: 5px 9px;
cursor: pointer;
}
.ezviz-cm-coupon-bar__close {
border: 0;
font-size: 18px;
line-height: 1;
padding: 2px 6px;
opacity: 0.8;
}
.ezviz-cm-coupon-bar__apply {
font-size: 12px;
padding: 8px 14px;
}
.ezviz-cm-coupon-bar__apply.is-applied {
background: var(--cm-ink);
color: var(--cm-lime) !important;
}
@media (max-width: 640px) {
.ezviz-cm-coupon-bar {
font-size: 11px;
gap: 6px 10px;
padding: 6px 10px;
}
.ezviz-cm-coupon-bar__copy {
display: none;
}
.ezviz-cm-modal__card {
padding: 22px 16px 18px;
}
.ezviz-cm-scratch-tab {
font-size: 11px;
padding: 8px 12px;
}
}
/* Carrito / checkout: bloque de un clic */
.ezviz-cm-applyblock {
border-radius: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 16px;
margin: 0 0 18px;
padding: 12px 16px;
background: var(--cm-ink);
color: #fff;
font-family: var(--cm-display);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 13px;
}
.ezviz-cm-applyblock strong {
color: var(--cm-lime);
}
.ezviz-cm-applyblock .ezviz-cm-btn {
border: 0;
cursor: pointer;
font-size: 13px;
padding: 10px 18px;
}
.ezviz-cm-applyblock.is-applied {
background: var(--cm-lime);
color: var(--cm-ink);
}
.ezviz-cm-applyblock.is-applied strong {
color: var(--cm-violet);
}
/* ══════════════════════════════════════════════════════════════════════
1.7 — Sección de categorías de la home (pestañas + tarjetas) en modo KV
══════════════════════════════════════════════════════════════════════ */
body.ezviz-cm-live .e-n-tabs:has(.categories-childs) > .e-n-tabs-heading {
gap: 10px !important;
}
body.ezviz-cm-live .e-n-tabs:has(.categories-childs) > .e-n-tabs-heading .e-n-tab-title {
background: var(--cm-ink) !important;
color: #fff !important;
border: 0 !important;
border-radius: 0 !important;
padding: 10px 22px !important;
transition: background 0.2s, color 0.2s;
}
body.ezviz-cm-live .e-n-tabs:has(.categories-childs) > .e-n-tabs-heading .e-n-tab-title .e-n-tab-title-text {
font-family: var(--cm-display) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em;
font-size: 20px !important;
color: inherit !important;
}
body.ezviz-cm-live .e-n-tabs:has(.categories-childs) > .e-n-tabs-heading .e-n-tab-title[aria-selected="true"],
body.ezviz-cm-live .e-n-tabs:has(.categories-childs) > .e-n-tabs-heading .e-n-tab-title:hover {
background: var(--cm-lime) !important;
color: var(--cm-violet) !important;
}
/* Tarjetas */
body.ezviz-cm-live .e-n-tabs:has(.categories-childs) .e-con:has(> .elementor-widget-heading) {
position: relative;
background: #eef5ff !important;
border-radius: 0 !important;
box-shadow: 0 24px 50px -34px rgba(12, 11, 28, 0.45);
overflow: hidden;
}
body.ezviz-cm-live .e-n-tabs:has(.categories-childs) .e-con:has(> .elementor-widget-heading)::before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 5px;
background: var(--cm-lime);
z-index: 0;
pointer-events: none;
}
body.ezviz-cm-live .e-n-tabs:has(.categories-childs) .e-con:has(> .elementor-widget-heading)::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 140px;
height: 140px;
background: var(--cm-blue);
display: none;
opacity: 0.9;
z-index: 0;
pointer-events: none;
}
body.ezviz-cm-live .e-n-tabs:has(.categories-childs) .e-con:has(> .elementor-widget-heading) > *:not(.elementor-absolute) {
position: relative;
z-index: 1;
}
body.ezviz-cm-live .e-n-tabs:has(.categories-childs) .e-con:has(> .elementor-widget-heading) > .elementor-absolute {
z-index: 1;
}
/* Bajada (primer heading de la tarjeta) */
body.ezviz-cm-live .e-n-tabs:has(.categories-childs) .e-con > .elementor-widget-heading:first-child h2.elementor-heading-title {
font-family: var(--cm-display) !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
font-size: 14px !important;
line-height: 1.3 !important;
color: var(--cm-violet) !important;
}
/* Título (segundo heading): caja negra del KV */
body.ezviz-cm-live .e-n-tabs:has(.categories-childs) .e-con > .elementor-widget-heading + .elementor-widget-heading h2.elementor-heading-title {
border-radius: 10px;
display: inline-block;
background: var(--cm-ink);
color: #fff !important;
padding: 8px 14px;
font-family: var(--cm-display) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
line-height: 0.95 !important;
letter-spacing: 0.01em;
}
/* Botón "Ver más" */
body.ezviz-cm-live .e-n-tabs:has(.categories-childs) a.elementor-button {
background: var(--cm-violet) !important;
color: var(--cm-lime) !important;
border: 0 !important;
border-radius: 0 !important;
font-family: var(--cm-display) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
padding: 10px 18px !important;
transition: background 0.2s, color 0.2s;
}
body.ezviz-cm-live .e-n-tabs:has(.categories-childs) a.elementor-button:hover {
background: var(--cm-lime) !important;
color: var(--cm-violet) !important;
}
@media (max-width: 640px) {
body.ezviz-cm-live .e-n-tabs:has(.categories-childs) > .e-n-tabs-heading .e-n-tab-title .e-n-tab-title-text {
font-size: 15px !important;
}
body.ezviz-cm-live .e-n-tabs:has(.categories-childs) .e-con:has(> .elementor-widget-heading)::after {
width: 90px;
height: 90px;
}
}
/* 1.8 — Resumen del carrito en el modal de salida */
.ezviz-cm-cartsum {
border-radius: 10px;
margin: 12px 0 0;
background: rgba(12, 11, 28, 0.55);
padding: 12px 14px;
text-align: left;
}
.ezviz-cm-cartsum__items {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 10px;
}
.ezviz-cm-cartsum__item {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
line-height: 1.25;
color: #fff;
}
body.ezviz-cm .ezviz-cm-cartsum__item img {
border-radius: 10px;
width: 40px !important;
height: 40px !important;
max-width: 40px !important;
object-fit: contain;
background: #fff;
padding: 2px;
flex-shrink: 0;
}
.ezviz-cm-cartsum__name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.ezviz-cm-cartsum__more {
font-size: 11px;
color: rgba(255, 255, 255, 0.7);
font-family: var(--cm-display);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.ezviz-cm-cartsum__row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
font-family: var(--cm-display);
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 3px 0;
}
.ezviz-cm-cartsum__row strong {
color: #fff;
font-size: 15px;
}
.ezviz-cm-cartsum__row--final {
border-top: 1px dashed rgba(255, 255, 255, 0.35);
margin-top: 4px;
padding-top: 8px;
color: #fff;
}
.ezviz-cm-cartsum__row--final b {
color: var(--cm-pink);
}
.ezviz-cm-cartsum__row--final strong {
text-decoration: none;
color: var(--cm-lime);
font-size: 24px;
line-height: 1;
}
.ezviz-cm-cartsum__save {
margin-top: 6px;
font-family: var(--cm-display);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 12px;
color: var(--cm-lime);
}
.ezviz-cm-cartsum .woocommerce-Price-currencySymbol {
font-size: 0.8em;
margin-right: 2px;
}
/* 1.8.1 — Ocultar el slider del tema en la portada durante el evento (lo reemplaza el hero CM) */
body.ezviz-cm-hide-hero section.ezviz-hero-carousel,
body.ezviz-cm-hide-hero .elementor-widget:has(> .elementor-widget-container > section.ezviz-hero-carousel) {
display: none !important;
}
/* ══════════════════════════════════════════════════════════════════════
1.9 — Mini-carrito: "Tu precio CyberMonday" (drawer del tema + widget)
══════════════════════════════════════════════════════════════════════ */
.ezviz-cm-minicart {
border-radius: 10px;
position: relative;
margin: 10px 0 14px;
padding: 14px 16px 12px;
background: var(--cm-ink);
color: #fff;
text-align: left;
font-family: var(--cm-display);
letter-spacing: 0.04em;
}
.ezviz-cm-minicart::after {
/* diagonal violeta de fondo, como el hero */
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 64%, rgba(180, 18, 255, 0.28) 64%, rgba(63, 152, 255, 0.18) 100%);
pointer-events: none;
}
.ezviz-cm-minicart > * {
position: relative;
z-index: 1;
}
.ezviz-cm-minicart__head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.1em;
color: var(--cm-lime);
}
body.ezviz-cm .ezviz-cm-minicart__head img {
width: 46px !important;
height: 32px !important;
max-width: 46px !important;
object-fit: contain;
flex-shrink: 0;
}
.ezviz-cm-minicart__row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 4px 0;
font-size: 12px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
}
.ezviz-cm-minicart__row--list {
color: #fff;
padding-bottom: 0;
}
.ezviz-cm-minicart__row--list b {
color: #fff;
font-size: 16px;
font-weight: 700;
}
/* 1.9.11 — cuotas fijas pegadas al precio de lista (pedido de Leo: lista + cuotas juntos, sin "sin interés") */
.ezviz-cm-minicart__cuotas {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.75);
margin: 0 0 6px;
}
.ezviz-cm-minicart__cuotas b {
color: var(--cm-pink);
}
.ezviz-cm-minicart__cuotas i {
font-style: normal;
color: rgba(255, 255, 255, 0.5);
}
.ezviz-cm-minicart__row--coupon {
color: #fff;
}
.ezviz-cm-minicart__row--coupon b {
color: var(--cm-pink);
letter-spacing: 0.12em;
}
.ezviz-cm-minicart__row--coupon strong {
color: var(--cm-pink);
font-size: 15px;
white-space: nowrap;
}
.ezviz-cm-minicart__ok {
font-style: normal;
color: var(--cm-lime);
font-size: 11px;
margin-left: 4px;
}
body.ezviz-cm .ezviz-cm-minicart__apply {
display: inline-block;
margin-left: 6px;
padding: 3px 9px;
border: 0;
border-radius: 0;
background: var(--cm-violet);
color: #fff;
font-family: var(--cm-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1.3;
cursor: pointer;
min-height: 0;
height: auto;
}
body.ezviz-cm .ezviz-cm-minicart__apply:hover {
background: var(--cm-lime);
color: var(--cm-ink);
}
body.ezviz-cm .ezviz-cm-minicart__apply.is-busy {
opacity: 0.5;
pointer-events: none;
}
.ezviz-cm-minicart__hint {
font-size: 11px;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
margin: -2px 0 4px;
}
.ezviz-cm-minicart__hint [data-coupon-timer] {
color: var(--cm-pink);
font-weight: 700;
}
body.ezviz-cm .ezviz-cm-minicart__scratch {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
margin: 6px 0 4px;
padding: 8px 10px;
border: 1px dashed rgba(255, 132, 255, 0.7);
border-radius: 0;
background: rgba(255, 132, 255, 0.1);
color: #fff;
font-family: var(--cm-display);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: left;
line-height: 1.3;
cursor: pointer;
min-height: 0;
height: auto;
}
body.ezviz-cm .ezviz-cm-minicart__scratch:hover {
background: var(--cm-pink);
color: var(--cm-ink);
border-color: var(--cm-pink);
}
.ezviz-cm-minicart__scratch b {
color: var(--cm-pink);
}
body.ezviz-cm .ezviz-cm-minicart__scratch:hover b {
color: var(--cm-ink);
}
.ezviz-cm-minicart__scratch-ico {
font-size: 18px;
line-height: 1;
}
.ezviz-cm-minicart__final {
margin-top: 8px;
padding-top: 10px;
border-top: 1px dashed rgba(255, 255, 255, 0.3);
}
.ezviz-cm-minicart__final-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #fff;
}
.ezviz-cm-minicart__final-label em {
border-radius: 10px;
font-style: normal;
font-weight: 700;
background: var(--cm-lime);
color: var(--cm-ink);
padding: 2px 7px;
}
.ezviz-cm-minicart__final-price {
margin-top: 4px;
font-size: 34px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.01em;
color: var(--cm-lime);
text-shadow: 0 0 18px rgba(184, 255, 0, 0.35);
animation: ezviz-cm-minicart-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
.ezviz-cm-minicart__final-price .woocommerce-Price-currencySymbol {
font-size: 0.6em;
vertical-align: 0.35em;
margin-right: 2px;
}
.ezviz-cm-minicart__save {
border-radius: 10px;
display: inline-block;
margin-top: 8px;
padding: 3px 8px;
background: var(--cm-pink);
color: var(--cm-ink);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.ezviz-cm-minicart__foot {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: 10px;
font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 12px;
letter-spacing: 0;
color: rgba(255, 255, 255, 0.85);
}
.ezviz-cm-minicart__foot b {
color: #fff;
}
.ezviz-cm-minicart__note {
font-size: 11px;
color: rgba(255, 255, 255, 0.55);
}
.ezviz-cm-minicart .woocommerce-Price-amount,
.ezviz-cm-minicart .woocommerce-Price-amount bdi {
color: inherit;
font-weight: inherit;
font-size: inherit;
}
@keyframes ezviz-cm-minicart-pop {
from { transform: translateY(6px) scale(0.96); opacity: 0; }
to { transform: none; opacity: 1; }
}
/* Fila vieja "Precio por transferencia bancaria" (snippet del tema): redundante con el bloque */
.dropdown-footer:has(.ezviz-cm-minicart) .ezviz-mini-transfer {
display: none !important;
}
/* El "Subtotal" del tema queda como referencia, más discreto */
.dropdown-footer:has(.ezviz-cm-minicart) > .total {
opacity: 0.75;
}
@media (max-width: 640px) {
.ezviz-cm-minicart__final-price { font-size: 30px; }
}
/* 1.9.12 — Precio por ítem en el drawer, como en las cards:
"Lista $X" + anterior tachado al lado, y debajo el recuadro negro de transferencia */
.ezviz-cm-item-price {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
gap: 6px;
margin-top: 4px;
width: 100%;
}
.ezviz-cm-item-price__list {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 6px;
white-space: nowrap;
color: var(--cm-ink);
font-weight: 700;
font-size: 15px;
}
.ezviz-cm-item-price__list small {
font-size: 11px;
font-weight: 400;
color: #999;
}
.ezviz-cm-item-price__list del {
font-size: 12px;
font-weight: 400;
color: #999;
text-decoration: line-through;
text-decoration-color: var(--cm-pink);
text-decoration-thickness: 2px;
}
.ezviz-cm-item-price__list .amount,
.ezviz-cm-item-price__list bdi {
color: inherit;
font-weight: inherit;
font-size: inherit;
}
.ezviz-cm-item-price__transfer {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
min-width: 150px;
padding: 6px 12px 7px;
background: var(--cm-ink);
line-height: 1;
border-radius: 8px;
}
.ezviz-cm-item-price__transfer::before {
content: "";
position: absolute;
right: -14px;
top: -8px;
width: 44px;
height: 130%;
background: var(--cm-violet);
opacity: 0.9;
}
.ezviz-cm-item-price__transfer em {
position: relative;
z-index: 1;
font-style: normal;
font-family: var(--cm-display);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cm-lime);
}
.ezviz-cm-item-price__transfer strong {
position: relative;
z-index: 1;
color: #fff;
font-size: 16px;
font-weight: 800;
letter-spacing: -0.01em;
}
.ezviz-cm-item-price__transfer strong .amount,
.ezviz-cm-item-price__transfer strong bdi {
color: inherit;
font-weight: inherit;
font-size: inherit;
}
.ezviz-cm-item-price__transfer strong .woocommerce-Price-currencySymbol {
color: var(--cm-lime);
font-size: 0.75em;
margin-right: 2px;
}
/* 1.9.2 — Sello en el título del drawer */
.ezviz-cm-drawer-tag {
border-radius: 10px;
display: inline-block;
vertical-align: middle;
margin-left: 8px;
padding: 3px 9px 2px;
background: var(--cm-lime);
color: var(--cm-violet);
font-family: var(--cm-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1.3;
}
/* ══════════════════════════════════════════════════════════════════════
1.9.3 — Header del tema (Loobek) en modo CyberMonday, solo fase live
Arriba: transparente (home) o blanco (interiores) + línea de color.
Sticky (al scrollear): negro con texto y logo blancos.
══════════════════════════════════════════════════════════════════════ */
body.ezviz-cm-live .ts-header .header-middle {
position: relative;
}
/* Línea lima → rosa → violeta al pie del header, en los dos estados */
body.ezviz-cm-live .ts-header .header-middle::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: linear-gradient(90deg, var(--cm-lime) 0 42%, var(--cm-pink) 42% 72%, var(--cm-violet) 72%);
z-index: 5;
pointer-events: none;
}
/* Badge del carrito en lima */
body.ezviz-cm-live .ts-header .cart-number {
background: var(--cm-lime) !important;
color: var(--cm-ink) !important;
font-weight: 700;
}
/* Hover del menú en lima */
body.ezviz-cm-live .ts-header .main-menu > ul > li > a:hover > .menu-label {
color: var(--cm-lime) !important;
}
body.ezviz-cm-live:not(.header-transparent) .ts-header:not(.is-sticky) .main-menu > ul > li > a:hover > .menu-label {
color: var(--cm-violet) !important; /* sobre blanco el lima no se lee */
}
/* ── Botón "Ofertas CyberMonday" en el menú (lo agrega header.js) ── */
body.ezviz-cm .ts-header .main-menu > ul > li.ezviz-cm-menu-cta {
display: flex !important;
align-items: center;
padding: 0 0 0 10px;
flex-shrink: 0;
}
body.ezviz-cm .ts-header .main-menu > ul > li.ezviz-cm-menu-cta > a {
border-radius: 10px;
display: inline-flex !important;
align-items: center;
gap: 8px;
height: auto !important;
line-height: 1 !important;
padding: 8px 12px !important;
margin: 0 !important;
background: var(--cm-lime);
color: var(--cm-violet) !important;
white-space: nowrap;
transition: background 0.2s, color 0.2s;
}
body.ezviz-cm .ts-header .main-menu > ul > li.ezviz-cm-menu-cta > a .menu-label {
display: inline !important;
height: auto !important;
line-height: 1 !important;
padding: 0 !important;
color: inherit !important;
font-family: var(--cm-display) !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
}
body.ezviz-cm .ts-header .main-menu > ul > li.ezviz-cm-menu-cta > a:hover {
background: var(--cm-violet);
color: #fff !important;
}
body.ezviz-cm .ts-header .main-menu > ul > li.ezviz-cm-menu-cta > a:hover .menu-label {
color: #fff !important;
}
body.ezviz-cm .ts-header .main-menu > ul > li.ezviz-cm-menu-cta img {
width: 30px !important;
height: 22px !important;
max-width: none !important;
object-fit: contain;
filter: none !important;
}
.ezviz-cm-menu-cta .is-long {
display: none;
}
@media (min-width: 1500px) {
.ezviz-cm-menu-cta .is-long {
display: inline;
}
}
/* Compacto (solo logo) cuando no entra: lo decide header.js */
body.ezviz-cm .ts-header .main-menu > ul > li.ezviz-cm-menu-cta.is-hidden {
display: none !important;
}
body.ezviz-cm .ts-header .main-menu > ul > li.ezviz-cm-menu-cta.is-compact > a {
padding: 7px 10px !important;
}
body.ezviz-cm .ts-header .main-menu > ul > li.ezviz-cm-menu-cta.is-compact > a .menu-label {
display: none !important;
}
body.ezviz-cm .ts-header .main-menu > ul > li.ezviz-cm-menu-cta.is-compact img {
width: 34px !important;
height: 24px !important;
}
/* ── Sticky oscuro (body.ezviz-cm-header-dark; filtro ezviz_cm_header_dark) ── */
body.ezviz-cm-live.ezviz-cm-header-dark .ts-header.is-sticky .header-middle {
background: var(--cm-ink) !important;
box-shadow: 0 6px 24px rgba(12, 11, 28, 0.35) !important;
}
body.ezviz-cm-live.ezviz-cm-header-dark .ts-header.is-sticky .menu-label,
body.ezviz-cm-live.ezviz-cm-header-dark .ts-header.is-sticky .main-menu > ul > li > a,
body.ezviz-cm-live.ezviz-cm-header-dark .ts-header.is-sticky .ts-menu-drop-icon,
body.ezviz-cm-live.ezviz-cm-header-dark .ts-header.is-sticky .header-right .icon,
body.ezviz-cm-live.ezviz-cm-header-dark .ts-header.is-sticky .header-right a,
body.ezviz-cm-live.ezviz-cm-header-dark .ts-header.is-sticky .header-left .icon,
body.ezviz-cm-live.ezviz-cm-header-dark .ts-header.is-sticky .header-left a {
color: #fff !important;
}
/* Logo: si existe la versión blanca (header transparente) se usa esa; si no, el logo a color se pasa a blanco */
body.ezviz-cm-live.ezviz-cm-header-dark .ts-header.is-sticky .logo:has(.transparent-header-logo) .sticky-logo,
body.ezviz-cm-live.ezviz-cm-header-dark .ts-header.is-sticky .logo:has(.transparent-header-logo) .normal-logo {
display: none !important;
}
body.ezviz-cm-live.ezviz-cm-header-dark .ts-header.is-sticky .logo:has(.transparent-header-logo) .transparent-header-logo {
display: block !important;
}
body.ezviz-cm-live.ezviz-cm-header-dark .ts-header.is-sticky .logo:not(:has(.transparent-header-logo)) img {
filter: brightness(0) invert(1);
}
/* 1.9.4 — Vista "Ofertas CyberMonday" (?cm_ofertas=1): el botón del header queda marcado como activo */
body.ezviz-cm-ofertas .ts-header .main-menu > ul > li.ezviz-cm-menu-cta > a {
background: var(--cm-violet);
color: #fff !important;
}
body.ezviz-cm-ofertas .ts-header .main-menu > ul > li.ezviz-cm-menu-cta > a .menu-label {
color: #fff !important;
}
body.ezviz-cm-ofertas .ezviz-cm-float,
body.ezviz-cm-ofertas .ezviz-cm-mobilebar {
display: none !important;
}
/* ══════════════════════════════════════════════════════════════════════
1.9.8 — Cards de producto (loops de tienda, categorías, sliders):
1) precio de lista (oferta vigente) con el anterior tachado al lado,
2) recuadro discreto de cuotas,
3) recuadro negro "Transferencia -22%" con el monto (lo más llamativo).
Los bloques .ezviz-transfer-price-box--loop y .ezviz-mp-cuotas--loop los
generan snippets del tema (con !important y estilos inline), por eso el
!important acá. El texto del sello ("Transferencia -22%") lo pone PHP
como estilo inline con el porcentaje real (ezviz_cm_transfer_percent).
══════════════════════════════════════════════════════════════════════ */
body.ezviz-cm-live .products .product .meta-wrapper {
flex-direction: column;
}
/* 1) Precio de lista + anterior tachado al lado */
body.ezviz-cm-live .products .product .meta-wrapper > .price {
order: 4;
margin: 2px 0 0 !important;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
gap: 0 8px;
}
body.ezviz-cm-live .products .product .price .precio-desde {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 8px;
}
body.ezviz-cm-live .products .product .price ins {
order: 1;
display: inline !important;
margin: 0 !important;
text-decoration: none;
font-size: 16px !important;
font-weight: 700 !important;
color: var(--cm-ink) !important;
}
body.ezviz-cm-live .products .product .price ins .amount,
body.ezviz-cm-live .products .product .price ins bdi {
color: var(--cm-ink) !important;
font-size: 16px !important;
font-weight: 700 !important;
}
body.ezviz-cm-live .products .product .price ins::before {
content: "Lista ";
color: #999;
font-weight: 400;
font-size: 12px;
}
body.ezviz-cm-live .products .product .price del {
order: 2;
display: inline !important;
margin: 0 !important;
font-size: 12px !important;
color: #999 !important;
text-decoration: line-through;
text-decoration-color: var(--cm-pink);
text-decoration-thickness: 2px;
}
body.ezviz-cm-live .products .product .price del .amount,
body.ezviz-cm-live .products .product .price del bdi {
color: #999 !important;
font-size: 12px !important;
font-weight: 400 !important;
}
/* 2) Recuadro transferencia: negro, corte diagonal y franja violeta a la derecha */
body.ezviz-cm-live .products .product .meta-wrapper > .ezviz-transfer-price-box--loop {
order: 6;
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 2px;
position: relative;
overflow: hidden;
background: var(--cm-ink);
padding: 8px 12px 9px !important;
margin: 6px 0 4px !important;
line-height: 1 !important;
border-radius: 8px;
}
body.ezviz-cm-live .products .product .meta-wrapper > .ezviz-transfer-price-box--loop::before {
content: "";
position: absolute;
right: -18px;
top: -10px;
width: 70px;
height: 120%;
background: var(--cm-violet);
opacity: 0.9;
}
body.ezviz-cm-live .products .product .ezviz-transfer-label {
order: -1; /* el texto arriba del monto: no se desacomoda con precios largos */
position: relative;
z-index: 1;
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
}
body.ezviz-cm-live .products .product .ezviz-transfer-label::after {
content: "Transferencia"; /* PHP lo sobreescribe con el % */
display: inline-block;
font-family: var(--cm-display);
font-size: 11px;
line-height: 1.2;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cm-lime);
}
body.ezviz-cm-live .products .product .ezviz-transfer-amount {
position: relative;
z-index: 1;
}
body.ezviz-cm-live .products .product .ezviz-transfer-amount,
body.ezviz-cm-live .products .product .ezviz-transfer-amount .woocommerce-Price-amount,
body.ezviz-cm-live .products .product .ezviz-transfer-amount bdi {
color: #fff !important;
font-size: 22px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: -0.01em;
}
body.ezviz-cm-live .products .product .ezviz-transfer-amount .woocommerce-Price-currencySymbol {
font-size: 0.7em !important;
vertical-align: 0.25em;
margin-right: 2px;
color: var(--cm-lime) !important;
}
/* 3) Cuotas: recuadro discreto */
body.ezviz-cm-live .products .product .meta-wrapper > .ezviz-mp-cuotas--loop {
order: 5;
display: block;
background: rgba(180, 18, 255, 0.07);
border-left: 3px solid var(--cm-violet);
padding: 6px 10px !important;
margin: 8px 0 0 !important;
font-size: 12px !important;
color: var(--cm-ink) !important;
line-height: 1.35 !important;
}
body.ezviz-cm-live .products .product .meta-wrapper > .ezviz-mp-cuotas--loop b {
color: var(--cm-ink) !important;
}
body.ezviz-cm-live .products .product .meta-wrapper > .ezviz-mp-cuotas--loop strong,
body.ezviz-cm-live .products .product .meta-wrapper > .ezviz-mp-cuotas--loop strong .amount,
body.ezviz-cm-live .products .product .meta-wrapper > .ezviz-mp-cuotas--loop strong bdi {
color: var(--cm-violet) !important;
font-weight: 700 !important;
}
body.ezviz-cm-live .products .product .meta-wrapper > .ezviz-mp-cuotas--loop .ezviz-mp-logo {
width: 20px !important;
vertical-align: middle;
}
/* El bloque de precio del hover del tema queda al final */
body.ezviz-cm-live .products .product .meta-wrapper > .product-group-button-price {
order: 7;
}
/* 1.9.9 — Cards alineadas: el bloque de precios se ancla al pie de la card.
Las cards de una fila ya tienen la misma altura (.products es flex); el
título de 2 o 3 líneas, "Envío gratis" o las estrellas quedan arriba y el
hueco se absorbe entre el título y los precios. */
body.ezviz-cm-live .products .product .product-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
body.ezviz-cm-live .products .product .product-wrapper > .thumbnail-wrapper {
flex: 0 0 auto;
}
body.ezviz-cm-live .products .product .meta-wrapper {
flex: 1 1 auto;
}
body.ezviz-cm-live .products .product .meta-wrapper > .price {
margin-top: auto !important;
}
/* 1.10.3 — Carruseles de la home (Swiper, widget "ts-product" cargado por AJAX): las slides
no se estiraban a la misma altura, así que el anclaje de precios al pie no servía ahí. */
body.ezviz-cm-live .products .swiper-slide.product {
height: auto !important;
align-self: stretch !important;
display: flex !important;
flex-direction: column;
}
body.ezviz-cm-live .products .swiper-slide.product > .product-wrapper {
width: 100%;
flex: 1 1 auto;
}
/* El recuadro de cuotas ocupa siempre dos líneas: así la fila "Lista" queda a la misma altura
aunque en cards angostas el texto se parta. */
body.ezviz-cm-live .products .product .meta-wrapper > .ezviz-mp-cuotas--loop {
min-height: 44px;
box-sizing: border-box;
}
/* ══════════════════════════════════════════════════════════════════════════
Cupón mágico (1.11.0): "Desbloqueá la cerradura" — teclado de una DL05
══════════════════════════════════════════════════════════════════════════ */
.ezviz-cm-magic-tab[hidden],
.ezviz-cm-magic-tabs[hidden],
.ezviz-cm-magic-list[hidden] {
display: none !important;
}
/* Pestaña doble (1.16.0): "Cupón mágico · Desbloqueala" + "Ver los N productos", pegadas al borde
izquierdo. El grupo es el que rota; dentro, las dos van en fila (= una arriba de la otra en pantalla). */
.ezviz-cm-magic-tabs {
position: fixed;
left: 0;
top: 50%;
z-index: 9985;
display: flex;
align-items: stretch;
gap: 6px;
transform: rotate(-90deg) translate(-50%, 0);
transform-origin: left top;
}
.ezviz-cm-magic-tab {
border-radius: 10px;
position: static;
transform: none;
text-decoration: none !important;
appearance: none;
border: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--cm-lime);
color: var(--cm-violet);
font-family: var(--cm-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 13px;
padding: 10px 18px;
box-shadow: 0 10px 24px -10px rgba(12, 11, 28, 0.6);
}
.ezviz-cm-magic-tab:hover {
background: #c9ff33;
color: var(--cm-violet);
}
.ezviz-cm-magic-tab--view {
background: var(--cm-violet);
color: var(--cm-lime);
font-size: 12px;
padding: 10px 14px;
}
.ezviz-cm-magic-tab--view:hover {
background: #9a0ad8;
color: var(--cm-lime);
}
.ezviz-cm-magic-tab__icon svg {
display: block;
transform: rotate(90deg);
}
/* Cerradura (1.15.8): foto real de la DL05 y el tag EZVIZ que se arrastra hasta el panel
(mecánica de la landing de Intersec). El tag se mueve con transform inline en el botón;
el flotado va en el hijo para que la animación no pise el arrastre. */
.ezviz-cm-lock {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
margin: 8px auto 2px;
padding: 0 6px;
}
/* Caja fija (480×665 del recorte): en la ficha, Loobek le pone a toda ![]()
del producto
width:100% / height:auto !important y la cerradura salía al tamaño natural, tapando el modal. */
.ezviz-cm-lock__dl05 {
position: relative;
width: 186px;
height: 258px;
flex: 0 0 auto;
filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.45));
transform-origin: 30% 80%;
}
body .ezviz-cm-lock__dl05 img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
object-fit: contain;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
}
/* Display de la cerradura (sobre la foto): LED azul; lima al abrir */
.ezviz-cm-lock__display {
position: absolute;
left: 6%;
top: 7.7%;
width: 31.4%;
height: 11.3%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
background: rgba(0, 0, 0, 0.55);
box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.85);
font-family: "Roboto Mono", ui-monospace, Menlo, monospace;
font-size: 7px;
font-weight: 700;
letter-spacing: 0.14em;
white-space: nowrap;
color: rgba(63, 152, 255, 0.9);
text-shadow: 0 0 6px rgba(63, 152, 255, 0.55);
transition: color 0.25s ease;
}
.ezviz-cm-lock.is-reading .ezviz-cm-lock__display {
color: #fff;
text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}
.ezviz-cm-lock.is-open .ezviz-cm-lock__display {
color: var(--cm-lime);
text-shadow: 0 0 8px rgba(184, 255, 0, 0.75);
}
.ezviz-cm-lock.is-error .ezviz-cm-lock__display {
color: #ff5a5a;
text-shadow: 0 0 6px rgba(255, 90, 90, 0.6);
}
/* Lector RFID (ícono de tarjeta en el centro del teclado): punto al que se acomoda el tag */
.ezviz-cm-lock__reader {
position: absolute;
left: 21.7%;
top: 38%;
width: 2px;
height: 2px;
}
.ezviz-cm-lock__reader::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 58px;
height: 58px;
margin: -29px 0 0 -29px;
border-radius: 50%;
border: 2px solid rgba(184, 255, 0, 0.9);
opacity: 0;
transform: scale(0.6);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.ezviz-cm-lock.is-dragging .ezviz-cm-lock__reader::after {
opacity: 1;
transform: scale(1);
animation: ezviz-cm-reader 1.4s ease-in-out infinite;
}
@keyframes ezviz-cm-reader {
0%, 100% { transform: scale(1); opacity: 0.9; }
50% { transform: scale(1.15); opacity: 0.5; }
}
/* Abrir: micro vibración y giro de la manija (solo transform) */
.ezviz-cm-lock.is-open .ezviz-cm-lock__dl05 {
animation: ezviz-cm-grant 0.55s ease-in-out;
}
@keyframes ezviz-cm-grant {
0% { transform: translateX(0) rotate(0); }
9% { transform: translateX(-2px); }
18% { transform: translateX(2px); }
27% { transform: translateX(-1.5px); }
36% { transform: translateX(1.5px); }
62% { transform: translateX(0) rotate(-2.4deg); }
85% { transform: rotate(0.5deg); }
100% { transform: rotate(0); }
}
.ezviz-cm-lock.is-error .ezviz-cm-lock__dl05 {
animation: ezviz-cm-shake 0.4s ease;
}
@keyframes ezviz-cm-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-6px); }
75% { transform: translateX(6px); }
}
/* Columna del tag: el llavero y su guía */
.ezviz-cm-lock__side {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 118px;
flex: 0 0 auto;
}
.ezviz-cm-tag[data-magic-tag] {
position: relative;
display: block;
appearance: none;
border: 0;
background: none;
padding: 0;
margin: 0;
width: 92px;
cursor: grab;
touch-action: none;
-webkit-tap-highlight-color: transparent;
will-change: transform;
z-index: 3;
}
.ezviz-cm-tag[data-magic-tag]:focus-visible {
outline: 2px solid var(--cm-lime);
outline-offset: 4px;
border-radius: 50%;
}
.ezviz-cm-tag[data-magic-tag].is-dragging {
cursor: grabbing;
z-index: 30;
}
.ezviz-cm-tag__inner {
display: block;
position: relative;
animation: ezviz-cm-float 3.4s ease-in-out infinite;
}
.ezviz-cm-tag[data-magic-tag].is-dragging .ezviz-cm-tag__inner,
.ezviz-cm-tag[data-magic-tag].is-docked .ezviz-cm-tag__inner {
animation: none;
transform: rotate(0);
transition: transform 0.25s ease;
}
.ezviz-cm-tag[data-magic-tag].is-docked {
opacity: 0.92;
pointer-events: none;
}
body .ezviz-cm-tag[data-magic-tag] img {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.5));
}
/* Ping de guía sobre el tag hasta que lo agarran */
/* Anillo de guía (solo contorno: un relleno parecía un fondo que se movía detrás del tag) */
.ezviz-cm-tag__ping {
position: absolute;
inset: 14% 8%;
border-radius: 50%;
border: 2px solid rgba(184, 255, 0, 0.85);
animation: ezviz-cm-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.ezviz-cm-tag[data-magic-tag].is-dragging .ezviz-cm-tag__ping,
.ezviz-cm-tag[data-magic-tag].is-docked .ezviz-cm-tag__ping {
display: none;
}
@keyframes ezviz-cm-ping {
0% { transform: scale(0.95); opacity: 0.9; }
75%, 100% { transform: scale(1.45); opacity: 0; }
}
@keyframes ezviz-cm-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
.ezviz-cm-lock__hint {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
font-family: var(--cm-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cm-lime);
text-align: center;
line-height: 1.2;
}
.ezviz-cm-lock__hint small {
font-family: "Roboto", system-ui, sans-serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: rgba(255, 255, 255, 0.7);
}
.ezviz-cm-lock__hint[hidden] {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.ezviz-cm-tag__inner,
.ezviz-cm-tag__ping,
.ezviz-cm-lock.is-dragging .ezviz-cm-lock__reader::after,
.ezviz-cm-lock.is-open .ezviz-cm-lock__dl05,
.ezviz-cm-lock.is-error .ezviz-cm-lock__dl05 {
animation: none;
}
}
/* Productos del cupón, al abrirlo (1.15.10): cuadraditos oscuros con la foto en un recuadro
blanco chico, el modelo corto (DL05, X5S…) y el % en lima. 4 por fila. */
.ezviz-cm-magic-list {
list-style: none;
margin: 0 0 4px;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
text-align: center;
}
/* El tema (Loobek) pone viñetas a todo : afuera */
body.ezviz-cm .ezviz-cm-magic-list li {
list-style: none;
margin: 0;
padding: 0;
min-width: 0;
}
body.ezviz-cm .ezviz-cm-magic-list li::before,
body.ezviz-cm .ezviz-cm-magic-list li::marker {
content: none;
}
.ezviz-cm-magic-list__tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 8px 6px;
background: var(--cm-ink);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: #fff !important;
text-decoration: none !important;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.ezviz-cm-magic-list__tile:hover {
border-color: var(--cm-lime);
transform: translateY(-2px);
}
.ezviz-cm-magic-list__img {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 8px;
background: #fff;
overflow: hidden;
}
body.ezviz-cm .ezviz-cm-magic-list__img img {
width: 50px !important;
height: 50px !important;
object-fit: contain;
display: block;
margin: 0;
border-radius: 0;
background: transparent;
}
.ezviz-cm-magic-list__name {
max-width: 100%;
font-family: var(--cm-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.2;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ezviz-cm-magic-list__pct {
display: inline-flex;
align-items: baseline;
gap: 3px;
font-family: var(--cm-display);
font-size: 13px;
font-weight: 700;
line-height: 1;
color: var(--cm-violet);
background: var(--cm-lime);
padding: 4px 7px;
border-radius: 4px;
}
.ezviz-cm-magic-list__pct small {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
@media (max-width: 380px) {
.ezviz-cm-magic-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Ficha: cuánto da el cupón mágico en este producto */
.ezviz-cm-magic-hint {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin: 0 0 16px;
padding: 10px 12px;
border-radius: 10px;
background: #f1ffd1;
border: 1px solid #d6f57a;
color: var(--cm-ink);
font-size: 14px;
line-height: 1.4;
}
.ezviz-cm-magic-hint__icon {
display: inline-flex;
color: var(--cm-violet);
}
.ezviz-cm-magic-hint b {
color: var(--cm-violet);
}
.ezviz-cm-magic-hint__btn {
appearance: none;
border: 0;
margin-left: auto;
cursor: pointer;
background: var(--cm-violet);
color: var(--cm-lime);
font-family: var(--cm-display);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 13px;
padding: 8px 14px;
border-radius: 6px;
}
.ezviz-cm-magic-hint__btn:hover {
background: #c23bff;
}
/* Carrito / mini-carrito / checkout (1.15.14): qué le descuenta el cupón mágico a cada ítem */
.ezviz-cm-magic-item {
display: inline-flex;
align-items: center;
gap: 5px;
margin: 4px 0 0;
padding: 2px 8px 2px 6px;
border-radius: 999px;
background: #f1ffd1;
border: 1px solid #d6f57a;
color: var(--cm-ink);
font-family: "Roboto", system-ui, sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1.3;
text-transform: none;
letter-spacing: 0;
vertical-align: middle;
}
.ezviz-cm-magic-item svg {
color: var(--cm-violet);
flex: 0 0 auto;
}
.ezviz-cm-magic-item b {
color: var(--cm-violet);
font-weight: 700;
}
.ezviz-cm-magic-item b .amount,
.ezviz-cm-magic-item b bdi {
color: inherit;
font-size: inherit;
font-weight: inherit;
}
.ezviz-cm-magic-item--none {
background: #f3f3f5;
border-color: #e3e3e8;
color: #6b6b75;
}
.ezviz-cm-magic-item--none svg {
color: #9a9aa3;
}
/* Ya tiene el cupón: el aviso pasa a violeta */
.ezviz-cm-magic-hint.is-active {
background: var(--cm-violet);
border-color: var(--cm-violet);
color: #fff;
}
.ezviz-cm-magic-hint.is-active .ezviz-cm-magic-hint__icon,
.ezviz-cm-magic-hint.is-active b {
color: var(--cm-lime);
}
.ezviz-cm-magic-hint.is-active .ezviz-cm-magic-hint__btn {
background: var(--cm-lime);
color: var(--cm-violet);
}
/* 1.15.7 / 1.15.12 — Etiqueta del cupón mágico en las cards: "-5% con tu cupón mágico", pegada
arriba del precio de lista. Con !important porque Loobek estila todo