/* ============================================================
   ConexionPC Storefront — estilos personalizados
   Bootstrap 5 base — aquí solo overrides y componentes propios
   ============================================================ */

/* ── Tipografía de marca: Jost (OFL), autohospedada, solo encabezados ─────────
   Variable (peso 100–900), subset latin. Licencia en /fonts/jost/OFL.txt.
   El cuerpo conserva el stack del sistema de Bootstrap. */
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/jost/jost-latin-wght-normal.woff2') format('woff2');
}

/* Variables — paleta del manual de identidad (Pantone 185 C / 432 C) */
:root {
    --cpc-primary:        #BB0A0C;
    --cpc-primary-hover:  #9A080A;
    --cpc-primary-active: #830709;
    --cpc-primary-rgb:    187, 10, 12;
    --cpc-charcoal:       #393D42;
    --cpc-charcoal-rgb:   57, 61, 66;
    --cpc-surface:        #F6F7F8;
    --cpc-success:        var(--cpc-success);
    --cpc-text-muted:     #5C636A;
    --cpc-border:         #dee2e6;
    --cpc-bg-light:       var(--cpc-surface);
    --cpc-navbar-height:  64px;
    --cpc-font-heading:   'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Bootstrap 5.3: enlaces, primario y foco ligados a la marca */
    --bs-primary:            var(--cpc-primary);
    --bs-primary-rgb:        var(--cpc-primary-rgb);
    --bs-link-color:         var(--cpc-primary);
    --bs-link-color-rgb:     var(--cpc-primary-rgb);
    --bs-link-hover-color:     var(--cpc-primary-hover);
    --bs-link-hover-color-rgb: 154, 8, 10;
    --bs-body-color:         var(--cpc-charcoal);
    --bs-body-color-rgb:     var(--cpc-charcoal-rgb);
    --bs-heading-color:      var(--cpc-charcoal);
    --bs-secondary-color:    var(--cpc-text-muted);
    --bs-focus-ring-color:   rgba(var(--cpc-primary-rgb), .25);
    --bs-border-color:       var(--cpc-border);
    /* Derivados del primario que Bootstrap calcula en azul (acordeón, text-bg-*, alert-primary) */
    --bs-primary-text-emphasis: #4b0405;
    --bs-primary-bg-subtle:     #f1cece;
    --bs-primary-border-subtle: #e49d9e;
    /* Avisos informativos (.alert-info): neutros en lugar del cian de Bootstrap */
    --bs-info-text-emphasis: var(--cpc-charcoal);
    --bs-info-bg-subtle:     #eceef0;
    --bs-info-border-subtle: #cfd4d8;
}

.accordion {
    --bs-accordion-btn-focus-border-color: var(--cpc-primary);
    --bs-accordion-btn-focus-box-shadow:   0 0 0 .25rem rgba(var(--cpc-primary-rgb), .25);
    --bs-accordion-active-color:           var(--cpc-charcoal);
    --bs-accordion-active-bg:              var(--cpc-surface);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23393D42'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}

/* Bootstrap 5.3 no deriva los botones de --bs-primary: se redefinen --bs-btn-* */
.btn-primary {
    --bs-btn-color:               #fff;
    --bs-btn-bg:                  var(--cpc-primary);
    --bs-btn-border-color:        var(--cpc-primary);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--cpc-primary-hover);
    --bs-btn-hover-border-color:  var(--cpc-primary-hover);
    --bs-btn-focus-shadow-rgb:    var(--cpc-primary-rgb);
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--cpc-primary-active);
    --bs-btn-active-border-color: var(--cpc-primary-active);
    --bs-btn-disabled-color:      #fff;
    --bs-btn-disabled-bg:         var(--cpc-primary);
    --bs-btn-disabled-border-color: var(--cpc-primary);
}

