/* =========================================================================
   MODERN-UI.CSS  ·  Rediseño visual aislado (no toca PHP ni JavaScript)
   -------------------------------------------------------------------------
   Cárgalo SIEMPRE al final, después de main.css y responsive.css.
   Reutiliza tus clases existentes y tus variables de marca (--main-color*).
   Para cambiar el color de acción (CTA) edita SOLO --mp-cta más abajo.
   ========================================================================= */

/* ---- 1. Tipografía moderna (Poppins / Inter) ------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@500;600;700&display=swap');

:root {
    /* Tokens de diseño ---------------------------------------------------- */
    --mp-font-body:   'Inter', -apple-system, "Segoe UI", Roboto, sans-serif;
    --mp-font-head:   'Poppins', 'Inter', sans-serif;

    /* La marca sigue viniendo de tu base de datos (main_color).
       Damos un fallback elegante por si estuviera vacío.                   */
    --mp-brand:  var(--main-color, #1e293b);   /* azul marino / tu color   */
    --mp-cta:    #f97316;                        /* NARANJA de acción (CTA) */
    --mp-cta-h:  #ea580c;                        /* naranja hover           */

    --mp-ink:    #1f2937;   /* texto principal   */
    --mp-muted:  #6b7280;   /* texto secundario  */
    --mp-line:   #eceff3;   /* bordes suaves     */
    --mp-bg:     #ffffff;   /* fondo tarjetas    */
    --mp-bg-soft:#f7f8fa;   /* fondo secciones   */

    --mp-radius: 16px;
    --mp-shadow:      0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.06);
    --mp-shadow-hover:0 10px 24px rgba(16,24,40,.10), 0 24px 48px rgba(16,24,40,.12);
    --mp-ease: cubic-bezier(.22, .61, .36, 1);
}

body {
    font-family: var(--mp-font-body);
    color: var(--mp-ink);
    background: #ffffff;   /* fondo blanco en todas las páginas */
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .title, .display-4 {
    font-family: var(--mp-font-head);
    letter-spacing: -.01em;
}

/* Título de sección centrado con detalle bajo el texto */
.features_items .title,
.category-tab + * .title,
.features_items > h2.title {
    position: relative;
    font-weight: 700;
    margin: 10px 0 34px;
    color: var(--mp-ink);
}
.features_items .title::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    border-radius: 4px;
    margin: 14px auto 0;
    background: var(--mp-cta);
}

/* ---- 2. Grilla de productos ------------------------------------------ */
/* IMPORTANTE: NO tocamos el display de .tab-pane / .tab-content.
   Bootstrap 3 ya muestra/oculta las pestañas (.tab-content>.active{display:block}).
   Usamos float para la grilla, que convive con el sistema de tabs.        */

/* Clearfix en los contenedores para que envuelvan las tarjetas flotadas   */
.features_items::after,
.tab-content > .tab-pane::after {
    content: "";
    display: table;
    clear: both;
}

/* 3 columnas en escritorio. Anula el float+alto fijo de tus estilos inline */
.card_product {
    float: left !important;
    clear: none;
    height: auto !important;
    width: calc(33.333% - 16px) !important;
    max-width: calc(33.333% - 16px) !important;
    margin: 0 8px 24px !important;
    padding: 0 !important;
    display: block;
}
/* Fila nueva cada 3 tarjetas → filas parejas, sin escalonado de floats */
.card_product:nth-of-type(3n + 1) { clear: left; }

/* ---- 3. Tarjeta de producto (usa tu markup actual sin cambios) -------- */
.card_product .product-image-wrapper {
    width: 100%;
    border: 1px solid var(--mp-line);
    background: var(--mp-bg);
    border-radius: var(--mp-radius);
    overflow: hidden;
    box-shadow: var(--mp-shadow);
    transition: transform .35s var(--mp-ease), box-shadow .35s var(--mp-ease);
    display: flex;
}
.card_product .single-products {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}
.card_product .productinfo {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0 18px 18px;
}

