/**
 * Rediseño visual de la tarjeta de producto (grilla de catálogo) y de su versión grande en la
 * ficha del producto. Se agrega como hoja aparte, cargada DESPUÉS de productos.css/products.css
 * en cada página (ver app/views/layout/ver.php para el cache-busting), así gana la cascada sin
 * tener que reescribir esas dos hojas viejas. No cambia HTML ni los data-attributes que usa
 * js/shop-ui.js para el carrito: solo apariencia.
 */

:root {
    --mf-orange: #FF5D01;
    --mf-orange-dark: #E65100;
    --mf-ink: #22262B;
    --mf-muted: #7A828C;
    --mf-line: #ECEDEF;
}

/* ───────────────── Tarjeta ───────────────── */
.product-item {
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--mf-line);
    box-shadow: 0 2px 10px rgba(20, 20, 30, 0.05);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.product-item:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 16px 30px rgba(20, 20, 30, 0.12) !important; /* pisa el box-shadow viejo de style.css */
}

/* ───────────────── Imagen ───────────────── */
.product-img {
    /* style.css trae un "height: 245px" viejo (fijo, no responsive). Combinado con el
       aspect-ratio de acá, el ancho se calculaba A PARTIR de esos 245px fijos en vez de llenar
       la tarjeta -- en la grilla de 6 columnas (~992-1700px) la tarjeta mide menos de 245px y la
       imagen se desbordaba por la derecha, cortada por el overflow:hidden de la tarjeta (junto
       con la etiqueta y los botones de lupa/ver más que van encima). width/height explícitos acá
       anulan ese 245px fijo y dejan que la imagen ocupe siempre el 100% de la tarjeta. */
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    background: #F7F8F9;
}

.product-img img.img-fluid {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

/* ───────────────── Etiquetas (DISPONIBLE / OFERTA / RESERVADO / etc.) ───────────────── */
.product-img .prodDisp,
.product-img .prodNoDisp,
.product-img .prodNovedad,
.product-img .prodOferta,
.product-img .prodUsado,
.product-img .prodReservado {
    border-radius: 999px !important;
    padding: 4px 11px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    /* En tarjetas angostas (grilla de 6 columnas en resoluciones de notebook) el texto de la
       etiqueta no entraba y el "overflow:hidden" de .product-img la recortaba a la mitad. Con
       max-width + white-space:normal, si no entra en una línea pasa a la segunda en vez de cortarse. */
    max-width: calc(100% - 20px);
    box-sizing: border-box;
}

.product-img .prodDisp p,
.product-img .prodNoDisp p,
.product-img .prodNovedad p,
.product-img .prodOferta p,
.product-img .prodUsado p,
.product-img .prodReservado p {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: normal;
    word-break: break-word;
}

/* Apilar las etiquetas en columna si hay más de una, en vez de superponerse */
.product-img .prodNovedad,
.product-img .prodNoDisp,
.product-img .prodDisp {
    top: 10px !important;
}

.product-img .prodOferta,
.product-img .prodUsado,
.product-img .prodReservado {
    top: 40px !important;
}

.product-img .prodUsado {
    top: 70px !important;
}

/* ───────────────── Acciones sobre la imagen (ZOOM / VER MÁS) ───────────────── */
/* Modernizadas: ahora son dos botones redondeados chicos, abajo a la derecha, siempre visibles
   en pantallas táctiles (donde ":hover" no existe o queda "pegado") y por hover en escritorio. */
.product-action {
    align-items: flex-end;
    justify-content: flex-end;
    padding: 10px;
    background: transparent !important;
}

.product-action .btn {
    border-radius: 999px;
    border: none !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--mf-ink) !important;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.product-action .btn:hover {
    background: var(--mf-orange) !important;
    color: #fff !important;
}

/* El texto del botón queda oculto: solo un ícono (lupa / ojo), más compacto y moderno */
.product-action .btn {
    font-size: 0 !important;
}

.product-action .btn::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 15px;
}

.product-action .btn:first-child::before {
    content: "\f00e"; /* lupa */
}

.product-action .btn:nth-child(2)::before {
    content: "\f06e"; /* ojo (ver más) */
}