.btn-outline-primary {
    --bs-btn-color:               var(--cpc-primary);
    --bs-btn-border-color:        var(--cpc-primary);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--cpc-primary);
    --bs-btn-hover-border-color:  var(--cpc-primary);
    --bs-btn-focus-shadow-rgb:    var(--cpc-primary-rgb);
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--cpc-primary-active);
    --bs-btn-active-border-color: var(--cpc-primary-active);
    --bs-btn-disabled-color:      var(--cpc-primary);
    --bs-btn-disabled-border-color: var(--cpc-primary);
}

/* Componentes de Bootstrap con azul fijo (#0d6efd / #86b7fe) en el CSS vendorizado */
.form-control:focus,
.form-select:focus {
    border-color: var(--cpc-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--cpc-primary-rgb), .25);
}

.form-check-input:checked {
    background-color: var(--cpc-primary);
    border-color: var(--cpc-primary);
}

.form-check-input:focus {
    border-color: var(--cpc-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--cpc-primary-rgb), .25);
}

.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23dd8587'/%3e%3c/svg%3e");
}

.pagination {
    --bs-pagination-active-bg:           var(--cpc-primary);
    --bs-pagination-active-border-color: var(--cpc-primary);
    --bs-pagination-focus-color:         var(--cpc-primary-hover);
    --bs-pagination-focus-box-shadow:    0 0 0 .25rem rgba(var(--cpc-primary-rgb), .25);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--cpc-primary);
}

.progress {
    --bs-progress-bar-bg: var(--cpc-primary);
}

.nav-link:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(var(--cpc-primary-rgb), .25);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--cpc-primary);
}

.list-group {
    --bs-list-group-active-bg:           var(--cpc-primary);
    --bs-list-group-active-border-color: var(--cpc-primary);
}

/* Encabezados con la fuente de marca */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--cpc-font-heading);
    font-weight: 600;
}

/* Estado neutro (badges de estatus): el rojo queda para acciones, no para estados */
.cpc-badge-neutral {
    background-color: var(--cpc-charcoal);
    color: #fff;
}

/* Errores de formulario: ícono + texto (no solo color) */
.field-validation-error {
    display: inline-flex;
    align-items: flex-start;
    gap: .3rem;
}

.field-validation-error::before {
    content: '';
    flex: 0 0 1em;
    height: 1.25em;
    background: no-repeat center / 1em url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3e%3cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3e%3c/svg%3e");
}

/* ── Body ──────────────────────────────────────────────────── */
body {
    background-color: var(--cpc-bg-light);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

/* ── Navbar ────────────────────────────────────────────────── */
.cpc-navbar {
    height: var(--cpc-navbar-height);
    background-color: #fff;
    border-bottom: 1px solid var(--cpc-border);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.cpc-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    padding: 0;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--cpc-charcoal);
    letter-spacing: -.5px;
}

.cpc-navbar .navbar-brand img {
    display: block;
    height: 40px;
    width: auto;
}

.cpc-navbar .navbar-brand:hover {
    color: var(--cpc-charcoal);
}

.cpc-search-form {
    width: 380px;
}

@media (max-width: 767.98px) {
    .cpc-search-form {
        width: 100%;
    }
}

/* ── Cart badge ────────────────────────────────────────────── */
.cpc-cart-btn {
    position: relative;
}

.cpc-cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    font-size: .65rem;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background-color: var(--cpc-primary);
    color: #fff;
    text-align: center;
}

.cpc-cart-badge[data-count="0"] {
    display: none;
}

/* ── Product card ──────────────────────────────────────────── */
.cpc-product-card {
    border: 1px solid var(--cpc-border);
    border-radius: .5rem;
    transition: box-shadow .15s ease, transform .15s ease;
    background: #fff;
}

.cpc-product-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    transform: translateY(-2px);
}

.cpc-product-card .card-img-top {
    height: 180px;
    object-fit: contain;
    padding: 1rem;
    background: #fff;
}

.cpc-product-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cpc-charcoal);
}

.cpc-product-sku {
    font-size: .75rem;
    color: var(--cpc-text-muted);
}

/* ── Product card (catalog grid) ──────────────────────────── */
.product-card__img-wrap {
    position: relative;
    height: 180px;
    background: #fff;
    border-radius: .5rem .5rem 0 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card__img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    padding: .75rem;
}