/* Contenedor de imagen con zoom suave al hover */
.card_product .productinfo > a:first-child {
    display: block;
    overflow: hidden;
    border-radius: 12px;
    margin: 14px 0 16px;
    background: var(--mp-bg-soft);
}
.card_product .img-normalizada {
    width: 100% !important;
    height: 230px !important;
    object-fit: contain;
    padding: 10px;
    transition: transform .5s var(--mp-ease);
    mix-blend-mode: multiply; /* integra fondos blancos de fotos */
}

/* Bloque de precio (tu <h2> con código + precio + IVA) */
.card_product .productinfo h2 {
    font-family: var(--mp-font-head);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mp-brand);
    margin: 0 0 6px;
    line-height: 1.15;
}
.card_product .productinfo h2 p { /* "Codigo: XXX" */
    font-family: var(--mp-font-body);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mp-muted);
    margin: 0 0 6px;
}
.card_product .productinfo h2 small { font-size: .6em; font-weight: 500; }

/* Nombre del producto */
.card_product .productinfo > p {
    font-size: .95rem;
    color: var(--mp-ink);
    margin: 0 0 16px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* máx 2 líneas, look prolijo */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Botón "Ver producto": empuja al fondo para alinear todas las cards */
.card_product .productinfo .add-to-cart,
.card_product .productinfo .mp-btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    background: var(--mp-cta);
    color: #fff !important;
    font-family: var(--mp-font-head);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    cursor: pointer;
    transition: background .25s var(--mp-ease), transform .2s var(--mp-ease);
}

/* ---- 4. HOVER: elevación + zoom (la animación que pediste) ------------ */
.card_product .product-image-wrapper:hover {
    transform: translateY(-6px);
    box-shadow: var(--mp-shadow-hover);
    border-color: transparent;
}
.card_product .product-image-wrapper:hover .img-normalizada {
    transform: scale(1.06);
}
.card_product .productinfo .add-to-cart:hover,
.card_product .productinfo .mp-btn:hover {
    background: var(--mp-cta-h);
    transform: translateY(-2px);
}

/* ---- 5. Cabecera / jumbotron del catálogo ---------------------------- */
.jumbotron.jumbotron-fluid {
    border-radius: var(--mp-radius);
    padding: 42px 32px;
    margin: 18px 0 8px;
    box-shadow: var(--mp-shadow);
}
.jumbotron .display-4 { font-weight: 700; }

/* ---- 6. Pestañas del inicio (Destacados / Más vendidos / ...) --------- */
.category-tab .nav-tabs {
    border-bottom: 1px solid var(--mp-line);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 26px;
}
.category-tab .nav-tabs > li > a {
    border: none !important;
    border-radius: 999px;
    padding: 9px 18px;
    font-family: var(--mp-font-head);
    font-weight: 600;
    font-size: .9rem;
    color: var(--mp-muted);
    background: transparent;
    transition: all .25s var(--mp-ease);
}
.category-tab .nav-tabs > li > a:hover {
    background: var(--mp-bg-soft);
    color: var(--mp-brand);
}
.category-tab .nav-tabs > li.active > a,
.category-tab .nav-tabs > li.active > a:focus,
.category-tab .nav-tabs > li.active > a:hover {
    background: var(--mp-brand);
    color: #fff !important;
}

/* ---- 7. HOME · grilla de categorías destacadas ----------------------- */
.contenedor-categorias { gap: 22px !important; }
.categoria {
    border-radius: var(--mp-radius) !important;
    box-shadow: var(--mp-shadow) !important;
    transition: transform .35s var(--mp-ease), box-shadow .35s var(--mp-ease);
}
.categoria .imagen-categoria { transition: transform .6s var(--mp-ease); }
.categoria:hover {
    transform: translateY(-4px);
    box-shadow: var(--mp-shadow-hover) !important;
}
.categoria:hover .imagen-categoria { transform: scale(1.08); }
.nombre-categoria {
    font-family: var(--mp-font-head);
    background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 60%, rgba(0,0,0,0) 100%) !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 18px !important;
    font-size: 1.15rem !important;
}