/* En ese mismo rango de notebook (992-1700px aprox, grilla a 6 columnas) la tarjeta queda
   angosta y los dos botones (lupa / ojo) de 38px con su padding no entraban del todo: se
   achican un poco solo en ese rango, no afecta celular (menos columnas) ni pantallas grandes. */
@media (min-width: 992px) and (max-width: 1700px) {
    .product-action {
        padding: 6px;
    }

    .product-action .btn {
        width: 30px;
        height: 30px;
    }

    .product-action .btn::before {
        font-size: 12px;
    }
}

@media (hover: none) {
    .product-action {
        opacity: 1 !important;
        background: transparent !important;
    }

    .product-action .btn {
        opacity: 1 !important;
        margin-top: 0 !important;
    }
}

/* ───────────────── Título y categoría ───────────────── */
.lineHeightTitle {
    padding: 14px 12px 4px;
}

.titleProducts {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal !important;
    min-height: 3.9em;
    font-size: 13px;
    font-weight: 400;
    color: var(--mf-ink);
    line-height: 1.3;
}

.infoProducts {
    font-size: 12px;
    color: var(--mf-muted);
    line-height: 1.35;
    /* El precio (h5, margin 2px) y esta línea de categorías/código quedaban casi pegados --
       separación propia en vez de depender del margen chico del h5. */
    margin-top: 8px;
}

/* ───────────────── Precio ───────────────── */
.lineHeightTitle h5 {
    font-size: 20px;
    font-weight: 800;
    color: var(--mf-ink);
    margin: 2px 0;
}

.txtConsultProd {
    background: #F1F2F4 !important;
    color: var(--mf-ink) !important;
    border-radius: 999px;
    padding: 4px 12px !important;
    font-size: 12px !important;
    font-weight: 700;
    display: inline-block;
}

/* ───────────────── Cantidad + Agregar al carrito ───────────────── */
.product-item form {
    padding: 10px 12px 14px;
    gap: 8px;
    flex-wrap: nowrap !important;
}

/* La ficha del producto usa el mismo formulario (cantidad + agregar / editar-eliminar) pero
   fuera de una .product-item: mismo ajuste de fila, sin el padding (ya lo da .mf-detail-panel). */
.mf-detail-panel form {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
    max-width: 360px;
}

.precioProducto,
.stockProducto {
    float: none !important;
}

.precioProducto {
    flex: 0 0 64px;
}

.stockProducto {
    flex: 1 1 auto;
}

.inputCant {
    width: 100% !important;
    height: 42px !important;
    border: 1px solid var(--mf-line) !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700;
    color: var(--mf-ink);
}

.inputCant:focus {
    outline: none;
    border-color: var(--mf-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 93, 1, 0.14);
}

.btnProducto {
    border-radius: 10px;
    height: 42px;
    background: var(--mf-orange);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    box-shadow: 0 3px 10px rgba(255, 93, 1, 0.28);
}

.btnProducto:hover {
    background: var(--mf-orange-dark);
}

.contentInputCant {
    gap: 8px;
}

.contentInputCant .btnUpdateStock,
.contentInputCant .btnDelStock {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: 0 2px 8px rgba(20, 20, 30, 0.12);
    transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease;
}

.contentInputCant .btnUpdateStock {
    background: #4F7DF3 !important;
}

.contentInputCant .btnUpdateStock:hover {
    background: #3E66D6 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(79, 125, 243, 0.35);
}

.contentInputCant .btnDelStock {
    background: #E5484D !important;
}

.contentInputCant .btnDelStock:hover {
    background: #C9353A !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(229, 72, 77, 0.35);
}

.contentInputCant .btnUpdateStock i,
.contentInputCant .btnDelStock i {
    font-size: 19px !important;
    background: transparent !important;
}

/* ───────────────── Sin stock ───────────────── */
.stateAgotado {
    background: var(--mf-ink) !important;
    border-radius: 10px;
    margin: 0 12px 14px;
    width: auto;
}

.stateAgotado p {
    font-size: 12px;
    letter-spacing: .03em;
}

