/* ==========================================================================
   UNIMAGEN CHILE - FRONT JARDÍN VIBRANTE
   Tema cliente: alegre, escolar, pastel vivo.
   No aplica a diseñador ni backoffice.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&display=swap');

:root {
    --bg-page: #fffaf2;
    --text: #2e1e4a;
    --muted: #71717a;

    --hero-bg: #ff6f61;
    --hero-text: #4c1d95;

    --btn-mint: #10b981;
    --btn-mint-dark: #047857;

    --primary: #8b5cf6;
    --primary-dark: #6d28d9;

    --pink: #f43f5e;
    --accent-blue: #0ea5e9;
    --accent-yellow: #fde047;
    --soft-sky: #e0f2fe;
    --soft-pink: #fce7f3;
    --soft-mint: #dcfce7;

    --card-shadow: 0 12px 30px rgba(14, 165, 233, 0.20);
    --card-shadow-hover: 0 18px 40px rgba(139, 92, 246, 0.30);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.uni-front,
body {
    margin: 0;
    font-family: 'Nunito', Arial, sans-serif;
    color: var(--text);
    background-color: var(--bg-page);
    background-image:
        linear-gradient(rgba(255, 250, 242, 0.92), rgba(255, 250, 242, 0.92)),
        url('../img/gibetmoll-internet-3116062.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding-bottom: 80px;
    overflow-x: hidden;
}

body.uni-front::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .25;
    background-image:
        radial-gradient(circle, rgba(139,92,246,.22) 0 7px, transparent 8px),
        radial-gradient(circle, rgba(244,63,94,.18) 0 6px, transparent 7px),
        radial-gradient(circle, rgba(14,165,233,.20) 0 8px, transparent 9px),
        radial-gradient(circle, rgba(253,224,71,.22) 0 7px, transparent 8px);
    background-size: 120px 120px, 160px 160px, 190px 190px, 230px 230px;
    background-position: 10px 20px, 90px 70px, 40px 160px, 160px 120px;
}

body.uni-front > * {
    position: relative;
    z-index: 1;
}

h1, h2, h3, .brand { margin: 0; }
a { text-decoration: none; color: inherit; }

.wrap,
.container,
.uni-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 15px 50px;
}

/* CABECERA SIMPLE COMPATIBLE */
.top,
.uni-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 28px;
    background: #ffffff;
    border-bottom: 5px solid var(--accent-blue);
    border-radius: 0 0 28px 28px;
    padding: 16px 22px;
    box-shadow: 0 8px 25px rgba(46, 30, 74, 0.10);
}

.brand,
.uni-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 900;
    font-size: 1.6rem;
    color: var(--text);
}

/* TÍTULOS */
h1 {
    font-size: clamp(2.2rem, 4.8vw, 4rem);
    font-weight: 900;
    color: var(--text);
    text-shadow: 2px 2px 0 #ffffff;
    line-height: 1.05;
    margin-bottom: 14px;
}

h2 {
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 900;
    color: var(--text);
    text-shadow: 1px 1px 0 #ffffff;
}

p {
    color: var(--text);
    font-weight: 800;
    line-height: 1.55;
}

/* BOTONES */
.btn,
.uni-btn,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: 'Nunito', Arial, sans-serif;
    font-weight: 900;
    font-size: 1.05rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    padding: 12px 24px;
    white-space: nowrap;
    transition: 0.1s;
    text-decoration: none;
}

.btn-main,
.uni-btn-main {
    background: var(--btn-mint);
    color: #ffffff;
    border: 3px solid #ffffff;
    border-bottom: 5px solid var(--btn-mint-dark);
    box-shadow: 0 8px 18px rgba(16,185,129,.25);
}

.btn-main:active,
.uni-btn-main:active {
    transform: translateY(3px);
    border-bottom-width: 2px;
}

.btn-soft,
.uni-btn-soft {
    background: #ffffff;
    color: var(--primary);
    border: 3px solid var(--primary);
    border-bottom: 5px solid var(--primary-dark);
}

.btn-soft:active,
.uni-btn-soft:active {
    transform: translateY(3px);
    border-bottom-width: 2px;
}

.btn-danger,
.uni-btn-danger {
    background: var(--pink);
    color: #ffffff;
    border: 3px solid #ffffff;
    border-bottom: 5px solid #be123c;
}

/* FORMULARIOS */
.filters,
.form-grid,
.uni-form-grid {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 12px;
    margin: 26px 0 30px;
}

label {
    display: block;
    color: var(--text);
    font-size: .95rem;
    font-weight: 900;
    margin: 10px 0 6px;
}

input,
select,
textarea {
    width: 100%;
    border: 3px solid var(--accent-blue);
    background: #ffffff;
    color: var(--text);
    border-radius: 18px;
    padding: 13px 15px;
    outline: none;
    font-family: 'Nunito', Arial, sans-serif;
    font-weight: 800;
    box-shadow: 0 5px 0 rgba(14,165,233,.14);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 5px rgba(139,92,246,.18);
}

.span2 { grid-column: span 2; }

/* CARDS BASE */
.card,
.uni-card,
.item {
    background-color: #ffffff;
    border: 5px solid var(--accent-blue);
    border-radius: 30px;
    padding: 25px;
    box-shadow: var(--card-shadow);
}

.grid,
.uni-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* CATÁLOGO - COMPATIBLE CON HTML ACTUAL */
.catalog-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 30px !important;
    align-items: stretch;
}

.product-card {
    background-color: #ffffff !important;
    border: 5px solid var(--accent-blue) !important;
    border-radius: 30px !important;
    padding: 25px !important;
    box-shadow: var(--card-shadow) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
    transition: 0.2s;
    overflow: visible !important;
}

.product-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary) !important;
    box-shadow: var(--card-shadow-hover) !important;
}