.product-card__img-placeholder {
    width: 100%;
    height: 100%;
}

.product-card__badge {
    position: absolute;
    top: .5rem;
    left: .5rem;
    font-size: .7rem;
    letter-spacing: .03em;
}

.product-card__name {
    font-size: .9rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Galería producto (Detail) ─────────────────────────────── */
.cpc-gallery__main {
    border: 1px solid var(--cpc-border);
    border-radius: .5rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 360px;
    overflow: hidden;
}

.cpc-gallery__main-img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    padding: 1rem;
}

.cpc-gallery__placeholder {
    width: 100%;
    height: 100%;
}

.cpc-gallery__thumb-btn {
    border: 2px solid var(--cpc-border);
    border-radius: .375rem;
    background: #fff;
    padding: 2px;
    cursor: pointer;
    width: 64px;
    height: 64px;
    overflow: hidden;
    transition: border-color .15s ease;
}

.cpc-gallery__thumb-btn:hover,
.cpc-gallery__thumb-btn--active {
    border-color: var(--cpc-primary);
}

.cpc-gallery__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ── Breadcrumb ────────────────────────────────────────────── */
.cpc-breadcrumb {
    background: transparent;
    padding: .5rem 0;
    font-size: .85rem;
}

/* ── Footer ────────────────────────────────────────────────── */
.cpc-footer {
    background-color: var(--cpc-charcoal);
    color: #c3c7cb;
    padding: 2.5rem 0 1.25rem;
    flex-shrink: 0;
}

.cpc-footer a {
    color: #c3c7cb;
    text-decoration: none;
}

.cpc-footer a:hover {
    color: #fff;
}

.cpc-footer .cpc-footer-brand {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}

.cpc-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.15);
    padding-top: 1rem;
    margin-top: 1.5rem;
    font-size: .8rem;
}

/* ── Alertas / flash ───────────────────────────────────────── */
.cpc-flash-container {
    position: fixed;
    top: calc(var(--cpc-navbar-height) + 12px);
    right: 1rem;
    z-index: 1055;
    min-width: 280px;
    max-width: 380px;
}

/* ── Spinner overlay ───────────────────────────────────────── */
.cpc-spinner-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.6);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.cpc-spinner-overlay.active {
    display: flex;
}

/* ── Checkout — indicador de pasos ────────────────────────── */
.cpc-steps {
    display: flex;
    align-items: center;
    gap: 0;
}

.cpc-step {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--cpc-text-muted);
    font-size: .85rem;
    flex: 1;
    position: relative;
}

.cpc-step:not(:last-child)::after {
    content: '';
    display: block;
    height: 2px;
    flex: 1;
    background-color: var(--cpc-border);
    margin: 0 .75rem;
}

.cpc-step__num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--cpc-border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    flex-shrink: 0;
    color: var(--cpc-text-muted);
}

.cpc-step.active .cpc-step__num {
    border-color: var(--cpc-charcoal);
    background: var(--cpc-charcoal);
    color: #fff;
}

.cpc-step.active .cpc-step__label {
    color: var(--cpc-charcoal);
    font-weight: 600;
}

.cpc-step.completed .cpc-step__num {
    border-color: var(--cpc-success);
    background: var(--cpc-success);
    color: #fff;
}

.cpc-step.completed .cpc-step__label {
    color: var(--cpc-success);
}

/* ── Account/Orders — timeline de estatus ─────────────────── */
.cpc-timeline {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.cpc-timeline__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    text-align: center;
}

.cpc-timeline__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 13px;
    left: calc(50% + 14px);
    right: calc(-50% + 14px);
    height: 2px;
    background-color: var(--cpc-border);
    z-index: 0;
}

.cpc-timeline__step.done:not(:last-child)::after {
    background-color: var(--cpc-success);
}

.cpc-timeline__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--cpc-border);
    background: #fff;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.cpc-timeline__step.done .cpc-timeline__dot {
    border-color: var(--cpc-success);
    background-color: var(--cpc-success);
}