/* ======================================================================
   8. CARRITO  (cart.php)  ·  tabla moderna + tarjetas apiladas en móvil
   ====================================================================== */
#cart_items { padding: 10px 0 40px; }

#cart_items .breadcrumb {
    background: transparent;
    padding: 12px 0;
    font-size: .9rem;
}

.cart_info {
    background: var(--mp-bg);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow);
    overflow: hidden;
}
.cart_info table.table { margin: 0; }

.cart_info .cart_menu td,
.cart_info thead td {
    background: var(--mp-bg-soft);
    border: none !important;
    font-family: var(--mp-font-head);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mp-muted);
    padding: 16px 18px !important;
}

.cart_info tbody tr {
    transition: background .2s var(--mp-ease);
    border-bottom: 1px solid var(--mp-line);
}
.cart_info tbody tr:last-child { border-bottom: none; }
.cart_info tbody tr:hover { background: var(--mp-bg-soft); }

.cart_info tbody td {
    vertical-align: middle !important;
    border-top: none !important;
    padding: 18px !important;
}
/* Anula los márgenes negativos del tema que descolocan imagen y botón */
.cart_info .cart_product {
    display: block;
    margin: 0 !important;
    text-align: center;
}
.cart_info .cart_product a { display: inline-block; }
.cart_info .cart_product img {
    display: inline-block !important;
    width: 72px !important;
    height: 72px;
    object-fit: contain;
    border-radius: 12px;
    background: var(--mp-bg-soft);
    padding: 6px;
    border: 1px solid var(--mp-line);
}
.cart_info .cart_description h4 {
    font-family: var(--mp-font-head);
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 4px;
}
.cart_info .cart_description p { color: var(--mp-muted); font-size: .82rem; margin: 0; }
.cart_info .cart_price p { font-weight: 600; }
.cart_info .cart_total_price { color: var(--mp-brand); font-weight: 700; }

/* Botón eliminar: centrado en su celda y sin márgenes negativos del tema */
.cart_info .cart_delete {
    display: block;
    margin: 0 !important;
    overflow: visible;
    text-align: center;
}
.cart_info .cart_delete form { margin: 0; }
.cart_info .cart_delete .btn-danger {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: #fef2f2;
    color: #ef4444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .25s var(--mp-ease);
}
.cart_info .cart_delete .btn-danger:hover {
    background: #ef4444;
    color: #fff;
    transform: scale(1.08);
}

/* ---- 9. Bloque de totales / acciones (#do_action) -------------------- */
#do_action .heading h3 {
    font-family: var(--mp-font-head);
    font-weight: 700;
    margin-bottom: 8px;
}
#do_action .heading p { color: var(--mp-muted); }

/* #do_action para ganarle al tema, que fija padding-left:0 y recorta el contenido */
#do_action .total_area,
.total_area {
    background: var(--mp-bg);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow);
    padding: 26px !important;   /* encaja bien todos los elementos */
    margin-bottom: 30px;
}
.total_area ul { list-style: none; padding: 0; margin: 0 0 20px; }
.total_area ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: transparent !important;   /* anula el gris #E6E4DF del tema */
    margin: 0 !important;
    padding: 12px 0 !important;
    border-bottom: 1px dashed var(--mp-line);
    color: var(--mp-muted);
    font-size: .95rem;
}
.total_area ul li:last-child { border-bottom: none; }
/* El tema hace float:right en el span; en flex no hace falta */
.total_area ul li span {
    float: none !important;
    color: var(--mp-ink);
    font-weight: 700;
    text-align: right;
}