/* ───────────────── Breadcrumb y barra de filtros (listados por rubro) ───────────────── */
.breadcrumb {
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(20, 20, 30, 0.05);
    padding: 12px 16px;
}

.breadcrumb-item a,
.breadcrumb-item.text-dark {
    color: var(--mf-ink) !important;
    font-weight: 600;
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--mf-orange) !important;
}

.breadcrumb-item.active {
    color: var(--mf-muted) !important;
}

.mf-filterbar {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(20, 20, 30, 0.05);
    padding: 14px 16px !important;
    gap: 12px;
}

.mf-cat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-right: 10px !important;
}

.mf-cat-pills .btn-group {
    margin: 0 !important;
}

.mf-cat-pill {
    border: 1px solid var(--mf-line) !important;
    background: #fff !important;
    color: var(--mf-ink) !important;
    border-radius: 999px !important;
    padding: 7px 15px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.mf-cat-pill:hover {
    border-color: var(--mf-orange) !important;
    color: var(--mf-orange) !important;
}

.mf-cat-pill.is-active {
    background: var(--mf-orange) !important;
    border-color: var(--mf-orange) !important;
    color: #fff !important;
}

.mf-cat-dropdown {
    border-radius: 12px;
    border: 1px solid var(--mf-line);
    box-shadow: 0 10px 24px rgba(20, 20, 30, 0.12);
    padding: 6px;
}

.mf-cat-dropdown .dropdown-item {
    border-radius: 8px;
    font-size: 13px;
    padding: 7px 12px;
}

.mf-cat-dropdown .dropdown-item:hover {
    background: #FFF3EA;
    color: var(--mf-orange);
}

.mf-search-pill {
    border: 1px solid var(--mf-line);
    border-radius: 999px !important;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mf-search-pill:focus-within {
    border-color: var(--mf-orange);
    box-shadow: 0 0 0 3px rgba(255, 93, 1, 0.14);
}

.mf-search-pill .form-control {
    border: none !important;
    box-shadow: none !important;
    padding-left: 18px !important;
    font-size: 13.5px;
}

.mf-search-pill .input-group-text {
    background: transparent !important;
    border: none !important;
    color: var(--mf-muted) !important;
    padding-right: 16px !important;
    cursor: pointer;
}

.mf-search-pill .input-group-text:hover {
    color: var(--mf-orange) !important;
}

.mf-status-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.mf-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--mf-line);
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 12px;
    font-weight: 700;
    color: var(--mf-ink);
    background: #fff;
    text-decoration: none !important;
    transition: all .15s ease;
}

.mf-status-chip i { font-size: 12px; }