/* Nuestro HTML usa .pic */
.product-card .pic {
    background-color: #ffffff !important;
    border-radius: 20px !important;
    padding: 18px !important;
    aspect-ratio: 1 / 1;
    height: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border: 3px dashed var(--accent-blue);
    overflow: hidden;
}

.product-card .pic img {
    max-width: 90% !important;
    max-height: 90% !important;
    object-fit: contain !important;
    display: block;
    filter: none !important;
}

/* Nuestro HTML usa .body */
.product-card .body {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

/* Nuestro HTML usa .meta */
.product-card .meta:first-child {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    font-weight: 900;
    font-size: 0.82rem;
    color: #ffffff;
    background-color: var(--primary);
    padding: 7px 14px;
    border-radius: 12px;
}

.product-card .meta {
    font-size: .95rem;
    color: var(--muted);
    font-weight: 800;
}

/* Nuestro HTML usa .name */
.product-card .name {
    font-size: 1.35rem !important;
    color: var(--text) !important;
    margin: 4px 0 0;
    font-weight: 900;
    line-height: 1.18;
    min-height: 0 !important;
}

/* Nuestro HTML usa .price */
.product-card .price {
    font-size: 1.85rem !important;
    font-weight: 900;
    color: var(--pink) !important;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.05);
    margin-top: auto;
}

/* Nuestro HTML usa .actions */
.product-card .actions {
    display: flex !important;
    flex-direction: column;
    gap: 10px !important;
    margin-top: 8px;
}

.product-card .actions .btn {
    width: 100%;
    padding: 14px 16px;
}

/* Compatibilidad por si después usamos nombres antiguos */
.product-thumb {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 20px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 3px dashed var(--accent-blue);
}

.product-thumb img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.product-tag {
    font-weight: 900;
    font-size: 0.85rem;
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 10px;
}

.tag-timbres { background-color: var(--primary); }
.tag-libreria { background-color: var(--hero-bg); }

/* TABLAS / CUENTA */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

th {
    color: var(--primary);
    font-size: .8rem;
    text-transform: uppercase;
    font-weight: 900;
    text-align: left;
    padding: 8px 10px;
}

td {
    background: #ffffff;
    border-top: 2px solid #eef2ff;
    border-bottom: 2px solid #eef2ff;
    padding: 12px 10px;
    font-weight: 800;
}

td:first-child {
    border-left: 2px solid #eef2ff;
    border-radius: 14px 0 0 14px;
}

td:last-child {
    border-right: 2px solid #eef2ff;
    border-radius: 0 14px 14px 0;
}

.badge,
.uni-badge {
    background-color: var(--accent-yellow);
    color: #854d0e;
    border: 2px solid #ffffff;
    box-shadow: 0 3px 0 #ca8a04;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 0.85rem;
    font-weight: 900;
}

/* ALERTAS */
.err,
.uni-alert-error {
    background: #fff1f2;
    color: #be123c;
    border: 3px solid #fecdd3;
    border-radius: 20px;
    padding: 14px 16px;
    font-weight: 900;
}

.ok,
.uni-alert-ok {
    background: #ecfdf5;
    color: #047857;
    border: 3px solid #bbf7d0;
    border-radius: 20px;
    padding: 14px 16px;
    font-weight: 900;
}

/* CARRITO / CHECKOUT */
.total,
.price-total {
    font-size: 2rem;
    font-weight: 900;
    color: var(--pink);
    text-shadow: 2px 2px 0 rgba(0,0,0,.05);
}

.empty,
.uni-empty {
    background: #ffffff;
    border: 5px dashed var(--accent-blue);
    border-radius: 30px;
    padding: 24px;
    font-weight: 900;
    color: var(--muted);
}

/* MOBILE */
.mobile-bottom-nav { display: none; }

@media (max-width: 900px) {
    body {
        padding-bottom: 100px;
        background-attachment: scroll;
    }

    .top,
    .uni-top {
        justify-content: center;
        text-align: center;
        border-radius: 0 0 24px 24px;
    }

    .filters,
    .form-grid,
    .uni-form-grid,
    .grid,
    .uni-grid {
        grid-template-columns: 1fr !important;
    }

    .span2 { grid-column: span 1; }

    .catalog-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .product-card {
        padding: 22px !important;
    }

    .product-card .pic {
        aspect-ratio: 1 / .82;
    }

    .btn,
    .filters .btn {
        width: 100%;
        padding: 15px;
        font-size: 1.15rem;
    }

    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ==========================================================================
   HEADER FRONT UNIMAGEN
   Logo + login/cuenta + carrito + WhatsApp
   ========================================================================== */

.site-header{
    background-color: rgba(255,255,255,.94);
    border-bottom: 5px solid var(--accent-blue);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 8px 25px rgba(46, 30, 74, 0.10);
    backdrop-filter: blur(12px);
}

.navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 82px;
    gap: 15px;
}

.brand{
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    text-decoration: none;
}

.brand-avatar{
    width: 54px;
    height: 54px;
    background-color: var(--primary);
    border: 3px solid #ffffff;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 0 var(--primary-dark);
    transform: rotate(-5deg);
    overflow: hidden;
    color: #fff;
    font-weight: 900;
    font-size: 1.7rem;
}

.brand-avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brand-text-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brand-text{
    font-weight: 900;
    font-size: 1.55rem;
    line-height: 1;
    color: var(--text);
}

.brand-subtitle{
    font-size: .78rem;
    font-weight: 900;
    color: var(--hero-bg);
    letter-spacing: .7px;
}

