/* ==========================================================================
   LAYOUT GENERAL — 2 columnas (izquierda: productos + recomendaciones,
   derecha: totales), apiladas en mobile.
   ========================================================================== */
/* width:100% explícito en ambos: sin esto, dentro del wrapper de Kadence (kadence-woo-cart-form-wrap)
   el form/layout se encogía a su contenido en vez de estirarse a lo ancho, dejando todo pegado a
   la izquierda con un montón de espacio vacío a la derecha — mismo tipo de bug que ya arreglamos
   antes en la barra de filtros del catálogo. */
.mmc-cart-form.mmc-cart-form { width: 100% !important; max-width: 1300px !important; margin: 0 auto !important; padding: 20px 15px; box-sizing: border-box; display: block !important; float: none !important; }
.mmc-cart-layout { display: flex !important; width: 100% !important; gap: 40px; align-items: flex-start; margin-top: 10px; }
.mmc-cart-left { flex: 1 1 65%; min-width: 0; width: 0; }
/* position:sticky: al hacer scroll, esta columna se queda a la vista siguiendo el scroll de la
   izquierda en vez de quedar arriba y perderse de vista. El "top" lo calcula js/carrito-premium.js
   según la altura real del header pegajoso de Kadence, para no quedar tapado por él (mismo criterio
   que ya usamos en la barra de filtros del catálogo). */
.mmc-cart-right {
    flex: 1 1 35%; max-width: 380px; min-width: 0; width: 0;
    position: sticky; top: var(--mmc-cart-sticky-top, 20px); align-self: flex-start;
}
.mmc-cart-titulo { font-size: 22px; font-weight: 700; margin: 0 0 20px; }