.cpc-timeline__step.current .cpc-timeline__dot {
    border-color: var(--cpc-charcoal);
    background-color: var(--cpc-charcoal);
}

.cpc-timeline__label {
    font-size: .75rem;
    color: var(--cpc-text-muted);
    margin-top: .4rem;
    line-height: 1.2;
}

.cpc-timeline__step.done .cpc-timeline__label,
.cpc-timeline__step.current .cpc-timeline__label {
    color: var(--cpc-charcoal);
    font-weight: 600;
}

/* ── Catálogo: categorías en offcanvas (móvil) y paginación ─────────────── */
.cpc-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    max-width: 100%;
    padding: 0 .85rem;
    border: 1px solid var(--cpc-border);
    border-radius: 999px;
    background: #fff;
    color: var(--cpc-charcoal);
    font-size: .875rem;
    text-decoration: none;
}

.cpc-cat-chip:hover,
.cpc-cat-chip:focus-visible {
    border-color: var(--cpc-primary);
    color: var(--cpc-primary-hover);
}

.pagination {
    flex-wrap: wrap;
    row-gap: .25rem;
}

.pagination .page-link {
    white-space: nowrap;
}

@media (min-width: 768px) {
    .cpc-cat-list {
        max-height: 70vh;
        overflow-y: auto;
        padding-right: 4px;
    }
}

@media (max-width: 767.98px) {
    #categoryPanel {
        --bs-offcanvas-width: min(320px, 85vw);
    }

    /* Objetivos táctiles de al menos 44 px */
    .cpc-touch-target {
        min-height: 44px;
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .cpc-cat-link {
        display: flex !important;
        align-items: center;
        min-height: 44px;
    }

    .pagination .page-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
}

/* ── Buscador único del header (Fase 2) ─────────────────────────────────── */
.cpc-navbar {
    height: auto;
    min-height: var(--cpc-navbar-height);
}

.cpc-clear-all {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: .875rem;
}

@media (max-width: 767.98px) {
    /* Búsqueda en una segunda fila bajo el logo, con objetivos táctiles de 44 px */
    .cpc-navbar > .container-xl {
        row-gap: .5rem;
        padding-bottom: .25rem;
    }

    .cpc-search-form .form-control,
    .cpc-search-form .btn {
        min-height: 44px;
    }

    .cpc-search-form .btn {
        min-width: 44px;
    }
}

/* ── Catálogo: barra de herramientas (conteo, orden, chips activos) ─────── */
.cpc-sort-select {
    width: auto;
    max-width: 100%;
}

@media (max-width: 767.98px) {
    .cpc-sort-select {
        min-height: 44px;
    }
}

/* < md: "Categorías" + orden en una fila; conteo y chips en una sola línea con scroll horizontal */
.cpc-filter-line {
    display: contents;
}

@media (min-width: 768px) {
    .cpc-result-count {
        order: -1;
    }

    .cpc-active-filters {
        order: 3;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .cpc-filter-line {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: .5rem;
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .cpc-filter-line::-webkit-scrollbar {
        display: none;
    }

    .cpc-active-filters {
        display: contents;
    }

    .cpc-filter-line > *,
    .cpc-active-filters > * {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .cpc-active-filters .cpc-cat-chip {
        max-width: 70vw;
    }

    .cpc-sort-select {
        max-width: 11rem;
    }

    /* La navbar ya no es sticky: el flash baja bajo sus dos filas (~121 px) para no tapar el buscador */
    .cpc-flash-container {
        top: calc(var(--cpc-navbar-height) + 64px);
    }
}

/* ── Tarjeta de producto (_ProductCard): texto secundario, precio y botón ───────── */
.cpc-card-brand {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cpc-text-muted);
}

.cpc-card-code {
    font-size: .75rem;
    color: var(--cpc-text-muted);
}

.cpc-card-tax {
    font-size: .72rem;
    color: var(--cpc-text-muted);
}

.cpc-card-unavailable {
    font-size: .9rem;
    color: var(--cpc-text-muted);
}

/* Dos líneas reservadas para el título: las tarjetas de una fila quedan alineadas */
.cpc-product-card .product-card__name {
    min-height: 2.6em;
}

/* El enlace de la tarjeta es stretched-link (z-index 1): el botón queda por encima y sigue siendo clicable */
.cpc-card-add {
    position: relative;
    z-index: 2;
}

/* Botón "Categorías" (móvil): texto en --cpc-text-muted para contraste AA; el gris de Bootstrap (#6c757d) daba 4.37:1 sobre la superficie */
.cpc-cat-toggle {
    --bs-btn-color: var(--cpc-text-muted);
}

/* ── Imagen de producto (_ProductImage): proporción fija, sin saltos de layout, placeholder de marca ── */
.cpc-img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    overflow: hidden;
}

.cpc-img__pic {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .75rem;
}

.cpc-img__ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cpc-surface);
}