.nav-links{
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-links a{
    color: var(--text);
    font-weight: 900;
    font-size: 1rem;
    padding: 8px 15px;
    border-radius: 999px;
    white-space: nowrap;
}

.nav-links a:hover{
    background-color: var(--primary);
    color: #ffffff;
    box-shadow: 0 3px 0 var(--primary-dark);
}

.nav-actions{
    display: flex;
    align-items: center;
    gap: 10px;
}

.badge-pill{
    background-color: var(--accent-yellow);
    color: #854d0e;
    border: 2px solid #ffffff;
    box-shadow: 0 3px 0 #ca8a04;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: .92rem;
    font-weight: 900;
    white-space: nowrap;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-btn{
    position: relative;
}

.cart-mini-count{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    border-radius: 99px;
    background: #ffffff;
    color: var(--btn-mint-dark);
    font-size: .72rem;
    margin-left: 4px;
    padding: 0 6px;
    font-weight: 900;
}

.mobile-bottom-nav{
    display: none;
}

@media (max-width: 980px){
    .nav-links,
    .nav-actions{
        display: none !important;
    }

    .site-header{
        border-bottom-width: 4px;
    }

    .navbar{
        min-height: 72px;
        justify-content: center;
        text-align: center;
    }

    .brand-avatar{
        width: 44px;
        height: 44px;
        border-radius: 15px;
    }

    .brand-text{
        font-size: 1.2rem;
    }

    .brand-subtitle{
        font-size: .68rem;
    }

    body.uni-front{
        padding-bottom: 96px;
    }

    .mobile-bottom-nav{
        display: grid;
        grid-template-columns: repeat(4,minmax(0,1fr));
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 9998;
        background: rgba(255,255,255,.96);
        backdrop-filter: blur(10px);
        border: 3px solid var(--accent-blue);
        box-shadow: 0 14px 35px rgba(15,23,42,.18);
        border-radius: 24px;
        padding: 8px;
        gap: 4px;
    }

    .mobile-bottom-nav a{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        text-decoration: none;
        color: var(--muted);
        font-size: .72rem;
        font-weight: 900;
        padding: 7px 4px;
        border-radius: 16px;
    }

    .mobile-bottom-nav a:hover{
        background: #f3e8ff;
        color: var(--primary-dark);
    }
}

/* ==========================================================================
   HOME INDEX NUEVO - comportamiento tipo index original
   ========================================================================== */

.quick-paths{
    max-width:1080px;
    width:100%;
    margin:10px auto 34px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.quick-path-card{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
    background:#fff;
    border:3px solid rgba(139,92,246,.14);
    border-radius:28px;
    padding:18px;
    box-shadow:0 14px 30px rgba(15,23,42,.06);
    transition:.18s ease;
}

.quick-path-card:hover{
    transform:translateY(-3px);
    border-color:rgba(139,92,246,.42);
    box-shadow:0 18px 36px rgba(139,92,246,.14);
}

.quick-path-icon{
    width:54px;
    height:54px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f3e8ff;
    color:#8b5cf6;
    flex:0 0 auto;
    font-size:26px;
}

.quick-path-card strong{
    display:block;
    color:#1e293b;
    font-size:1.08rem;
    font-weight:900;
}

.quick-path-card span{
    display:block;
    color:#64748b;
    font-size:.92rem;
    font-weight:800;
    margin-top:2px;
}

.quick-path-card.is-active{
    border-color:#8b5cf6;
    background:linear-gradient(180deg,#ffffff 0%,#faf5ff 100%);
}

.section{
    padding:18px 0 40px;
}

.section-head{
    text-align:center;
    margin-bottom:26px;
}

.eyebrow{
    font-size:1rem;
    font-weight:900;
    color:#ffffff;
    background-color:var(--primary);
    border-radius:999px;
    padding:9px 22px;
    display:inline-block;
    margin-bottom:14px;
    border:3px solid #ffffff;
    box-shadow:0 5px 0 var(--primary-dark);
}

.section-head h2{
    font-size:clamp(2.1rem,4vw,3rem);
    color:var(--text);
    font-weight:900;
    text-shadow:2px 2px 0 #fff;
}

.section-head p{
    margin:8px 0 0;
    color:#64748b;
    font-weight:900;
}

.category-pills{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-bottom:24px;
    flex-wrap:wrap;
}

.category-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:10px 20px;
    border-radius:999px;
    background:#ffffff;
    color:#8b5cf6;
    border:3px solid #8b5cf6;
    border-bottom:5px solid #6d28d9;
    font-weight:900;
    text-decoration:none;
}

.category-pill.is-active{
    background:#8b5cf6;
    color:#ffffff;
    box-shadow:0 4px 15px rgba(139,92,246,.30);
}

.catalog-toolbar{
    margin:0 auto 28px;
    max-width:920px;
    background:#ffffff;
    border:3px solid rgba(139,92,246,.18);
    border-radius:28px;
    padding:14px;
    box-shadow:0 16px 38px rgba(15,23,42,.06);
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
    align-items:center;
}

.search-box{
    display:flex;
    align-items:center;
    gap:10px;
    background:#f8fafc;
    border:2px solid #e2e8f0;
    border-radius:18px;
    padding:0 14px;
    min-height:52px;
}

#catalogSearch{
    width:100%;
    border:0;
    box-shadow:none;
    background:transparent;
    outline:0;
    font-family:inherit;
    font-size:1rem;
    font-weight:800;
    color:#1e293b;
    padding:0;
}

#catalogSearch::placeholder{
    color:#94a3b8;
}

.catalog-count{
    white-space:nowrap;
    background:#f3e8ff;
    color:#7c3aed;
    border-radius:999px;
    padding:12px 16px;
    font-weight:900;
}

.product-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    margin-bottom:8px;
}

.stock-note{
    font-size:.9rem;
    color:#71717a;
    font-weight:900;
}

.product-extra{
    font-size:.95rem;
    color:#71717a;
    margin-bottom:8px;
    font-weight:800;
    line-height:1.32;
}

.price-line{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:auto;
    gap:10px;
    padding-top:8px;
}

.price-main{
    font-size:1.8rem;
    font-weight:900;
    color:var(--pink);
    text-shadow:2px 2px 0 rgba(0,0,0,.05);
}

.variant-row{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:4px 0 4px;
}

