, solo se reacomoda por CSS con flexbox. Funciona sin
importar cuántas columnas numéricas tenga (impuesto/descuento son
condicionales según configuración del sitio). */
.order-table thead { display: none; }
.order-table, .order-table tbody, .order-table tfoot { display: block; width: 100%; }
.order-table tbody tr {
display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px;
padding: 12px 0; border-bottom: 1px solid var(--mmr-line);
}
.order-table tbody td { display: block; border: 0 !important; padding: 0 !important; width: auto !important; }
.order-table tbody td:first-child { display: none; } /* columna "No", solo decorativa */
.order-table tbody td:nth-child(2) {
flex: 1 0 100%; order: 1;
font-size: 13px; font-weight: 600; color: var(--mmr-ink); line-height: 1.35;
}
.order-table tbody td:nth-child(n+3):not(:last-child) {
order: 2; font-size: 12px; color: var(--mmr-muted); margin-right: 10px;
}
.order-table tbody td:last-child { order: 3; margin-left: auto; font-weight: 800; font-size: 14px; color: var(--mmr-ink); text-align: right; }
.order-table tfoot tr { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 0 !important; }
.order-table tfoot td { display: block; width: auto !important; border: 0 !important; font-size: 13px; }
}
/* "Ver pedido" en móvil: lo secundario (datos de la empresa, código de
barras/QR, dirección de facturación/envío, puntos de premio) queda
detrás de "Mostrar más detalles" -- se ve primero lo importante (estado
del pedido, productos, total). En escritorio se ve todo igual que
siempre; son los mismos bloques de PHP de antes, solo se ocultan por
CSS en pantallas chicas. */
.mmr-order-toggle {
display: none;
align-items: center; gap: 6px;
background: none; border: 0; padding: 8px 0; margin-bottom: 14px;
font-size: 14px; font-weight: 700; color: var(--mmr-link);
cursor: pointer;
}
@media (max-width: 767px) {
.mmr-order-toggle { display: inline-flex; }
.mmr-order-more { display: none; }
body.mmr-order-expanded .mmr-order-more { display: block; }
body.mmr-order-expanded .mmr-order-toggle .fa { transform: rotate(180deg); }
}
/* ---------- 29. Carrito flotante + recordatorio amistoso ----------
Mismo lenguaje visual que #wa-fab/#wheel-fab (custom.css, sin tocar):
se apila arriba de esos dos. Solo aparece si hay productos en el
carrito (lo prende/apaga update_mini_cart en footer.php). */
#cart-fab {
position: fixed; right: 20px; bottom: calc(148px + var(--mmr-cookiebar-h, 0px));
z-index: 1020;
background: var(--mmr-ink); color: #fff !important;
border: none; border-radius: 50px;
padding: 14px 22px; font-weight: 700; font-size: 15px;
text-decoration: none !important;
box-shadow: 0 4px 16px rgba(0,0,0,.3);
display: inline-flex; align-items: center; gap: 8px;
min-width: 190px; justify-content: center;
transition: bottom .2s ease, filter .15s ease;
}
#cart-fab:hover { filter: brightness(1.15); }
#cart-fab .mmr-count {
background: #e5484d; color: #fff;
min-width: 20px; height: 20px; border-radius: 10px;
font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
padding: 0 5px;
}
body.mmr-has-cookiebar #cart-fab { bottom: calc(148px + var(--mmr-cookiebar-h, 70px)) !important; }
@media (max-width: 767px) {
#cart-fab {
min-width: 0; width: 52px; height: 52px; padding: 0;
border-radius: 50%; font-size: 20px; position: fixed;
}
#cart-fab .mm-fab-label { display: none; }
#cart-fab .mmr-count { position: absolute; top: -2px; right: -2px; }
}
/* Mensaje amistoso: aparece un momento y se esfuma solo (mmr-redesign.js,
sección 10) -- no lleva botón de cerrar a propósito, no hace falta. */
#cart-fab-toast {
position: fixed; right: 20px; bottom: calc(208px + var(--mmr-cookiebar-h, 0px));
z-index: 1019; max-width: 220px;
background: #fff; color: var(--mmr-ink);
border-radius: var(--mmr-r-md); padding: 10px 14px;
font-size: 13px; font-weight: 600; line-height: 1.35;
box-shadow: 0 4px 16px rgba(0,0,0,.2);
opacity: 0; transform: translateY(6px); pointer-events: none;
transition: opacity .35s ease, transform .35s ease;
}
#cart-fab-toast.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 767px) { #cart-fab-toast { bottom: calc(180px + var(--mmr-cookiebar-h, 0px)); right: 16px; } }
/* Si la página ya tiene su propia barra fija de compra (ficha de
producto, checkout), no hace falta duplicar el llamado a la acción con
el carrito flotante encima. */
body:has(.mmr-sticky-bar) #cart-fab,
body:has(.mmr-sticky-bar) #cart-fab-toast { display: none !important; }
/* Tampoco tiene sentido en el carrito mismo -- ya se está viendo. */
body:has(.mmr-cart-layout) #cart-fab,
body:has(.mmr-cart-layout) #cart-fab-toast { display: none !important; }
/* ---------- 30. Carrusel de productos (home: "Más Vendidos") ----------
Reemplaza el banner/hero de un solo producto por un carrusel de varios
-- mismas tarjetas .mmr-pcard de siempre (Temu-style), solo se
reacomodan en fila horizontal con scroll-snap (el swipe en móvil es
scroll nativo del navegador, no hace falta reimplementarlo). Pensado
para reusarse tal cual en más secciones futuras (ofertas del día,
recién llegados) con el mismo . Alto máximo
pensado: ~280px en móvil / ~350px en escritorio, para que se vean
productos apenas se entra al sitio sin necesitar scroll. */
.mmr-carousel-section { margin: 20px var(--mmr-pad) 0; }
.mmr-carousel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mmr-carousel-head h2 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; }
.mmr-carousel-head p { margin: 2px 0 0; font-size: 13px; color: var(--mmr-muted); }
.mmr-carousel { position: relative; }
.mmr-carousel__track {
display: flex; gap: 10px;
overflow-x: auto; scroll-behavior: smooth;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
padding-bottom: 2px;
}
/* Sin scroll-snap a propósito: el carrusel de categorías (.mmr-chips,
sección 5 de mmr-redesign.js) tampoco lo usa y sí avanza solo -- el
snap puede pelear con el scrollTo() programático del auto-avance y
cancelar la animación. El swipe en móvil sigue funcionando igual
(scroll nativo), solo que sin engancharse a una tarjeta exacta. */
.mmr-carousel__track::-webkit-scrollbar { display: none; }
.mmr-carousel__track > .mmr-pcard { flex: 0 0 calc(50% - 5px); }
.mmr-carousel__track .mmr-pcard__photo { height: 160px; }
@media (min-width: 600px) {
.mmr-carousel__track > .mmr-pcard { flex-basis: calc(33.333% - 7px); }
}
@media (min-width: 992px) {
.mmr-carousel-section { margin: 32px 80px 0; }
.mmr-carousel-head h2 { font-size: 26px; }
.mmr-carousel__track { gap: 16px; }
.mmr-carousel__track > .mmr-pcard { flex-basis: calc(20% - 13px); }
.mmr-carousel__track .mmr-pcard__photo { height: 210px; }
}
.mmr-carousel__nav {
display: none;
position: absolute; top: 40%; transform: translateY(-50%);
width: 36px; height: 36px; border-radius: 50%;
border: 1px solid var(--mmr-line); background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.15);
align-items: center; justify-content: center; cursor: pointer; z-index: 2;
-webkit-appearance: none; appearance: none;
}
.mmr-carousel__nav svg { width: 18px; height: 18px; color: var(--mmr-ink); }
.mmr-carousel__nav--prev { left: -14px; }
.mmr-carousel__nav--next { right: -14px; }
@media (min-width: 992px) {
.mmr-carousel__nav { display: flex; }
}
/* Variante "chica" del carrusel (home, arriba de todo, antes ocupaba el
banner de imágenes del admin): productos más chicos y más juntos, para
que se vea más como una vitrina rápida que como un banner. */
.mmr-carousel--sm .mmr-pcard__photo { height: 110px; }
.mmr-carousel--sm .mmr-pcard__body { padding: 0; gap: 3px; }
.mmr-carousel--sm .mmr-pcard.product { padding: 6px; gap: 6px; }
.mmr-carousel--sm .mmr-pcard__name { font-size: 12px; }
.mmr-carousel--sm .mm-pop { font-size: 10px; }
.mmr-carousel--sm .mmr-price__now { font-size: 13px; }
.mmr-carousel--sm .mmr-pcard__add { width: 28px; height: 28px; }
.mmr-carousel--sm .mmr-pcard__add svg { width: 14px; height: 14px; }
.mmr-carousel--sm .mmr-carousel__track > .mmr-pcard { flex-basis: calc(33.333% - 7px); }
@media (min-width: 600px) {
.mmr-carousel--sm .mmr-carousel__track > .mmr-pcard { flex-basis: calc(25% - 8px); }
}
@media (min-width: 992px) {
.mmr-carousel--sm .mmr-pcard__photo { height: 140px; }
.mmr-carousel--sm .mmr-carousel__track > .mmr-pcard { flex-basis: calc(16.666% - 14px); }
}
/* ---------- 31. "Me gusta" + comentarios (ficha de producto) ---------- */
.mmr-like-btn {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 12px; padding: 10px 16px;
border: 1px solid var(--mmr-line); border-radius: 999px;
background: #fff; color: var(--mmr-ink); font-size: 14px; font-weight: 700;
cursor: pointer; -webkit-appearance: none; appearance: none;
transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.mmr-like-btn svg { width: 20px; height: 20px; color: var(--mmr-danger, #e5484d); flex-shrink: 0; }
.mmr-like-btn.is-liked { background: #fff0f0; border-color: var(--mmr-danger, #e5484d); color: var(--mmr-danger, #e5484d); }
.mmr-like-btn.mmr-like-pop { animation: mmr-like-pop .4s ease; }
@keyframes mmr-like-pop {
0% { transform: scale(1); }
35% { transform: scale(1.18); }
100% { transform: scale(1); }
}
.mmr-comment-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.mmr-comment-form textarea {
width: 100%; min-height: 72px; padding: 10px 12px; resize: vertical;
border: 1px solid var(--mmr-line); border-radius: var(--mmr-r-md);
font: inherit; color: var(--mmr-ink); background: #fff;
}
.mmr-comment-form .mmr-btn { align-self: flex-end; }
.mmr-comment-list { display: flex; flex-direction: column; gap: 16px; }
.mmr-comment { display: flex; gap: 12px; }
.mmr-comment__avatar {
width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
background: var(--mmr-ink); color: #fff; font-weight: 800; font-size: 15px;
display: flex; align-items: center; justify-content: center;
}
.mmr-comment__body strong { font-size: 14px; color: var(--mmr-ink); }
.mmr-comment__body .mmr-muted { font-size: 12px; }
.mmr-comment__body p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--mmr-ink); }
/* ---------- 32. Cuenta: modales de registro rápido / iniciar sesión + página /login ---------- */
.mmr-modal .modal-dialog { width: auto; max-width: 440px; margin: 56px auto; padding: 0 var(--mmr-pad); }
.mmr-modal .modal-content { border: 0; border-radius: var(--mmr-r-xl); box-shadow: 0 24px 64px rgba(16, 24, 40, .28); font-family: var(--mmr-font-body); color: var(--mmr-ink); }
.mmr-modal .modal-header { border-bottom: 0; padding: 24px 24px 0; }
.mmr-modal .modal-title { font-family: var(--mmr-font-display); font-size: 24px; font-weight: 800; letter-spacing: -.3px; line-height: 1.2; color: var(--mmr-ink); padding-right: 32px; }
.mmr-modal .qr-sub { margin: 6px 0 0; font-size: 14px; color: var(--mmr-muted); }
.mmr-modal .close { font-size: 30px; font-weight: 400; opacity: .55; margin-top: -6px; min-width: var(--mmr-touch); min-height: var(--mmr-touch); margin-right: -12px; }
.mmr-modal .close:hover { opacity: .9; }
.mmr-modal .modal-body { padding: 18px 24px 24px; }
.mmr-modal .form-group { margin-bottom: 0; }
@media (max-width: 767px) {
.mmr-modal .modal-dialog { margin: 24px auto; }
.mmr-modal .modal-header { padding: 20px 20px 0; }
.mmr-modal .modal-body { padding: 16px 20px 20px; }
}
.mmr-qs-creds { background: var(--mmr-success-soft); border-radius: var(--mmr-r-md); padding: 12px 14px; font-size: 15px; }
.mmr-login-form .mmr-field + .mmr-field { margin-top: 14px; }
.mmr-pass { position: relative; }
.mmr-pass input { padding-right: 76px !important; }
.mmr-pass__toggle {
position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
min-height: 40px; padding: 0 12px; border: 0; background: transparent;
color: var(--mmr-link); font-weight: 700; font-size: 13px; border-radius: var(--mmr-r-sm);
}
.mmr-pass__toggle:hover { background: var(--mmr-bg); }
.mmr-login-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 14px 0 16px; font-size: 14px; }
.mmr-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; cursor: pointer; min-height: var(--mmr-touch); }
.mmr-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--mmr-ink); }
.mmr-login-row .forgot-password { font-weight: 600; }
.mmr-login-error { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--mmr-danger); }
.mmr-login-error a { margin-left: 2px; }
.mmr-auth-switch { margin: 16px 0 0; text-align: center; font-size: 14px; }
.mmr-auth-switch a { font-weight: 700; }
.mmr-auth { display: grid; gap: 16px; max-width: 960px; margin: 24px auto 48px; padding: 0 var(--mmr-pad); }
.mmr-auth .mmr-card { padding: 24px; margin: 0; }
.mmr-auth__title { font-family: var(--mmr-font-display); font-size: 28px; font-weight: 800; letter-spacing: -.4px; margin: 0; color: var(--mmr-ink); }
.mmr-auth__sub { margin: 6px 0 18px; }
.mmr-auth__new h2 { font-family: var(--mmr-font-display); }
.mmr-auth__perks { list-style: none; padding: 0; margin: 14px 0 20px; }
.mmr-auth__perks li { position: relative; padding-left: 26px; margin-top: 8px; font-size: 15px; }
.mmr-auth__perks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--mmr-success); font-weight: 800; }
@media (min-width: 768px) {
.mmr-auth { grid-template-columns: 1.15fr 1fr; align-items: start; margin-top: 40px; }
.mmr-auth .mmr-card { padding: 32px; }
}
/* ---------- 33. Tarjeta de producto: botón de WhatsApp (solo ícono) junto al carrito ----------
Mismo tamaño que .mmr-pcard__add en cada variante. Lo arman product_card.php
y gen_html() de scripts.min.js; mismo mensaje que "Comprar por WhatsApp" de la ficha. */
.mmr-pcard__footer { flex-wrap: wrap; }
.mmr-pcard__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.mmr-pcard__wa {
width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
background: var(--mmr-whatsapp); color: var(--mmr-ink-deep) !important;
display: inline-flex; align-items: center; justify-content: center;
text-decoration: none !important; -webkit-tap-highlight-color: transparent;
}
.mmr-pcard__wa svg { width: 18px; height: 18px; }
.mmr-pcard__wa:hover { filter: brightness(.93); }
@media (min-width: 992px) {
.mmr-pcard__wa { width: 38px; height: 38px; }
.mmr-pcard__wa svg { width: 20px; height: 20px; }
}
.mmr-carousel--sm .mmr-pcard__actions { gap: 4px; }
.mmr-carousel--sm .mmr-pcard__wa { width: 28px; height: 28px; }
.mmr-carousel--sm .mmr-pcard__wa svg { width: 15px; height: 15px; }
/* ---------- 34. Tarjeta de producto: "me gusta" debajo de vistas/estrellas ----------
Lo arman product_card.php (Site::getProductLikes) y gen_html() de scripts.min.js (r.likes de /shop/search). */
.mmr-pcard__likes { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; line-height: 1.2; color: var(--mmr-muted); }
.mmr-pcard__likes svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--mmr-danger); }
.mmr-carousel--sm .mmr-pcard__likes { font-size: 10px; }
.mmr-carousel--sm .mmr-pcard__likes svg { width: 11px; height: 11px; }
/* ---------- Categorías en escritorio: carrusel con todas las categorías (2026-09-26) ---------- */
@media (min-width: 992px) {
.mmr-catnav { gap: 0; }
.mmr-catnav__scroll {
display: flex; gap: 32px; align-items: center; flex: 1; min-width: 0; height: 100%;
overflow-x: auto; scrollbar-width: none;
-webkit-mask-image: linear-gradient(to right, #000 92%, transparent);
mask-image: linear-gradient(to right, #000 92%, transparent);
}
.mmr-catnav__scroll::-webkit-scrollbar { display: none; }
}
/* ---------- Tallas (Cultura 506) ---------- */
/* Botones de talla en la ficha. Cada input conserva el .form-group del bloque
(validación .validate de SMA). Agotada = tachada y deshabilitada. */
.mmr-sizes { margin: 18px 0 6px; }
.mmr-sizes__label { display: block; font-weight: 700; margin-bottom: 8px; color: var(--mmr-ink); }
.mmr-sizes__label small { font-weight: 500; color: var(--mmr-muted); margin-left: 6px; font-size: 13px; }
.mmr-sizes__grid { display: flex; flex-wrap: wrap; gap: 8px; }
.mmr-size { position: relative; margin: 0; cursor: pointer; font-weight: 600; }
.mmr-size input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mmr-size span {
display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
min-width: var(--mmr-touch); height: var(--mmr-touch); padding: 0 12px;
border: 1.5px solid var(--mmr-line); border-radius: var(--mmr-r-md);
background: var(--mmr-surface); color: var(--mmr-ink); font-size: 15px; line-height: 1.1;
transition: border-color .15s, background .15s, color .15s;
}
.mmr-size span small { font-size: 11px; font-weight: 500; color: var(--mmr-muted); }
.mmr-size:hover span { border-color: var(--mmr-ink); }
.mmr-size input:checked + span { background: var(--mmr-ink); border-color: var(--mmr-ink); color: #fff; }
.mmr-size input:checked + span small { color: var(--mmr-on-dark); }
.mmr-size input:focus-visible + span { outline: 3px solid var(--mmr-link); outline-offset: 2px; }
.mmr-size.is-out { cursor: not-allowed; }
.mmr-size.is-out span { color: var(--mmr-muted); background: var(--mmr-photo); border-style: dashed; text-decoration: line-through; }
.mmr-size.is-out:hover span { border-color: var(--mmr-line); }
.mmr-sizes__hint { display: block; min-height: 20px; margin-top: 6px; font-size: 13px; font-weight: 600; color: #A8430A; }
.mmr-sizes.is-missing .mmr-size span { border-color: var(--mmr-danger); }
.mmr-sizes.is-missing .mmr-sizes__hint { color: var(--mmr-danger); }
.mmr-sizes .help-block { display: none; } /* el aviso lo da .mmr-sizes__hint */
/* Íconos de FormValidation (.form-control-feedback) que se insertan junto a cada radio. */
.mmr-sizes .form-control-feedback, .mmr-sizes .fv-control-feedback { display: none !important; }
.mmr-sizes .mmr-size input[type="radio"] {
position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important;
margin: 0 !important; pointer-events: none; -webkit-appearance: none; appearance: none;
}
/* ---------- Enlaces sobre fondo oscuro ---------- */
/* "body.mmr-shop a" (color de enlace) les ganaba por especificidad a estas reglas:
el texto quedaba azul petróleo sobre el fondo oscuro, casi ilegible. */
body.mmr-shop .mmr-promo a { color: #fff; }
body.mmr-shop .mmr-header__actions > a,
body.mmr-shop .mmr-header__actions > .dropdown > a { color: #fff; }
body.mmr-shop .mmr-header__actions > a:hover,
body.mmr-shop .mmr-header__actions > .dropdown > a:hover { color: var(--mmr-accent-hover); }
body.mmr-shop .mmr-promo-card--dark a { color: var(--mmr-accent); }
body.mmr-shop .mmr-footer a { color: var(--mmr-on-dark); }
body.mmr-shop .mmr-footer a:hover { color: #fff; }
/* El tema de SMA dibuja un radio propio con "input[type=radio] + span::before" (círculo de 16px):
en los botones de talla sobra, el botón entero ya es la opción. */
.mmr-sizes .mmr-size input + span::before,
.mmr-sizes .mmr-size input + span::after { content: none !important; display: none !important; }
/* Subcategorías (Cultura 506, 2026-09-28): botones sobre el listado, visibles en móvil y escritorio */
.mmr-subcats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.mmr-subcats .mmr-chip { margin: 0; }
.mmr-mobile-menu__list li.mmr-mobile-menu__sub a { padding-left: 32px; font-size: .92em; opacity: .85; }
/* Catálogo por encargo (Cultura 506, 2026-09-28): /catalogo */
.mmr-encargo__intro h1 { font-family: var(--mmr-font-display); font-size: 26px; font-weight: 800; margin: 0 0 8px; }
.mmr-encargo__intro p { color: var(--mmr-body); margin: 0 0 8px; }
.mmr-encargo__precios { margin-top: 8px; }
.mmr-encargo__precios summary { cursor: pointer; font-weight: 700; color: var(--mmr-link); min-height: var(--mmr-touch); display: flex; align-items: center; }
.mmr-encargo__precios ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.mmr-encargo__precios li { display: flex; justify-content: space-between; gap: 6px; padding: 6px 10px; border: 1px solid var(--mmr-line-soft); border-radius: var(--mmr-r-md); background: var(--mmr-bg); font-size: 14px; }
.mmr-encargo__tools { display: flex; gap: 8px; margin: 16px 0 12px; }
.mmr-encargo__tools input { flex: 1; min-width: 0; height: var(--mmr-touch); }
.mmr-encargo__tools select { width: auto; height: var(--mmr-touch); }
.mmr-encargo__secc { margin-top: -6px; }
.mmr-encargo__secc .mmr-chip { font-size: 13px; }
.mmr-encargo__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { .mmr-encargo__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1200px) { .mmr-encargo__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.mmr-encargo__item { display: flex; flex-direction: column; gap: 4px; text-align: left; background: var(--mmr-surface); border: 0; border-radius: var(--mmr-r-lg); padding: 8px 8px 12px; cursor: pointer; color: var(--mmr-ink); font: inherit; }
.mmr-encargo__item:hover, .mmr-encargo__item:focus-visible { box-shadow: 0 0 0 2px var(--mmr-accent); outline: none; }
.mmr-encargo__ph { display: block; aspect-ratio: 1 / 1; background: var(--mmr-photo); border-radius: var(--mmr-r-sm); overflow: hidden; margin-bottom: 4px; }
.mmr-encargo__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mmr-encargo__name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.mmr-encargo__sizes { font-size: 13px; color: var(--mmr-muted); }
.mmr-encargo__price { font-weight: 800; font-size: 16px; }
.mmr-encargo__more { text-align: center; margin: 20px 0 8px; }
.mmr-encargo__more button { min-height: var(--mmr-touch); padding: 0 24px; border: 1px solid var(--mmr-ink); border-radius: var(--mmr-r-lg); background: transparent; color: var(--mmr-ink); font-weight: 700; }
.mmr-encargo__modal { position: fixed; inset: 0; z-index: 2000; background: rgba(11, 29, 33, .78); display: flex; align-items: center; justify-content: center; padding: 12px; }
.mmr-encargo__modal[hidden] { display: none; }
.mmr-encargo__dialog { position: relative; background: var(--mmr-surface); border-radius: var(--mmr-r-xl); max-width: 920px; width: 100%; max-height: 100%; overflow: auto; display: flex; flex-direction: column; }
@media (min-width: 768px) { .mmr-encargo__dialog { flex-direction: row; } .mmr-encargo__dialog img { width: 58%; } }
.mmr-encargo__dialog img { display: block; max-width: 100%; object-fit: contain; background: var(--mmr-photo); }
.mmr-encargo__minfo { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.mmr-encargo__minfo h2 { font-size: 20px; font-weight: 800; margin: 0; padding-right: 36px; }
.mmr-encargo__mprice { font-size: 22px; font-weight: 800; }
.mmr-encargo__close { position: absolute; top: 6px; right: 6px; width: var(--mmr-touch); height: var(--mmr-touch); border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); font-size: 28px; line-height: 1; color: var(--mmr-ink); z-index: 1; }
.mmr-encargo__wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--mmr-touch); padding: 0 20px; border: 0; border-radius: var(--mmr-r-lg); background: var(--mmr-whatsapp); color: var(--mmr-ink-deep) !important; font-weight: 800; text-decoration: none !important; }
.mmr-encargo__wa[disabled] { opacity: .6; }
.mmr-encargo__log { max-height: 260px; overflow: auto; background: var(--mmr-bg); padding: 10px; border-radius: var(--mmr-r-md); font-size: 13px; margin-top: 12px; white-space: pre-wrap; }
.mmr-subcats[hidden] { display: none; }
@media (max-width: 480px) { .mmr-encargo__tools select { max-width: 42%; font-size: 14px; } }
.mmr-encargo__antes { font-weight: 500; font-size: .8em; color: var(--mmr-muted); margin-left: 4px; }
/* Catlogo por encargo: tallas para escoger en la vista del producto */
.mmr-encargo__talla strong { display: block; margin-bottom: 6px; }
.mmr-encargo__tallas { display: flex; flex-wrap: wrap; gap: 8px; }
.mmr-encargo__tbtn { min-width: 48px; min-height: var(--mmr-touch); padding: 0 12px; border: 1px solid var(--mmr-line); border-radius: var(--mmr-r-md); background: var(--mmr-surface); color: var(--mmr-ink); font-weight: 700; }
.mmr-encargo__tbtn:hover { border-color: var(--mmr-ink); }
.mmr-encargo__tbtn.is-active { background: var(--mmr-ink); border-color: var(--mmr-ink); color: #fff; }
.mmr-encargo__aviso { display: block; margin-top: 6px; color: var(--mmr-danger); font-weight: 700; }