.cpc-img__ph[hidden] {
    display: none;
}

.cpc-img__logo {
    width: 55%;
    max-width: 160px;
    height: auto;
    opacity: .25;
}

/* Tarjeta de catálogo: 1:1 con tope de alto para que en una columna (móvil) no ocupe media pantalla */
.cpc-img--card {
    max-height: 220px;
}

.cpc-product-card .product-card__img-wrap {
    height: auto;
}

/* Miniaturas de carrito y checkout (_ProductImage): cuadro fijo, sin saltos al cargar */
.cpc-img--thumb {
    width: 48px;
    flex: none;
    border-radius: .25rem;
}

.cpc-img--thumb-sm {
    width: 44px;
}

.cpc-img--thumb .cpc-img__pic {
    padding: .125rem;
}

.cpc-img--thumb .cpc-img__logo {
    width: 70%;
}

/* Carrito y checkout en móvil (< sm): cada línea pasa de fila de tabla a tarjeta apilada. Solo CSS: el DOM
   (tr/td, .qty-input, .btn-qty-*, .btn-remove, .subtotal-cell) no cambia y cart.js sigue funcionando igual. */
@media (max-width: 575.98px) {
    .cpc-lines > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .cpc-lines,
    .cpc-lines > tbody {
        display: block;
    }

    .cpc-lines > tbody > tr {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) auto;
        grid-template-areas:
            "img name  rm"
            "img price price"
            "img qty   sub";
        gap: .25rem .75rem;
        align-items: center;
        padding: .75rem;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .cpc-lines > tbody > tr:last-child {
        border-bottom: 0;
    }

    .cpc-lines > tbody > tr > td {
        display: block;
        padding: 0;
        border: 0;
        box-shadow: none;
        text-align: left;
    }

    /* ps-3 / pe-3 de Bootstrap llevan !important: se anulan aquí para que la tarjeta use su propio padding */
    .cpc-lines .cpc-l-img   { grid-area: img; align-self: start; padding-left: 0 !important; }
    .cpc-lines .cpc-l-name  { grid-area: name; align-self: start; overflow-wrap: anywhere; }
    .cpc-lines .cpc-l-price { grid-area: price; }
    .cpc-lines .cpc-l-qty   { grid-area: qty; }
    .cpc-lines .cpc-l-sub   { grid-area: sub; text-align: right; white-space: nowrap; padding-right: 0 !important; }
    .cpc-lines .cpc-l-rm    { grid-area: rm; align-self: start; }

    .cpc-lines .cpc-l-price::after {
        content: " c/u";
    }

    .cpc-lines .cpc-l-rm .btn-remove {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        margin: -.5rem -.5rem 0 0;
    }

    .cpc-lines .cpc-l-qty .input-group {
        margin: 0 !important;
        justify-content: flex-start !important;
    }

    /* Checkout (resumen, sin controles): fila 2 = cantidad, precio unitario y subtotal */
    .cpc-lines--summary > tbody > tr {
        grid-template-columns: 48px auto minmax(0, 1fr) auto;
        grid-template-areas:
            "img name  name  name"
            "img qty   price sub";
    }

    .cpc-lines--summary .cpc-l-qty::before {
        content: "Cant. ";
    }

    .cpc-lines--summary .cpc-l-price::after {
        content: none;
    }
}