/* Botones del carrito (Actualizar / Continuar) */
.total_area .btn.update,
.total_area .btn.check_out {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 13px 22px;
    font-family: var(--mp-font-head);
    font-weight: 600;
    border: none;
    transition: all .25s var(--mp-ease);
    margin: 6px 6px 0 0;
}
.total_area .btn.update {
    background: var(--mp-bg-soft);
    color: var(--mp-ink) !important;
    border: 1px solid var(--mp-line);
}
.total_area .btn.update:hover { background: #eef0f3; }
.total_area .btn.check_out {
    background: var(--mp-cta);
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(249,115,22,.28);
}
.total_area .btn.check_out:hover {
    background: var(--mp-cta-h);
    transform: translateY(-2px);
}

/* ======================================================================
   9.5 · PÁGINA DE DETALLE DE PRODUCTO  (product-details.php)
   No cambia el formulario (id/nombre/costo/precio/imagen/cantidad/cart_action);
   solo su apariencia.
   ====================================================================== */
.product-details {
    background: var(--mp-bg);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow);
    padding: 26px;
    margin: 12px 0 30px;
}
.product-details::after { content: ""; display: table; clear: both; }

/* --- Imagen / carrusel del producto --- */
.product-details .view-product .img-carousel {
    width: 100%;
    height: 380px;
    object-fit: contain;
    background: var(--mp-bg-soft);
    border-radius: 14px;
    padding: 18px;
    mix-blend-mode: multiply;
}
.product-details .carousel-indicators li {
    background: rgba(0,0,0,.18);
    border: none;
    width: 9px; height: 9px;
}
.product-details .carousel-indicators li.active {
    background: var(--mp-cta);
    width: 24px; border-radius: 5px;
}
/* Flechas del carrusel como botones redondos */
.product-details .control-carousel {
    width: 42px; height: 42px;
    background: #fff;
    border: 1px solid var(--mp-line);
    border-radius: 50%;
    box-shadow: var(--mp-shadow);
    display: flex; align-items: center; justify-content: center;
    top: 50%; transform: translateY(-50%);
    color: var(--mp-ink);
    transition: all .25s var(--mp-ease);
}
.product-details .control-carousel:hover { background: var(--mp-cta); color: #fff; }

/* --- Panel de información --- */
.product-information > p:first-of-type {   /* "Codigo: XXX" */
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .75rem;
    font-weight: 500;
    color: var(--mp-muted);
    margin: 0 0 6px;
}
.product-information h2 {
    font-family: var(--mp-font-head);
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1.2;
    color: var(--mp-ink);
    margin: 0 0 16px;
}
/* Precio (primer <span> dentro del <span> contenedor) */
.product-information > span { display: block; }
.product-information > span > span:first-child {
    display: block;
    font-family: var(--mp-font-head);
    font-weight: 700;
    font-size: 2rem;
    color: var(--mp-brand);
    margin-bottom: 16px;
}
.product-information > span > span:first-child small { font-size: .5em; font-weight: 500; }

/* Caja de compra (formulario Agregar) */
.product-information form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--mp-bg-soft);
    border: 1px solid var(--mp-line);
    border-radius: 14px;
    padding: 16px;
    margin: 4px 0 8px;
}
.product-information form label { margin: 0; font-weight: 600; color: var(--mp-ink); }
.product-information form input[type="number"] {
    width: 84px;
    padding: 11px 12px;
    border: 1px solid var(--mp-line);
    border-radius: 10px;
    font-size: 1rem;
    text-align: center;
    background: #fff;
    transition: border-color .2s var(--mp-ease), box-shadow .2s var(--mp-ease);
}
.product-information form input[type="number"]:focus {
    outline: none;
    border-color: var(--mp-cta);
    box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}
/* Botón Agregar al carrito (mantiene .btn-success, solo cambia el look) */
.product-information .btn-success {
    flex: 1 1 auto;
    min-width: 170px;
    background: var(--mp-cta) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 12px;
    padding: 13px 22px;
    font-family: var(--mp-font-head);
    font-weight: 600;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 8px 18px rgba(249,115,22,.28);
    transition: all .25s var(--mp-ease);
}
.product-information .btn-success:hover {
    background: var(--mp-cta-h) !important;
    transform: translateY(-2px);
}

/* Disponibilidad / compra mínima / leyenda */
.product-information > p {
    color: var(--mp-muted);
    font-size: .95rem;
    margin: 6px 0;
}
.product-information > p b { color: var(--mp-ink); }