@media (max-width: 950px) {
    .mmc-cart-layout { flex-direction: column; }
    /* .mmc-cart-left también tenía width:0 (truco de ancho para cuando el flex es en fila, en
       escritorio) — en columna (mobile) ese width:0 se vuelve un ancho real de CERO en vez de un
       truco inofensivo, y comprime todo el contenido de adentro a casi nada (texto partiéndose
       letra por letra). Se resetea acá igual que ya se hacía con .mmc-cart-right. */
    .mmc-cart-left { max-width: 100%; width: 100%; }
    .mmc-cart-right { max-width: 100%; width: 100%; position: static; }

    /* js/carrito-premium.js envuelve #mmc-cart-items en .mmc-cart-items-wrap y mete el cupón y
       .mmc-cart-resumen-pedido (totales+botón) ahí dentro — el contenedor de ese sticky queda
       acotado SOLO al alto de los productos (no de todo .mmc-cart-left, que también tiene las
       recomendaciones después), así se despega justo al terminar la lista y no antes de tiempo ni
       más tarde. El resto del sidebar (beneficios/métodos de pago/contacto) se muda entero justo
       después de este envoltorio, quedando entre los productos y las recomendaciones. */
    .mmc-cart-items-wrap > .mmc-cart-resumen-pedido {
        position: sticky;
        bottom: 0;
        z-index: 40;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 6px;
        padding: 20px;
        margin-top: 20px;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   ITEMS DEL CARRITO
   ========================================================================== */
#mmc-cart-items { display: flex; flex-direction: column; }
.mmc-cart-empty { padding: 30px 0; color: #666; }

.mmc-cart-item { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px 0; border-bottom: 1px solid #eee; }
/* 187px = 110px x 1.7 (~70% más grande, pedido para escritorio) — pero fijo así, en pantallas
   angostas casi no dejaba espacio para el texto y el título se partía letra por letra. max-width en
   % lo cap-ea proporcional al ancho real disponible, sin necesitar un breakpoint exacto. */
.mmc-cart-item-img { flex: 0 0 187px; max-width: 35%; }
.mmc-cart-item-img img { width: 100%; height: auto; display: block; border-radius: 4px; }
.mmc-cart-item-info { flex: 1 1 0%; min-width: 0; padding-right: 20px; box-sizing: border-box; }

.mmc-cart-item-header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mmc-cart-item-title-wrap { min-width: 0; }
.mmc-cart-item-title { margin: 0; font-size: 15px; font-weight: 700; }
.mmc-cart-item-title a { color: #111; text-decoration: none; }

/* Escritorio (por defecto, ancho > 950px): NO cambia — nombre+color concatenados en un solo texto
   (mmc-cart-item-title-desktop) y precio de la montura visible arriba, exactamente como estaba
   antes. La versión mobile (nombre y color en líneas separadas con distinto color de letra, precio
   reemplazado por "Más detalles") solo se activa dentro del media query de 950px, más abajo. */
.mmc-cart-item-title-mobile,
.mmc-cart-item-color,
.mmc-cart-item-toggle-detalle,
.mmc-cart-item-detalle { display: none; }

.mmc-cart-item-price { font-size: 14px; font-weight: 700; color: #111; white-space: nowrap; }
.mmc-cart-item-price del { color: #999; font-weight: 400; margin-right: 6px; }
.mmc-cart-item-price ins { text-decoration: none; }

.mmc-cart-item-desc { font-size: 12px; color: #666; line-height: 1.5; margin: 4px 0 0; }
.mmc-cart-item-desc p { margin: 0; }
.mmc-cart-item-desc-label { font-size: 12px; font-weight: 600; color: #444; margin: 6px 0 3px; }

/* Variación nativa (dl.variation) + flujo de lentes — versión ESCRITORIO (formato original: label
   y valor en la misma línea, sin "Marco"). No tocar: es el diseño ya aprobado. */
.mmc-cart-item dl.variation,
.mmc-flujo-lentes-detalle-desktop { margin: 6px 0; font-size: 12px; }
.mmc-cart-item dl.variation > * { margin: 0; }
.mmc-flujo-lentes-detalle-desktop .mmc-flujo-linea {
    display: flex; align-items: baseline; gap: 6px; padding: 3px 0; color: #666;
}
.mmc-flujo-lentes-detalle-desktop dt { font-weight: 600; color: #555; white-space: nowrap; }
.mmc-flujo-lentes-detalle-desktop dd { margin: 0; flex: 1; min-width: 0; position: relative; }
.mmc-flujo-lentes-detalle-desktop .mmc-flujo-precio { white-space: nowrap; color: #555; }

/* Variación nativa + Marco/Lentes/Tipo de Lente/Lente — versión MOBILE (dentro de
   .mmc-cart-item-detalle, oculta en escritorio arriba). Cada "grupo" tiene su label arriba (color
   distinto) y debajo una fila con el valor a la izquierda y el precio de esa línea a la derecha. */
.mmc-cart-item-detalle dl.variation,
.mmc-flujo-lentes-detalle { margin: 0 0 10px; font-size: 12px; }
.mmc-cart-item-detalle dl.variation:last-child,
.mmc-flujo-lentes-detalle:last-child { margin-bottom: 0; }
.mmc-cart-item-detalle dl.variation > * { margin: 0; }

.mmc-flujo-grupo { padding: 6px 0; }
.mmc-flujo-grupo + .mmc-flujo-grupo { border-top: 1px solid #eee; }
.mmc-flujo-label { font-weight: 600; color: #1f5fbf; font-size: 12px; margin-bottom: 3px; }
.mmc-flujo-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: #666; }
.mmc-flujo-valor { flex: 1; min-width: 0; position: relative; }
.mmc-flujo-fila .mmc-flujo-precio { white-space: nowrap; color: #555; font-weight: 600; }

/* "Ver Receta Completada" / "Por enviar al correo" — clickeable, abre el popup de al lado */
.mmc-flujo-popup-trigger { color: #1f5fbf; text-decoration: underline; cursor: pointer; }
.mmc-flujo-popup-trigger:hover { color: #174690; }

.mmc-flujo-popup {
    position: absolute; top: 100%; left: 0; margin-top: 6px; z-index: 30;
    background: #fff; border: 1px solid #e1e5e9; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.12);
    padding: 12px 14px; width: max-content; max-width: 260px;
}
.mmc-flujo-popup img { max-width: 100%; height: auto; display: block; border-radius: 4px; }

/* ==========================================================================
   POPUP "?" DE ACCESORIO — variante grande (vista rápida + selector real de
   variación), fija y centrada en pantalla con fondo oscuro, a diferencia de
   los popups chicos de receta (dropdown junto al texto que los abre).
   ========================================================================== */
.mmc-accesorio-popup-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 199; }

.mmc-flujo-popup.mmc-accesorio-popup {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: 0;
    width: min(680px, 92vw); max-width: 680px; max-height: 85vh; overflow-y: auto;
    z-index: 200; padding: 0; border-radius: 8px;
}
.mmc-accesorio-popup-contenido { display: flex; gap: 0; position: relative; }
.mmc-accesorio-popup-cerrar {
    position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: none; background: none;
    font-size: 20px; line-height: 1; color: #666; cursor: pointer; z-index: 2;
}
.mmc-accesorio-popup-cerrar:hover { color: #111; }

.mmc-accesorio-popup-galeria { flex: 0 0 45%; padding: 24px; box-sizing: border-box; }
.mmc-accesorio-popup-img-principal img { width: 100%; height: auto; display: block; border-radius: 4px; }
.mmc-accesorio-popup-thumbs { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.mmc-accesorio-popup-thumb { padding: 0; border: 1px solid #e1e5e9; border-radius: 4px; background: none; cursor: pointer; overflow: hidden; width: 48px; height: 48px; }
.mmc-accesorio-popup-thumb.active { border-color: #1f5fbf; }
.mmc-accesorio-popup-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mmc-accesorio-popup-info { flex: 1; min-width: 0; padding: 24px 24px 24px 0; box-sizing: border-box; }
.mmc-accesorio-popup-titulo { margin: 0 0 8px; font-size: 17px; }
.mmc-accesorio-popup-precio { font-size: 16px; font-weight: 700; color: #111; margin-bottom: 12px; }
.mmc-accesorio-popup-precio del { color: #999; font-weight: 400; margin-right: 6px; }
.mmc-accesorio-popup-precio ins { text-decoration: none; }
.mmc-accesorio-popup-desc { font-size: 13px; color: #555; line-height: 1.6; margin: 14px 0; }
.mmc-accesorio-popup-desc p:first-child { margin-top: 0; }

/* Grupos de atributo (color/talla) + swatches del popup */
.mmc-pop-attr-group { margin-bottom: 14px; }
.mmc-pop-attr-label { font-size: 12px; color: #555; margin: 0 0 6px; text-transform: capitalize; }
.mmc-pop-attr-valor { color: #111; text-transform: none; }
.mmc-pop-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.mmc-pop-swatch { cursor: pointer; }
.mmc-pop-swatch-color {
    width: 26px; height: 26px; border-radius: 50%; border: 1px solid #dcdcdc; padding: 0;
}
.mmc-pop-swatch-color.selected { outline: 2px solid #1f5fbf; outline-offset: 2px; }
.mmc-pop-swatch-text {
    border: 1px solid #ccc; border-radius: 4px; background: #fff; padding: 6px 12px; font-size: 12px; color: #333;
}
.mmc-pop-swatch-text.selected { border-color: #1f5fbf; background: #eef3fb; color: #1f5fbf; }

.mmc-pop-add-btn {
    display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 999px;
    padding: 10px 22px; font-size: 13px; font-weight: 700; color: #fff; background: #1f5fbf; cursor: pointer;
}
.mmc-pop-add-btn:hover:not(:disabled) { background: #174690; }
.mmc-pop-add-btn:disabled { background: #ccc; cursor: not-allowed; }

@media (max-width: 640px) {
    .mmc-accesorio-popup-contenido { flex-direction: column; }
    .mmc-accesorio-popup-galeria, .mmc-accesorio-popup-info { flex: 1 1 auto; padding: 20px; }
    .mmc-accesorio-popup-info { padding-top: 0; }
}

.mmc-rx-table { border-collapse: collapse; font-size: 11px; }
.mmc-rx-table th, .mmc-rx-table td { border: 1px solid #e1e5e9; padding: 4px 8px; text-align: center; }
.mmc-rx-table th:first-child, .mmc-rx-table td:first-child { text-align: left; font-weight: 600; white-space: nowrap; }
.mmc-rx-pd { margin: 8px 0 0; font-size: 11px; color: #555; white-space: nowrap; }

.mmc-cart-item-subtotal {
    display: flex; justify-content: space-between; align-items: center; font-size: 13px;
    font-weight: 700; color: #111; margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee;
}
.mmc-cart-item-subtotal del { color: #999; font-weight: 400; margin-right: 6px; }

.mmc-cart-item-actions { margin-top: 10px; }
.mmc-cart-item-actions a.remove,
.mmc-cart-item-editar { font-size: 13px; text-decoration: underline; }
.mmc-cart-item-actions a.remove { color: #b91c1c; }
.mmc-cart-item-actions a.remove:hover { color: #7f1d1d; }
.mmc-cart-item-editar { color: #1f5fbf; }
.mmc-cart-item-editar:hover { color: #174690; }
.mmc-cart-item-actions-sep { color: #ccc; margin: 0 6px; font-size: 13px; }

/* Detalle expandible ("Más detalles", ver .mmc-cart-item-toggle-detalle más arriba) — SOLO mobile
   (la regla que lo oculta por defecto ya está declarada arriba, junto con el resto de los
   elementos exclusivos de mobile). Hijo directo de .mmc-cart-item (PHP lo pone fuera de -info a
   propósito, ver cart-item.php) para que, al expandirse dentro del media query de 950px, ocupe
   TODO el ancho de la fila —incluso el espacio debajo de la imagen— en vez de quedar acotado a la
   columna angosta de la derecha. El padding lateral es para que el contenido no quede pegado al
   borde de la tarjeta. */
.mmc-cart-item-detalle {
    flex: 0 0 100%; width: 100%; margin-top: 4px;
    padding: 14px 16px; background: #fafafa; border: 1px solid #eee; border-radius: 6px; box-sizing: border-box;
}

/* A partir de acá (≤950px) es donde entra la versión MOBILE del producto: nombre y color en líneas
   separadas, precio de la montura reemplazado por "Más detalles", y el detalle colapsable con la
   línea "Marco". En escritorio nada de esto se activa — se queda tal cual estaba. */
@media (max-width: 950px) {
    .mmc-cart-item-header { align-items: flex-start; }
    .mmc-cart-item-title-desktop,
    .mmc-cart-item-price,
    .mmc-cart-item-detalle-desktop { display: none; }

    .mmc-cart-item-title-mobile { display: block; }
    .mmc-cart-item-color { display: block; font-size: 12px; color: #767676; margin-top: 2px; }

    /* Va dentro de .mmc-cart-item-title-wrap, después del color (pedido: nombre, color, "Más
       detalles", en ese orden, antes de la línea de Total parcial) — al ser hijo de un contenedor
       normal (no flex), cae solo en su propia línea debajo del color (que es display:block). Sin
       :hover/:focus visual a propósito (pedido explícito: que no "se marque" nada al click). */
    .mmc-cart-item-toggle-detalle {
        display: flex; align-items: center; border: none; background: none;
        cursor: pointer; font-size: 12px; color: #1f5fbf; padding: 0; margin: 6px 0 0; outline: none;
        -webkit-tap-highlight-color: transparent; white-space: nowrap;
    }
    .mmc-cart-item-toggle-detalle:hover,
    .mmc-cart-item-toggle-detalle:focus,
    .mmc-cart-item-toggle-detalle:active { outline: none; background: none; box-shadow: none; color: #1f5fbf; }

    .mmc-cart-item-detalle.mmc-abierto { display: block; }
}

/* ==========================================================================
   SIDEBAR DE TOTALES
   ========================================================================== */
.mmc-cart-sidebar { background: #fff; border: 1px solid #eee; border-radius: 6px; padding: 20px; }

.mmc-cart-coupon-box .coupon { display: flex; gap: 0; margin-bottom: 16px; }
.mmc-cart-coupon-box .coupon .input-text { flex: 1 1 auto; min-width: 0; border: 1px solid #ddd; border-right: none; border-radius: 4px 0 0 4px; padding: 10px 12px; font-size: 13px; box-sizing: border-box; }
/* flex-shrink:0 + white-space:nowrap: sin esto el botón se apretaba en el espacio angosto del
   sidebar y el texto "Aplicar" terminaba partido letra por letra. */
.mmc-cart-coupon-box .coupon .button { flex: 0 0 auto; white-space: nowrap; border-radius: 0 4px 4px 0; background: #333; color: #fff; border: none; padding: 0 18px; font-weight: 700; cursor: pointer; }
.mmc-cart-coupon-box .coupon .button:hover { background: #111; }

.mmc-cart-totales { border-top: 1px solid #eee; padding-top: 14px; margin-bottom: 14px; }
.mmc-cart-fila { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 14px; }
.mmc-cart-total { font-size: 17px; font-weight: 700; }

.mmc-cart-checkout-btn { margin-bottom: 18px; }
.mmc-cart-checkout-btn .checkout-button {
    display: block; width: 100%; text-align: center; background: #1f5fbf; color: #fff !important;
    padding: 14px; border-radius: 4px; font-weight: 700; text-decoration: none; box-sizing: border-box;
}
.mmc-cart-checkout-btn .checkout-button:hover { background: #174690; }

/* Cupón aplicado (fila entre subtotal y total) */
.mmc-cart-cupon-aplicado { color: #1f8a4c; }
.mmc-cart-cupon-aplicado .woocommerce-remove-coupon {
    color: #b91c1c; text-decoration: none; margin-left: 6px; font-weight: 700; cursor: pointer;
}

/* padding-left/margin-left en 0 con !important: el reset por defecto del navegador para <ul> deja
   un hueco a la izquierda (el espacio reservado para el bullet) aunque list-style sea none — sin
   esto los beneficios no arrancaban a la misma altura que el botón "Finalizar compra". */
.mmc-cart-beneficios { list-style: none; margin: 0 !important; padding: 10px 0 0 !important; border-top: 1px solid #eee; }
.mmc-cart-beneficios li { display: flex; align-items: center; text-align: left; gap: 12px; font-size: 13px; color: #333; margin: 0 !important; padding: 6px 0; padding-left: 0 !important; }
.mmc-cart-beneficios li img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }

.mmc-cart-metodos-pago { border-top: 1px solid #eee; padding: 10px 0; }
.mmc-cart-metodos-titulo { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.mmc-cart-metodos-iconos { display: flex; flex-wrap: wrap; gap: 6px; }
.mmc-cart-metodos-iconos img { height: 22px; width: auto; }
.mmc-cart-texto-seguro { font-size: 11px; color: #999; margin: 8px 0 0; }

.mmc-cart-contacto { border-top: 1px solid #eee; background: #f8f9fa; margin: 14px -20px -20px; padding: 16px 20px; border-radius: 0 0 6px 6px; text-align: center; }
.mmc-cart-contacto p { margin: 0 0 6px; font-size: 13px; }
.mmc-cart-contacto-pregunta { font-weight: 600; margin: 0 0 10px !important; }
.mmc-cart-contacto a { color: #1f5fbf; text-decoration: underline; }
.mmc-cart-chat-link { margin: 0 0 2px !important; }
.mmc-cart-chat-link a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.mmc-cart-chat-link img { width: 18px; height: 18px; object-fit: contain; }
.mmc-cart-chat-texto { color: #666; margin-bottom: 0 !important; }

/* ==========================================================================
   PESTAÑAS DE RECOMENDACIONES (Lentes / subcategorías de Accesorios)
   ========================================================================== */
.mmc-cart-recomendaciones { margin-top: 30px; }
.mmc-cart-reco-titulo { font-size: 18px; font-weight: 700; color: #111; margin: 0 0 16px; }
.mmc-cart-reco-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.mmc-cart-reco-tab {
    background: #fff; border: 1px solid #ccc; border-radius: 999px; padding: 8px 18px;
    font-size: 13px; font-weight: 600; color: #333; cursor: pointer;
}
.mmc-cart-reco-tab.active { background: #eef3fb; border-color: #1f5fbf; color: #1f5fbf; }
.mmc-cart-reco-tab img { width: 18px; height: 18px; object-fit: contain; margin-left: 8px; vertical-align: middle; }
.mmc-cart-reco-panel { display: none; }
.mmc-cart-reco-panel.active { display: block; }

/* ==========================================================================
   TARJETAS DE ACCESORIO (pestañas de Accesorios) — layout horizontal: imagen
   a la izquierda, info (título/precio/colores/agregar) a la derecha. Distinto
   del diseño de "Lentes" que reusa .mmc-custom-product-card (vertical).
   ========================================================================== */
/* .mmc-accesorios-viewport recorta lo que no entra y anima su alto (JS lo ajusta al alto real de
   la página visible en cada momento — sin esto, si la página siguiente tiene menos productos que
   la anterior, igual se ve un cuadro tan alto como la más llena, con un montón de espacio vacío
   debajo). .mmc-accesorios-track es la fila flex que se desliza con transform: translateX (mouse Y
   touch, ver mmcInitAccesoriosSwipe en js/carrito-premium.js) — cada .mmc-accesorios-grid (4
   tarjetas) ocupa el 100% del viewport. align-items:flex-start para que cada página conserve su
   alto natural en vez de estirarse a la altura de la más alta (comportamiento por defecto de flex). */
.mmc-accesorios-viewport { overflow: hidden; transition: height .32s cubic-bezier(.22,.61,.36,1); }
.mmc-accesorios-track {
    display: flex; align-items: flex-start; touch-action: pan-y; cursor: grab;
    /* Transición real del "snap" al soltar — JS la apaga (transition:none) SOLO mientras se
       arrastra, para que siga el dedo/mouse en tiempo real sin retraso, y la restaura (quitando el
       inline override) al soltar, momento en el que esta regla vuelve a aplicar. */
    transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.mmc-accesorios-track.mmc-arrastrando { cursor: grabbing; user-select: none; }
.mmc-accesorios-grid { flex: 0 0 100%; width: 100%; box-sizing: border-box; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-content: start; }
.mmc-accesorio-card {
    position: relative; display: flex; gap: 14px; border: 1px solid #eee; border-radius: 6px;
    padding: 16px; background: #fff;
}
/* El SVG (mismo que .mmc-tooltip-btn del modal de flujo de lentes) ya dibuja su propio círculo —
   sin borde/fondo propios acá para no duplicarlo. */
.mmc-accesorio-info {
    position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; color: #3a4850; cursor: pointer; z-index: 5;
}
.mmc-accesorio-info svg { width: 16px; height: 16px; display: block; }

.mmc-accesorio-img { flex: 0 0 38%; align-self: flex-start; }
.mmc-accesorio-img img { width: 100%; height: auto; object-fit: contain; aspect-ratio: 1/1; }

.mmc-accesorio-info-box { flex: 1; min-width: 0; padding-right: 20px; }
.mmc-accesorio-titulo { display: block; font-size: 13px; color: #333; text-decoration: none; margin-bottom: 4px; line-height: 1.4; }
.mmc-accesorio-precio { display: block; font-size: 13px; font-weight: 700; color: #111; margin-bottom: 8px; }
.mmc-accesorio-precio del { color: #999; font-weight: 400; margin-right: 4px; }
.mmc-accesorio-precio ins { text-decoration: none; }

.mmc-accesorio-colores { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.mmc-accesorio-color-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #dcdcdc; display: inline-block; }
.mmc-accesorio-color-mas {
    width: 18px; height: 18px; border-radius: 50%; border: 1px solid #dcdcdc; display: flex;
    align-items: center; justify-content: center; font-size: 11px; color: #666; background: #f7f8f9;
}

.mmc-accesorio-add a.button, .mmc-accesorio-add button.button {
    display: inline-flex; align-items: center; justify-content: center; border: 1px solid #333;
    border-radius: 999px; padding: 8px 16px; font-size: 12px; font-weight: 700; color: #333 !important;
    background: #fff; text-decoration: none; cursor: pointer;
}
.mmc-accesorio-add a.button:hover, .mmc-accesorio-add button.button:hover { background: #333; color: #fff !important; }
.mmc-accesorio-add a.added::after { content: " ✓"; }

/* Indicador de posición + salto directo a una página — deslizar (swipe/arrastre) es el mecanismo
   principal para pasar de página, ver mmcInitAccesoriosSwipe en js/carrito-premium.js. */
.mmc-accesorios-dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.mmc-accesorios-dot { width: 8px; height: 8px; border-radius: 50%; background: #ddd; border: none; padding: 0; cursor: pointer; }
.mmc-accesorios-dot.active { background: #1f5fbf; }

@media (max-width: 600px) {
    .mmc-accesorios-grid { grid-template-columns: 1fr; gap: 10px; }
    .mmc-accesorio-card { padding: 10px; }
}