/* ═══════════════════════════════════════════════════════════════
   THEME: TECH / ELECTRÓNICA
   Moderno, oscuro disponible, contrastes fuertes, specs visibles
   Tipografía: bold sans-serif
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');

:root {
    --theme-font-heading: 'DM Sans', sans-serif;
    --theme-font-body: 'DM Sans', sans-serif;
    --theme-card-radius: 16px;
    --theme-btn-radius: 10px;
}

body {
    font-family: var(--theme-font-body) !important;
}

h1, h2, h3, .ec-section-title {
    font-family: var(--theme-font-heading) !important;
    font-weight: 700 !important;
}

/* Cards con bordes gruesos y sombra tech */
.pcard {
    border-radius: var(--theme-card-radius) !important;
    border: 2px solid #f1f5f9 !important;
    transition: all .2s ease;
}
.pcard:hover {
    border-color: var(--ec-primary, #6366f1) !important;
    box-shadow: 0 0 0 1px var(--ec-primary, #6366f1), 0 8px 24px rgba(0,0,0,.08) !important;
    transform: translateY(-2px);
}

.pcard__body {
    padding: 14px !important;
}

/* Precio grande y bold */
.pcard__price, .product-price {
    font-size: 20px !important;
    font-weight: 700 !important;
    font-family: var(--theme-font-heading) !important;
}

/* Badges con pill style */
.pbadge {
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-weight: 700 !important;
}

/* Botones redondeados */
.btn-primary, .paction.add-cart, #btn-add-to-cart, .ec-minicart-btn {
    border-radius: var(--theme-btn-radius) !important;
    font-weight: 700 !important;
}

/* Category pills redondeadas */
.ec-cat-pill, .ec-cat-pills button {
    border-radius: 20px !important;
    font-weight: 600 !important;
}

/* Especificaciones visibles en card (si hay) */
.pcard__specs {
    display: block !important;
}

/* Search input tech */
.search_input, .ec-search-wrap input {
    border-radius: 14px !important;
}

/* Product detail - specs prominentes */
.product-single-tabs .nav-link {
    font-weight: 700 !important;
    font-family: var(--theme-font-heading) !important;
}

/* Grid más compacto */
@media (min-width: 992px) {
    .product-col-item {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   IDENTIDAD DE LA TARJETA — portada desde el fork del theme
   ═══════════════════════════════════════════════════════════════
   El theme tenia su propio list_products.blade.php que se salteaba
   los precios de flash sale, las ofertas (compare_at_price), los
   precios de pack, el schema.org, la vista rapida y el comparador.
   Se elimino el fork: ahora el theme usa la tarjeta del modulo y
   aporta solo su identidad visual desde aqui. Misma data, mismo
   comportamiento, mismo look.
   ═══════════════════════════════════════════════════════════════ */

/* Imagen contenida sobre fondo neutro: en tecnologia el producto se
   fotografia recortado y "cover" le corta los bordes al equipo. */
.pcard__media {
    background: var(--theme-surface, #f9fafb);
}
.pcard__img {
    object-fit: contain !important;
    padding: 12px !important;
}

/* Categoria como etiqueta tecnica */
.pcard__cat {
    color: var(--theme-primary, hsl(var(--primary-h), var(--primary-s), var(--primary-l))) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Titulo a dos lineas exactas: la grilla queda alineada aunque los
   nombres de producto tengan largos muy distintos. */
.pcard__title {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    min-height: 2.6em;
}

.pcard__price-current {
    color: var(--theme-primary, hsl(var(--primary-h), var(--primary-s), var(--primary-l)));
}

/* CTA de ancho completo, estilo tienda de electronica */
.pcard__cta {
    background: var(--theme-primary, hsl(var(--primary-h), var(--primary-s), var(--primary-l))) !important;
    color: var(--theme-primary-contrast, #fff) !important;
    border: none !important;
    border-radius: var(--theme-btn-radius) !important;
    font-weight: 600 !important;
}
.pcard__cta:hover {
    filter: brightness(.92);
    color: var(--theme-primary-contrast, #fff) !important;
}

/* Favoritos solo al hover en desktop; en tactil siempre visible,
   porque ahi no hay hover y el boton quedaria inalcanzable. */
@media (hover: hover) {
    .pcard__wish { opacity: 0; transition: opacity .2s; }
    .pcard:hover .pcard__wish { opacity: 1; }
}

/* ── Ficha de producto ────────────────────────────────────────────────
   En tecnologia la decision de compra pasa por las especificaciones, no
   por la descripcion: la tabla se destaca y la galeria muestra el
   producto completo en vez de recortarlo. */
.ec-spec-table {
    border-radius: var(--theme-card-radius) !important;
    font-size: 13px !important;
}
.ec-spec-table th {
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: 11.5px !important;
}
.product-single-tabs .nav-link.active {
    border-bottom-color: var(--theme-primary, hsl(var(--primary-h), var(--primary-s), var(--primary-l))) !important;
    color: var(--theme-primary, hsl(var(--primary-h), var(--primary-s), var(--primary-l))) !important;
}
.product-single-image,
.product-single-gallery img {
    object-fit: contain !important;
    background: var(--theme-surface, #f9fafb);
}