/* --- Pestañas Detalles / Productos similares --- */
.shop-details-tab .tab-content { padding-top: 10px; }
.shop-details-tab #details p {
    color: var(--mp-ink);
    line-height: 1.75;
    font-size: 1rem;
}

/* --- Modal de imagen ampliada --- */
.modal-content {
    border: none;
    border-radius: var(--mp-radius);
    overflow: hidden;
    box-shadow: var(--mp-shadow-hover);
}
.modal-header, .modal-footer { border-color: var(--mp-line); }
.modal-header .modal-title { font-family: var(--mp-font-head); font-weight: 700; }
.modal .img-carousel { width: 100%; object-fit: contain; max-height: 60vh; }
.modal-footer .btn {
    border-radius: 10px;
    padding: 10px 20px;
    color: #fff !important;
    font-family: var(--mp-font-head);
    font-weight: 600;
    border: none;
}

/* ======================================================================
   9.7 · CATEGORÍAS · sidebar/acordeón  (treecat.php + left-sidebar.php)
   Aplica a escritorio (#accordian) y móvil (#accordian-mobile).
   ====================================================================== */

/* Título "Categorias" / "Marcas": limpio con barrita de acento */
.left-sidebar > h2,
.brands_products h2 {
    font-family: var(--mp-font-head);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--mp-ink);
    text-align: left;
    margin: 6px 0 16px;
    padding: 0 0 12px;
    border: none;
}
.left-sidebar > h2::before { display: none !important; }
.left-sidebar > h2::after,
.brands_products h2::after {
    content: "" !important;
    display: block !important;
    position: static !important;
    width: 44px; height: 3px;
    border: none !important;
    background: var(--mp-cta) !important;
    border-radius: 3px;
    margin-top: 10px;
}

/* Contenedor del acordeón como tarjeta */
.category-products {
    border: 1px solid var(--mp-line) !important;
    border-radius: var(--mp-radius);
    background: var(--mp-bg);
    box-shadow: var(--mp-shadow);
    padding: 8px !important;
    overflow: hidden;
}

/* Cada panel de categoría */
.category-products .panel {
    border: none !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-bottom: 2px !important;
    overflow: hidden;
    transition: background .2s var(--mp-ease);
}
.category-products .panel-default .panel-heading,
.category-products .panel-heading {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 12px;
    transition: background .2s var(--mp-ease);
}
.category-products .panel-heading:hover { background: var(--mp-bg-soft) !important; }

/* Cabecera: ícono + nombre + chevron */
.category-products .panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}
.category-products .panel-title img {
    width: 32px !important;
    height: 32px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--mp-bg-soft);
    padding: 3px;
    flex: 0 0 auto;
}
.category-products .panel-default .panel-heading .panel-title a,
.category-products .panel-title a {
    flex: 1 1 auto;
    /* display: flex !important; */
    align-items: center;
    padding: 12px 12px 12px 0 !important;
    font-family: var(--mp-font-head);
    /* font-size: .82rem !important; */
    font-size: 1rem !important; 
    font-weight: 600 !important;
    letter-spacing: .01em;
    text-transform: none !important;
    color: var(--mp-ink) !important;
    text-decoration: none !important;
}

/* Chevron (reemplaza el ícono fa-sort por uno que rota al abrir) */
.category-products .panel-title a .badge {
    margin-left: auto;
    float: none !important;
    background: transparent !important;
    padding: 0 0 0 8px !important;
    line-height: 1;
}
.category-products .panel-title a .badge .fa { display: none; }   /* ocultamos fa-sort */
.category-products .panel-title a .badge::after {
    font-family: "FontAwesome";
    content: "\f078";                    /* chevron-down */
    display: inline-block;
    color: var(--mp-cta);
    transform: rotate(180deg);           /* estado abierto (sin .collapsed) */
    transition: transform .3s var(--mp-ease);
    margin: 3px;
}
.category-products .panel-title a.collapsed .badge::after {
    transform: rotate(0);                /* estado cerrado */
    color: var(--mp-muted);
}