.variant-dot{
    width:auto;
    border:2px solid #e0e7ff;
    border-bottom:4px solid #c4b5fd;
    background:#ffffff;
    color:#4c1d95;
    border-radius:999px;
    padding:6px 10px;
    font-size:.78rem;
    font-weight:900;
    cursor:pointer;
    box-shadow:none;
}

.variant-dot.is-active{
    background:#8b5cf6;
    border-color:#8b5cf6;
    border-bottom-color:#6d28d9;
    color:#ffffff;
}

@media(max-width:900px){
    .quick-paths{
        grid-template-columns:1fr;
        gap:12px;
    }

    .catalog-toolbar{
        grid-template-columns:1fr;
    }

    .catalog-count{
        text-align:center;
    }
}

/* ==========================================================================
   AJUSTE PRO HEADER / HERO / CARDS
   Header más compacto, hero armónico, tarjetas con WhatsApp claro.
   ========================================================================== */

/* Header más bajo */
.site-header{
    border-bottom-width:4px !important;
}

.navbar{
    min-height:68px !important;
    padding-top:6px !important;
    padding-bottom:6px !important;
}

.brand-avatar{
    width:46px !important;
    height:46px !important;
    border-radius:16px !important;
}

.brand-text{
    font-size:1.35rem !important;
}

.brand-subtitle{
    font-size:.72rem !important;
    letter-spacing:.8px;
}

.nav-links a{
    font-size:.96rem !important;
    padding:7px 13px !important;
}

.nav-actions .btn,
.nav-actions .badge-pill{
    padding:9px 15px !important;
    font-size:.96rem !important;
}

/* Hero menos alto y más armonioso */
.hero-fun-wrapper{
    padding:16px 0 24px !important;
}

.hero-fun-card{
    max-width:1040px !important;
    padding:26px 24px !important;
    border-width:8px !important;
    border-radius:38px !important;
    box-shadow:0 14px 30px rgba(255,111,97,.26) !important;
}

.text-gradient-title{
    font-size:clamp(2rem,4vw,3.35rem) !important;
    line-height:1.03 !important;
    margin-bottom:8px !important;
    text-shadow:-3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 3px 3px 0 #fff, 0 6px 0 rgba(0,0,0,.12) !important;
}

.text-gradient-subtitle{
    font-size:1.05rem !important;
    margin:10px auto 16px !important;
}

.btn-fun{
    padding:13px 32px !important;
    font-size:1.15rem !important;
    border-bottom-width:6px !important;
}

/* Menú debajo del banner más compacto */
.quick-paths{
    margin:4px auto 26px !important;
    gap:13px !important;
}

.quick-path-card{
    padding:14px 16px !important;
    border-radius:24px !important;
}

.quick-path-icon{
    width:46px !important;
    height:46px !important;
    border-radius:15px !important;
    font-size:23px !important;
}

/* Tarjetas más ordenadas */
.catalog-grid{
    grid-template-columns:repeat(auto-fill,minmax(245px,1fr)) !important;
    gap:24px !important;
}

.product-card{
    padding:18px !important;
    border-width:4px !important;
    border-radius:26px !important;
}

.product-card .pic{
    padding:14px !important;
    border-width:3px !important;
    margin-bottom:14px !important;
}

.product-card .name{
    font-size:1.18rem !important;
}

.product-card .product-extra{
    min-height:0 !important;
}

.price-main,
.product-card .price{
    font-size:1.65rem !important;
}

/* Botones de tarjeta: Diseñar principal + WhatsApp/Consultar claro */
.product-card .actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
}

.product-card .actions .btn{
    width:100% !important;
    min-height:44px;
    font-size:1rem !important;
    padding:11px 14px !important;
}

.product-card .actions .btn-main{
    background:var(--btn-mint) !important;
    color:#ffffff !important;
    border:3px solid #ffffff !important;
    border-bottom:5px solid var(--btn-mint-dark) !important;
}

.product-card .actions .btn-soft,
.product-card .actions a[target="_blank"]{
    background:#ffffff !important;
    color:#047857 !important;
    border:3px solid #10b981 !important;
    border-bottom:5px solid #047857 !important;
}

.product-card .actions a[target="_blank"]::before{
    content:"💬 ";
}

/* Mobile más compacto */
@media(max-width:900px){
    .hero-fun-card{
        padding:22px 16px !important;
        border-radius:32px !important;
    }

    .text-gradient-title{
        font-size:2rem !important;
    }

    .text-gradient-subtitle{
        font-size:.98rem !important;
    }

    .quick-path-card{
        padding:13px !important;
    }

    .catalog-grid{
        gap:18px !important;
    }
}

/* Resumen de diseño en carrito */
.design-summary{
    margin-top:10px;
    padding:10px 12px;
    border-radius:16px;
    background:#f8fafc;
    border:2px dashed #c4b5fd;
    color:#334155;
    font-size:.92rem;
    font-weight:800;
    line-height:1.35;
}
.design-summary strong{
    color:#6d28d9;
}

/* Carrito: preview + resumen + editar diseño */
.cart-design-card{
    margin-top:12px;
    padding:12px;
    border-radius:18px;
    background:#f8fafc;
    border:2px dashed #c4b5fd;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:12px;
    align-items:start;
}

.cart-design-preview{
    width:120px;
    height:82px;
    border-radius:14px;
    background:#fff;
    border:2px solid #e9d5ff;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.cart-design-preview img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.cart-design-summary{
    color:#334155;
    font-size:.92rem;
    font-weight:800;
    line-height:1.35;
}

.cart-design-summary strong{
    color:#6d28d9;
}

.btn-edit-design{
    grid-column:1 / -1;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    border-radius:999px;
    padding:9px 14px;
    font-weight:900;
    background:#fff;
    color:#6d28d9;
    border:2px solid #8b5cf6;
    box-shadow:0 3px 0 #6d28d9;
}

.btn-edit-design:active{
    transform:translateY(3px);
    box-shadow:none;
}