.mf-status-chip--disp i { color: #4CAF50; }
.mf-status-chip--nodisp i { color: #C62828; }
.mf-status-chip--new i { color: #2196F3; }

.mf-status-chip:hover {
    border-color: currentColor;
}

.mf-status-chip--disp.is-active { background: #4CAF50; border-color: #4CAF50; color: #fff; }
.mf-status-chip--nodisp.is-active { background: #C62828; border-color: #C62828; color: #fff; }
.mf-status-chip--new.is-active { background: #2196F3; border-color: #2196F3; color: #fff; }
.mf-status-chip.is-active i { color: #fff; }

.mf-status-chip-clear {
    font-size: 12px;
    color: var(--mf-muted);
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mf-status-chip-clear:hover {
    color: var(--mf-orange);
}

@media (max-width: 767.98px) {
    .mf-filterbar {
        flex-wrap: wrap;
    }

    .mf-cat-pills,
    .contentFilterSearch {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .contentFilterSearch {
        margin-top: 10px;
    }
}

/* El grupo "editar / eliminar" (grilla Y ficha) tenía width:100% heredado de .contentInputCant
   (css/products.css) y quedaba en su propia línea en vez de al lado del campo de cantidad. */
.precioProducto,
.stockProducto,
.contentInputCant {
    float: none !important;
}

.contentInputCant {
    width: auto !important;
    flex: 1 1 auto;
    justify-content: flex-end !important;
}

/* ───────────────── Barra de mensajes (cinta que se desplaza, arriba de todo) ─────────────────
   Contenido y colores vienen de Identidad de marca → "Barra de mensajes" (mismo panel que usan
   los demás tenants); ver app/views/layout/announce-bar.php. */
.mf-ticker {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.mf-ticker-track {
    display: inline-block;
    padding-left: 100%;
    animation-name: mf-ticker-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.mf-ticker:hover .mf-ticker-track {
    animation-play-state: paused;
}

.mf-ticker-item {
    display: inline-block;
    padding: 9px 30px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
}

.mf-ticker-item i {
    margin-right: 6px;
    opacity: .85;
}

@keyframes mf-ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .mf-ticker-track { animation: none; padding-left: 0; }
}

/* ───────────────── Accesos directos del home (al lado del slider) ─────────────────
   En celular el texto quedaba centrado (una regla de css/style.css para pantallas chicas le
   pisa la alineación); se fuerza a la izquierda en todos los tamaños. */
.product-offer .offer-text {
    align-items: flex-start !important;
    text-align: left !important;
    padding: 20px 24px;
}

/* ───────────────── Descargas ───────────────── */
.mf-dl-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 18px;
}

.mf-dl-card {
    width: 190px !important;
    height: auto !important;
    min-height: 220px;
    margin: 0 !important;
    background: #fff;
    border: 1px solid var(--mf-line);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(20, 20, 30, 0.05);
    padding: 20px 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease;
}

.mf-dl-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(20, 20, 30, 0.12);
}

.mf-dl-icon {
    width: auto;
    height: auto;
    font-size: 46px;
    color: #9AA4B2;
    margin-bottom: 10px;
}

.mf-dl-icon--pdf { color: #E5484D; }
.mf-dl-icon--doc, .mf-dl-icon--docx { color: #4F7DF3; }
.mf-dl-icon--xls, .mf-dl-icon--xlsx { color: #2E9E5B; }
.mf-dl-icon--ppt, .mf-dl-icon--pptx { color: #E0812F; }
.mf-dl-icon--zip, .mf-dl-icon--rar { color: #9B59B6; }
.mf-dl-icon--jpg, .mf-dl-icon--jpeg, .mf-dl-icon--png, .mf-dl-icon--gif { color: #16A0C4; }

.mf-dl-title {
    width: 100%;
    min-height: 0;
    float: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--mf-ink);
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.floatDescargas {
    width: 100%;
}

.mf-dl-btn {
    width: 100%;
    border: none;
    border-radius: 999px;
    background: var(--mf-orange) !important;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: 9px 10px;
    box-shadow: 0 3px 10px rgba(255, 93, 1, 0.28);
    transition: background-color .15s ease;
}

.mf-dl-btn:hover {
    background: var(--mf-orange-dark) !important;
    color: #fff !important;
}

@media (max-width: 575.98px) {
    .mf-dl-card {
        width: calc(50% - 9px) !important;
    }
}

/* ───────────────── Notas / Noticias (listado tipo blog) ─────────────────
   #tiles (notas, grilla tipo mosaico) y #tilesBlog (noticias, lista apilada) usan
   jquery.wookmark para el acomodo (mide el ancho real de cada <li> en JS) -- por eso NO se toca
   el ancho/margen de los <li>, solo color, borde, sombra, tipografía y hover (no afecta esa medición). */
#tiles li,
#tilesBlog li {
    background: #fff !important;
    border: 1px solid var(--mf-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(20, 20, 30, 0.06) !important;
    padding: 16px !important;
    box-sizing: border-box;
}

#tiles li:hover,
#tilesBlog li:hover {
    box-shadow: 0 14px 28px rgba(20, 20, 30, 0.14) !important;
    background: #fff !important;
}

.titleInfoBlog {
    text-align: left;
}

.titleInfoBlog .fecha {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F1F2F4;
    color: var(--mf-muted);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 11px !important;
    font-weight: 700;
    margin-bottom: 8px;
}

.titleInfoBlog .fecha i {
    color: var(--mf-orange);
}

.titleInfoBlog p:not(.fecha) {
    color: var(--mf-ink) !important;
    font-size: 15px !important;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 8px;
}

.titleInfoBlog p:not(.fecha) i {
    color: var(--mf-orange);
    font-size: 13px;
}

.imgInfoBlog img {
    border-radius: 10px !important;
    border: 1px solid var(--mf-line);
}

.descResp {
    color: var(--mf-muted) !important;
    font-size: 13px !important;
    line-height: 1.45;
}

.ContentbtnDetalle {
    margin-top: 10px;
}

.btnDetalleBlog {
    background: var(--mf-orange) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-size: 11.5px !important;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    height: auto !important;
}

.btnDetalleBlog:hover {
    background: var(--mf-orange-dark) !important;
}

/* Barra lateral "Todas las notas / noticias" */
.mf-blog-filters-card {
    background: #fff;
    border: 1px solid var(--mf-line);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(20, 20, 30, 0.05);
    padding: 6px;
    overflow: hidden;
}

.mf-blog-filters-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 800;
    color: var(--mf-ink);
    border-bottom: 1px solid var(--mf-line);
}

.mf-blog-filters-head i {
    color: var(--mf-orange);
}

#filters {
    list-style: none !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 6px !important;
    max-height: 560px;
    overflow-y: auto;
}

#filters li {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    background: #fff !important;
    color: var(--mf-ink) !important;
    border-radius: 8px !important;
    padding: 9px 10px !important;
    margin: 2px 0 !important;
    font-size: 12.5px !important;
    font-weight: 600;
    white-space: normal;
    display: flex;
    align-items: center;
    gap: 6px;
}

#filters li i {
    color: var(--mf-muted);
    font-size: 10px;
}

#filters li:hover {
    background: #F7F8F9 !important;
    color: var(--mf-ink) !important;
}

#filters li.active {
    background: var(--mf-orange) !important;
    color: #fff !important;
}

#filters li.active i {
    color: #fff !important;
}

/* ───────────────── Ficha de producto (versión grande) ───────────────── */
.precioProductoDetail .btnProductoDetail,
.btnProductoDetail {
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(255, 93, 1, 0.28);
}

.mf-detail-crumb {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mf-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #F1F2F4;
    color: var(--mf-ink);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.mf-detail-back:hover {
    background: var(--mf-orange);
    color: #fff;
}

.mf-detail-crumb-title {
    color: var(--mf-muted);
    font-size: 13.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mf-detail-gallery {
    background: #fff;
    border: 1px solid var(--mf-line);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(20, 20, 30, 0.05);
    overflow: hidden;
}

.mf-detail-gallery .carousel-inner {
    aspect-ratio: 1 / 1;
    background: #F7F8F9 !important;
}

.mf-detail-gallery .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 24px;
}

.mf-detail-gallery .carousel-control-prev,
.mf-detail-gallery .carousel-control-next {
    width: 42px;
    height: 42px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    opacity: 1;
}

.mf-detail-gallery .carousel-control-prev { left: 14px; }
.mf-detail-gallery .carousel-control-next { right: 14px; }

.mf-detail-gallery .carousel-control-prev:hover,
.mf-detail-gallery .carousel-control-next:hover {
    background: var(--mf-orange);
}

.mf-detail-gallery .carousel-control-prev:hover i,
.mf-detail-gallery .carousel-control-next:hover i {
    color: #fff !important;
}

.mf-detail-gallery .carousel-control-prev i,
.mf-detail-gallery .carousel-control-next i {
    font-size: 16px !important;
}

.mf-detail-panel {
    background: #fff !important;
    border: 1px solid var(--mf-line);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(20, 20, 30, 0.05);
}

.mf-detail-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--mf-ink);
}

.mf-detail-price {
    color: var(--mf-ink);
    font-size: 26px;
}

.mf-detail-meta {
    font-size: 13.5px;
    color: var(--mf-muted);
}

.mf-detail-meta strong {
    color: var(--mf-ink) !important;
    font-weight: 700;
}

.btnStateDetail {
    border-radius: 999px !important;
    padding: 7px 16px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .03em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.btnStateDetail i {
    font-size: 12px !important;
}