/* Resaltado de la categoría abierta actual */
.category-products .panel-open > .panel-heading { background: var(--mp-bg-soft) !important; }
.category-products .panel-open .panel-title a { color: var(--mp-brand) !important; }

/* Cuerpo con subcategorías */
.category-products .panel-body {
    padding: 2px 6px 8px !important;
    border-top: none !important;
}
.category-products .panel-body ul {
    padding-left: 0 !important;
    margin: 0;
    list-style: none;
}
.category-products .panel-body ul li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 1px 0;
    background: transparent !important;
}
.category-products .panel-body ul li img {
    width: 24px !important;
    height: 24px;
    object-fit: contain;
    border-radius: 6px;
    flex: 0 0 auto;
}
.category-products .panel-body ul li a {
    flex: 1 1 auto;
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    font-family: var(--mp-font-body);
    font-size: .9rem !important;
    color: var(--mp-muted) !important;
    text-decoration: none !important;
    transition: background .2s var(--mp-ease), color .2s var(--mp-ease), transform .2s var(--mp-ease);
}
.category-products .panel-body ul li a:hover {
    background: var(--mp-bg-soft);
    color: var(--mp-brand) !important;
    transform: translateX(3px);
}
/* Subcategoría que se está viendo */
.category-products .panel-body ul li.active-subcat a {
    background: rgba(249, 115, 22, .12);
    color: var(--mp-cta) !important;
    font-weight: 600;
}

/* ======================================================================
   10. RESPONSIVE
   ====================================================================== */
/* Tablet: 2 columnas */
@media (max-width: 991px) {
    .card_product {
        width: calc(50% - 16px) !important;
        max-width: calc(50% - 16px) !important;
    }
    .card_product:nth-of-type(3n + 1) { clear: none; }   /* anula regla de 3 */
    .card_product:nth-of-type(2n + 1) { clear: left; }   /* fila nueva cada 2 */
}

/* Móvil: 2 columnas más ajustadas */
@media (max-width: 600px) {
    .card_product {
        width: calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
        margin: 0 6px 16px !important;
        height: auto !important;
    }
    .card_product .img-normalizada { height: 150px !important; }
    .card_product .productinfo { padding: 0 12px 12px; }
    .card_product .productinfo h2 { font-size: 1.15rem; }

    /* --- Detalle de producto en móvil --- */
    .product-details { padding: 16px; }
    .product-details .view-product .img-carousel { height: 260px; padding: 10px; }
    .product-information h2 { font-size: 1.35rem; }
    .product-information > span > span:first-child { font-size: 1.6rem; }
    .product-information .btn-success { width: 100%; flex: 1 1 100%; }

    /* --- Carrito: la tabla se convierte en tarjetas apiladas --------- */
    .cart_info table,
    .cart_info thead,
    .cart_info tbody,
    .cart_info tr,
    .cart_info td { display: block; width: 100%; }

    .cart_info thead { display: none; }               /* ocultamos cabecera */
    .cart_info .container_tabla img { display: block !important; }

    .cart_info tbody tr {
        position: relative;
        padding: 18px 16px 18px 104px;                /* espacio p/ la foto (izq) */
        min-height: 108px;
    }
    .cart_info tbody td { padding: 3px 0 !important; border: none !important; }

    .cart_info .cart_product {
        position: absolute;
        left: 16px; top: 18px;
        width: 72px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .cart_info .cart_product img { width: 72px !important; height: 72px; }

    /* Botón eliminar: abajo a la derecha, prolijo y sin encimarse */
    .cart_info .cart_delete {
        position: absolute;
        right: 14px; bottom: 16px;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Etiquetas antes de cada dato en móvil */
    .cart_info .cart_price::before   { content: "Precio: ";  color: var(--mp-muted); font-size: .8rem; }
    .cart_info .cart_quantity::before{ content: "Cantidad: ";color: var(--mp-muted); font-size: .8rem; }
    .cart_info .cart_quantity p { display: inline; }

    .total_area .btn.update,
    .total_area .btn.check_out { width: 100%; margin: 8px 0 0; }
}