@media(max-width:760px){
    .cart-design-card{
        grid-template-columns:1fr;
    }
    .cart-design-preview{
        width:100%;
        height:140px;
    }
}

/* ==========================================================================
   CARRITO UNIMAGEN FINAL - estilo compacto inspirado en carrito antiguo
   ========================================================================== */

body.uni-front .wrap{
    max-width:1180px;
}

body.uni-front h1{
    line-height:1.05;
}

body.uni-front h1 + p{
    margin-bottom:18px !important;
    font-weight:800;
    color:#2e1e4a;
}

/* Tarjeta base del item */
body.uni-front .item-card,
body.uni-front .cart-item,
body.uni-front .cart-row{
    max-width:1120px !important;
    margin:0 auto 18px !important;
    background:#ffffff !important;
    border:4px solid #0ea5e9 !important;
    border-radius:30px !important;
    padding:18px 22px !important;
    box-shadow:0 14px 28px rgba(14,165,233,.12) !important;
    min-height:0 !important;
    overflow:hidden !important;
}

/* Si el carrito nuevo usa cards sin clase cart-item, igual ordenamos por estructura */
body.uni-front form + .price,
body.uni-front .price{
    font-size:1.45rem !important;
    font-weight:900 !important;
    color:#f43f5e !important;
    margin-top:10px !important;
}

/* Encabezado dentro de item */
body.uni-front .name{
    font-size:1.25rem !important;
    font-weight:900 !important;
    color:#2e1e4a !important;
    margin-bottom:4px !important;
}

body.uni-front .name + div,
body.uni-front .meta,
body.uni-front .item-meta{
    color:#2e1e4a !important;
    font-weight:800 !important;
}

/* Botón eliminar más compacto */
body.uni-front .btn-danger,
body.uni-front button.btn-danger,
body.uni-front button[type="submit"]{
    width:auto !important;
    min-width:118px !important;
    min-height:44px !important;
    border-radius:999px !important;
    padding:10px 18px !important;
    font-size:.98rem !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
}

/* Caja de diseño: compacta y clara */
body.uni-front .cart-design-card{
    margin-top:14px !important;
    padding:14px !important;
    border-radius:22px !important;
    background:#f8fbff !important;
    border:3px dashed #a78bfa !important;
    display:grid !important;
    grid-template-columns:145px minmax(0,1fr) !important;
    gap:14px !important;
    align-items:center !important;
    max-width:100% !important;
}

body.uni-front .cart-design-preview{
    width:145px !important;
    height:92px !important;
    border-radius:16px !important;
    background:#ffffff !important;
    border:2px solid #ddd6fe !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
}

body.uni-front .cart-design-preview img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
}

body.uni-front .cart-design-summary{
    color:#334155 !important;
    font-size:.96rem !important;
    line-height:1.42 !important;
    font-weight:800 !important;
}

body.uni-front .cart-design-summary div{
    margin:2px 0 !important;
}

body.uni-front .cart-design-summary strong{
    color:#6d28d9 !important;
}

/* Botón editar diseño */
body.uni-front .btn-edit-design{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-height:42px !important;
    margin-top:4px !important;
    border-radius:999px !important;
    background:#ffffff !important;
    color:#6d28d9 !important;
    border:3px solid #8b5cf6 !important;
    border-bottom:5px solid #6d28d9 !important;
    font-weight:900 !important;
    text-decoration:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

/* Productos físicos sin diseño: que no se vean como diseño vacío */
body.uni-front .cart-design-card:empty{
    display:none !important;
}

/* Total */
body.uni-front .cart-total,
body.uni-front .total-box{
    max-width:1120px !important;
    margin:20px auto !important;
    border-radius:28px !important;
    padding:20px 24px !important;
    background:#fff !important;
    border:4px solid #8b5cf6 !important;
}

/* Acciones del carrito */
body.uni-front .cart-actions,
body.uni-front .actions-row{
    max-width:1120px !important;
    margin:18px auto !important;
    display:flex !important;
    gap:12px !important;
    flex-wrap:wrap !important;
}

body.uni-front .cart-actions .btn,
body.uni-front .actions-row .btn{
    min-height:48px !important;
    border-radius:999px !important;
}

/* Mobile */
@media(max-width:760px){
    body.uni-front .item-card,
    body.uni-front .cart-item,
    body.uni-front .cart-row{
        padding:16px !important;
        border-radius:24px !important;
    }

    body.uni-front .cart-design-card{
        grid-template-columns:1fr !important;
    }

    body.uni-front .cart-design-preview{
        width:100% !important;
        height:145px !important;
    }
}

/* UNI_ESCOLAR_MOTIVACIONALES_MENU_V1 */
.uni-school-pill,
a.uni-school-pill{
  background:linear-gradient(135deg,#7c3aed,#0ea5e9) !important;
  color:#fff !important;
  border:3px solid #fff !important;
  border-bottom:5px solid #5b21b6 !important;
  box-shadow:0 12px 24px rgba(124,58,237,.20) !important;
  border-radius:999px !important;
  font-weight:950 !important;
  text-decoration:none !important;
}

.uni-school-pill:hover{
  transform:translateY(-2px);
}

/* En móvil el menú superior no debe partirse por tener demasiados botones */
@media(max-width:760px){
  .mobile-bottom-nav{
    grid-template-columns:repeat(4,1fr) !important;
  }

  .mobile-bottom-nav a{
    min-width:0 !important;
    font-size:.72rem !important;
  }

  .uni-filter-pill,
  .uni-school-pill{
    white-space:nowrap !important;
    min-height:44px !important;
    padding:10px 14px !important;
    font-size:.88rem !important;
  }
}

/* UNI_HOME_CATALOGO_ESCOLAR_CARD_V1 */
.uni-home-catalogo-escolar-card{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  padding:17px 18px;
  border-radius:23px;
  border:3px solid #8b5cf6;
  background:rgba(255,255,255,.92);
  color:#21163d;
  text-decoration:none;
  box-shadow:0 12px 24px rgba(124,58,237,.14);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.uni-home-catalogo-escolar-card:hover{
  transform:translateY(-2px);
  border-color:#7c3aed;
  box-shadow:0 18px 34px rgba(124,58,237,.20);
}

.uni-home-catalogo-escolar-icon{
  width:48px;
  height:48px;
  min-width:48px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(135deg,#f3e8ff,#e0f7ff);
  font-size:1.45rem;
  box-shadow:inset 0 0 0 1px #eadcff;
}

.uni-home-catalogo-escolar-copy{
  display:grid;
  gap:3px;
}

.uni-home-catalogo-escolar-copy strong{
  font-size:1.1rem;
  font-weight:950;
  line-height:1.05;
  color:#21163d;
}

.uni-home-catalogo-escolar-copy small{
  font-size:.9rem;
  font-weight:850;
  color:#64748b;
}

@media(max-width:760px){
  .uni-home-catalogo-escolar-card{
    padding:15px 16px;
    border-radius:21px;
    gap:14px;
  }

  .uni-home-catalogo-escolar-icon{
    width:44px;
    height:44px;
    min-width:44px;
    font-size:1.3rem;
  }

  .uni-home-catalogo-escolar-copy strong{
    font-size:1rem;
  }

  .uni-home-catalogo-escolar-copy small{
    font-size:.82rem;
  }
}

/* UNI_HOME_SCHOOL_MINI_BTN_V1 */
.uni-home-school-mini-wrap{
  display:flex;
  justify-content:center;
  width:100%;
  margin:8px 0 4px;
}

.uni-home-school-mini-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:10px 20px;
  border-radius:999px;
  background:linear-gradient(135deg,#7c3aed,#0ea5e9);
  color:#fff !important;
  text-decoration:none !important;
  font-weight:950;
  font-size:.95rem;
  border:3px solid #fff;
  border-bottom:5px solid #5b21b6;
  box-shadow:0 12px 24px rgba(124,58,237,.20);
}

.uni-home-school-mini-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(124,58,237,.26);
}

@media(max-width:760px){
  .uni-home-school-mini-wrap{
    margin:6px 0 2px;
  }

  .uni-home-school-mini-btn{
    min-height:40px;
    padding:9px 16px;
    font-size:.88rem;
  }
}

/* UNI_HOME_MOTIVACIONALES_CARD_V1 */
.uni-home-motivacionales-card{
  border-color:#8b5cf6 !important;
}

.uni-home-motivacionales-card:hover{
  transform:translateY(-2px);
}

@media(max-width:760px){
  .uni-home-motivacionales-card{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }
}

/* UNI_HOME_MOTIVACIONALES_QUICK_CARD_V2 */
.quick-paths .quick-path-card.uni-home-motivacionales-card{
  border-color:#8b5cf6 !important;
  background:rgba(255,255,255,.94) !important;
}

.quick-paths .quick-path-card.uni-home-motivacionales-card .quick-path-icon{
  background:linear-gradient(135deg,#f3e8ff,#e0f7ff) !important;
}

.quick-paths .quick-path-card.uni-home-motivacionales-card strong{
  color:#21163d !important;
}

.quick-paths .quick-path-card.uni-home-motivacionales-card span{
  color:#64748b !important;
}

.quick-paths .quick-path-card.uni-home-motivacionales-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 34px rgba(124,58,237,.18) !important;
}

@media(max-width:760px){
  .quick-paths .quick-path-card.uni-home-motivacionales-card{
    width:100% !important;
    margin:0 !important;
  }
}

/* UNI_CART_NATIVE_VISIBLE_V1
   El carrito nuevo debe mostrar todas las tarjetas PHP reales.
   Evita que capas antiguas tipo final-panel dejen items en 0x0. */

body.uni-front .card.item{
  display:grid !important;
  grid-template-columns:minmax(150px, 210px) minmax(0,1fr) auto !important;
  gap:18px !important;
  align-items:center !important;
  width:100% !important;
  max-width:100% !important;
  min-height:160px !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  opacity:1 !important;
  visibility:visible !important;
  position:relative !important;
  transform:none !important;
  margin:0 0 16px 0 !important;
}

body.uni-front .card.item > *{
  min-width:0 !important;
  max-width:100% !important;
  overflow:visible !important;
}

body.uni-front .card.item .item-preview,
body.uni-front .card.item .cart-design-preview{
  width:100% !important;
  min-height:140px !important;
  height:auto !important;
  max-height:none !important;
  overflow:hidden !important;
  border-radius:20px !important;
}

body.uni-front .card.item .name{
  font-size:1.06rem !important;
  font-weight:950 !important;
  line-height:1.18 !important;
  color:#172033 !important;
}

body.uni-front .card.item form{
  justify-self:end !important;
}

body.uni-front .card.item .price,
body.uni-front .card.item > div:last-child{
  white-space:nowrap !important;
  font-weight:950 !important;
  color:#16a34a !important;
}

body.uni-front .cart-design-card{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  display:grid !important;
}

body.uni-front .cart-design-card:empty{
  display:none !important;
}

/* En móvil, una tarjeta debajo de otra, sin taparse */
@media(max-width:760px){
  body.uni-front .card.item{
    grid-template-columns:1fr !important;
    gap:12px !important;
    min-height:0 !important;
    padding:16px !important;
    margin-bottom:14px !important;
  }

  body.uni-front .card.item form{
    justify-self:stretch !important;
    width:100% !important;
  }

  body.uni-front .card.item form button{
    width:100% !important;
  }

  body.uni-front .card.item .price,
  body.uni-front .card.item > div:last-child{
    white-space:normal !important;
    text-align:left !important;
  }
}

/* UNI_CART_PC_VISUAL_FIX_V2
   Ordena versión PC después de quitar final-panel.
   Móvil NO se toca. */

@media(min-width:761px){

  body.uni-front .wrap{
    max-width:1180px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:24px 18px 56px !important;
  }

  body.uni-front .wrap > h1{
    margin-top:16px !important;
    margin-bottom:6px !important;
    font-size:clamp(2rem,3vw,2.65rem) !important;
    line-height:1.05 !important;
  }

  body.uni-front .wrap > h1 + p{
    margin-bottom:20px !important;
    color:#64748b !important;
    font-weight:800 !important;
  }

  /* Tarjeta de producto carrito PC */
  body.uni-front .card.item{
    display:grid !important;
    grid-template-columns:180px minmax(0,1fr) 130px !important;
    gap:20px !important;
    align-items:start !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    padding:18px !important;
    margin:0 0 16px 0 !important;
    border-radius:26px !important;
    overflow:visible !important;
    background:#fff !important;
    border:1px solid #e5e7eb !important;
    box-shadow:0 16px 38px rgba(15,23,42,.08) !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  body.uni-front .card.item:hover{
    box-shadow:0 20px 44px rgba(15,23,42,.11) !important;
    transform:translateY(-1px) !important;
  }

  /* Columna imagen */
  body.uni-front .card.item .item-preview{
    width:180px !important;
    min-width:180px !important;
    height:150px !important;
    min-height:150px !important;
    max-height:150px !important;
    border-radius:22px !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#f8fafc !important;
    border:1px dashed #c4b5fd !important;
  }

  body.uni-front .card.item .item-preview img,
  body.uni-front .card.item .item-preview svg{
    max-width:94% !important;
    max-height:94% !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
    display:block !important;
  }

  /* Columna datos */
  body.uni-front .card.item .name{
    font-size:1.08rem !important;
    line-height:1.18 !important;
    font-weight:950 !important;
    color:#172033 !important;
    margin-bottom:8px !important;
  }

  body.uni-front .card.item .name + div,
  body.uni-front .card.item .meta,
  body.uni-front .card.item .item-meta{
    font-size:.86rem !important;
    line-height:1.45 !important;
    color:#64748b !important;
    font-weight:800 !important;
  }

  body.uni-front .card.item form{
    justify-self:start !important;
    width:auto !important;
    margin-top:10px !important;
  }

  body.uni-front .card.item form button{
    width:auto !important;
    min-height:40px !important;
    padding:9px 14px !important;
    border-radius:14px !important;
  }

  /* Precio columna derecha */
  body.uni-front .card.item > div:last-child{
    justify-self:end !important;
    align-self:center !important;
    text-align:right !important;
    white-space:nowrap !important;
    font-size:1.15rem !important;
    font-weight:950 !important;
    color:#16a34a !important;
    min-width:110px !important;
    overflow:visible !important;
  }

  /* Resumen del diseño dentro de la tarjeta */
  body.uni-front .card.item .cart-design-card{
    margin-top:12px !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    display:grid !important;
    grid-template-columns:110px minmax(0,1fr) !important;
    gap:12px !important;
    align-items:start !important;
    padding:10px !important;
    border-radius:18px !important;
    background:#f8fafc !important;
    border:1px solid #e9d5ff !important;
    box-shadow:none !important;
  }

  body.uni-front .card.item .cart-design-preview{
    width:110px !important;
    height:84px !important;
    min-height:84px !important;
    max-height:84px !important;
    border-radius:14px !important;
    overflow:hidden !important;
    background:#fff !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  body.uni-front .card.item .cart-design-preview img,
  body.uni-front .card.item .cart-design-preview svg{
    max-width:96% !important;
    max-height:96% !important;
    object-fit:contain !important;
  }

  body.uni-front .card.item .cart-design-summary{
    font-size:.82rem !important;
    line-height:1.35 !important;
    color:#475569 !important;
    overflow:visible !important;
  }

  body.uni-front .card.item .btn-edit-design{
    margin-top:8px !important;
    min-height:38px !important;
    width:auto !important;
  }

  /* Total / resumen inferior */
  body.uni-front .card.total,
  body.uni-front .cart-total,
  body.uni-front .total-box{
    margin-top:18px !important;
    border-radius:26px !important;
    padding:20px !important;
    background:#fff !important;
    border:1px solid #e5e7eb !important;
    box-shadow:0 16px 38px rgba(15,23,42,.08) !important;
    overflow:visible !important;
  }

  body.uni-front .card.total .btn,
  body.uni-front .cart-total .btn,
  body.uni-front .total-box .btn{
    min-height:48px !important;
    border-radius:16px !important;
    font-weight:950 !important;
  }
}

/* UNI_PC_CART_NO_DUP_PREVIEW_V1
   Solo escritorio. Evita previews duplicados/triplicados en carrito PC.
   No aplica a cart_mobile. */

@media(min-width:761px){

  body.uni-front .card.item .cart-design-card{
    display:grid !important;
    grid-template-columns:110px minmax(0,1fr) !important;
    gap:12px !important;
    align-items:start !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

  /* Si algún JS viejo quedó en caché y agrega otro bloque, ocultar duplicados */
  body.uni-front .card.item .cart-design-card ~ .cart-design-card{
    display:none !important;
  }

  body.uni-front .card.item .cart-design-preview{
    width:110px !important;
    height:84px !important;
    min-height:84px !important;
    max-height:84px !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#fff !important;
    border-radius:14px !important;
  }

  body.uni-front .card.item .cart-design-preview img,
  body.uni-front .card.item .cart-design-preview svg{
    max-width:96% !important;
    max-height:96% !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
    display:block !important;
  }

  /* Si dentro del preview quedaron imágenes repetidas, mostrar solo la primera */
  body.uni-front .card.item .cart-design-preview img + img,
  body.uni-front .card.item .cart-design-preview svg + svg,
  body.uni-front .card.item .cart-design-preview canvas + canvas{
    display:none !important;
  }

  body.uni-front .card.item .cart-design-summary{
    overflow:visible !important;
    max-height:none !important;
    line-height:1.35 !important;
  }
}

/* UNI_PC_CART_REPAIR_PREVIEW_UNICO_V2
   Solo PC. No aplica a cart_mobile.
   Corrige tarjeta PC después de separar móvil. */

@media(min-width:761px){

  body.uni-front:not(.uni-mobile-cart-page) .wrap{
    max-width:1180px !important;
    margin:0 auto !important;
    padding:28px 22px 70px !important;
  }

  body.uni-front:not(.uni-mobile-cart-page) .card.item{
    position:relative !important;
    display:grid !important;
    grid-template-columns:240px minmax(0,1fr) 170px !important;
    gap:26px !important;
    align-items:start !important;
    min-height:220px !important;
    height:auto !important;
    max-height:none !important;
    width:100% !important;
    max-width:100% !important;
    padding:24px !important;
    margin:0 0 20px 0 !important;
    border-radius:28px !important;
    overflow:visible !important;
    background:#fff !important;
    border:1px solid #e7defd !important;
    box-shadow:0 18px 45px rgba(42,32,88,.08) !important;
    transform:none !important;
  }

  /* La columna izquierda debe contener la vista previa grande */
  body.uni-front:not(.uni-mobile-cart-page) .card.item .thumb{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    width:240px !important;
    min-width:240px !important;
    height:170px !important;
    min-height:170px !important;
    max-height:170px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    border-radius:22px !important;
    background:#f8fafc !important;
    border:1px dashed #c4b5fd !important;
    color:#1f173a !important;
    font-weight:950 !important;
    font-size:.9rem !important;
  }

  body.uni-front:not(.uni-mobile-cart-page) .card.item .thumb img,
  body.uni-front:not(.uni-mobile-cart-page) .card.item .thumb svg{
    max-width:96% !important;
    max-height:96% !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
    display:block !important;
  }

  /* Si el PHP todavía deja cart-design-card dentro de otra columna,
     lo convertimos en el bloque visual grande y lo dejamos ordenado. */
  body.uni-front:not(.uni-mobile-cart-page) .card.item .cart-design-card{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    width:240px !important;
    min-width:240px !important;
    max-width:240px !important;
    height:170px !important;
    min-height:170px !important;
    max-height:170px !important;
    display:block !important;
    padding:0 !important;
    margin:0 !important;
    border:1px dashed #c4b5fd !important;
    border-radius:22px !important;
    background:#f8fafc !important;
    overflow:hidden !important;
    box-shadow:none !important;
  }

  body.uni-front:not(.uni-mobile-cart-page) .card.item .cart-design-preview{
    width:100% !important;
    height:100% !important;
    min-height:170px !important;
    max-height:170px !important;
    padding:10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    background:#fff !important;
    border-radius:20px !important;
  }

  body.uni-front:not(.uni-mobile-cart-page) .card.item .cart-design-preview img,
  body.uni-front:not(.uni-mobile-cart-page) .card.item .cart-design-preview svg{
    max-width:96% !important;
    max-height:96% !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
    display:block !important;
  }

  /* El resumen del diseño NO debe salir pegado a la derecha del preview */
  body.uni-front:not(.uni-mobile-cart-page) .card.item .cart-design-summary{
    display:none !important;
  }

  /* Si queda más de un preview por cache o JS anterior, se ocultan duplicados */
  body.uni-front:not(.uni-mobile-cart-page) .card.item .cart-design-card ~ .cart-design-card,
  body.uni-front:not(.uni-mobile-cart-page) .card.item .cart-design-preview img + img,
  body.uni-front:not(.uni-mobile-cart-page) .card.item .cart-design-preview svg + svg{
    display:none !important;
  }

  /* Datos al centro */
  body.uni-front:not(.uni-mobile-cart-page) .card.item .info,
  body.uni-front:not(.uni-mobile-cart-page) .card.item .item-info,
  body.uni-front:not(.uni-mobile-cart-page) .card.item > div:nth-child(2){
    grid-column:2 !important;
    min-width:0 !important;
    align-self:start !important;
    overflow:visible !important;
  }

  body.uni-front:not(.uni-mobile-cart-page) .card.item .name{
    font-size:1.22rem !important;
    line-height:1.15 !important;
    font-weight:950 !important;
    color:#172033 !important;
    margin:0 0 10px 0 !important;
  }

  body.uni-front:not(.uni-mobile-cart-page) .card.item br{
    line-height:1.35 !important;
  }

  /* Acciones/precio a la derecha */
  body.uni-front:not(.uni-mobile-cart-page) .card.item > div:last-child{
    grid-column:3 !important;
    align-self:center !important;
    justify-self:end !important;
    min-width:150px !important;
    text-align:right !important;
    white-space:normal !important;
    overflow:visible !important;
  }

  body.uni-front:not(.uni-mobile-cart-page) .card.item .btn-edit-design{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:46px !important;
    border-radius:18px !important;
    margin:0 0 12px 0 !important;
    background:#f5f3ff !important;
    border:2px solid #8b5cf6 !important;
    color:#6d28d9 !important;
    font-weight:950 !important;
    text-decoration:none !important;
    box-shadow:0 6px 0 #6d28d9 !important;
  }

  body.uni-front:not(.uni-mobile-cart-page) .card.item form{
    margin-top:10px !important;
  }

  body.uni-front:not(.uni-mobile-cart-page) .card.item form button{
    min-height:42px !important;
    border-radius:16px !important;
    padding:10px 18px !important;
    font-weight:950 !important;
  }

  /* Total y botones */
  body.uni-front:not(.uni-mobile-cart-page) .card.total,
  body.uni-front:not(.uni-mobile-cart-page) .cart-total,
  body.uni-front:not(.uni-mobile-cart-page) .total-box{
    max-width:100% !important;
    border-radius:24px !important;
    padding:22px !important;
    background:#fff !important;
    border:1px solid #e7defd !important;
    box-shadow:0 18px 45px rgba(42,32,88,.08) !important;
  }
}