/* Carrito lateral.
   Los colores salen de las variables del tema; el dorado fuerte es el que
   aguanta texto blanco encima. */

/* El recorte no es decorativo: cerrado, el panel está aparcado fuera con un
   translateX, y sin recortarlo aquí hay navegadores —Safari de iPhone el
   primero— que cuentan ese trozo como ancho de la página y dejan la pantalla
   moviéndose de lado.
   Y tiene que ser "clip", no "hidden": hidden convierte esto en una caja con
   scroll, y al dar el foco al botón de cerrar el navegador la desplazaba para
   enseñarlo —el panel todavía estaba fuera— y la entrada pegaba un salto.
   El hidden de delante es el respaldo para quien no entienda clip. */
.trm-cl {
    position: fixed;
    inset: 0;
    z-index: 999999;
    overflow: hidden;
    overflow: clip;
    visibility: hidden;
    pointer-events: none;
    /* Al cerrar, esconderse al final y no de golpe: sin este retraso el panel
       y el velo desaparecen en el primer fotograma y la salida no se ve, que
       es lo que dejaba el cierre a medias. */
    transition: visibility 0s linear 0.3s;
}

.trm-cl.is-abierto {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.trm-cl__fondo {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.trm-cl.is-abierto .trm-cl__fondo {
    opacity: 1;
}

.trm-cl__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 420px;
    max-width: 100%;
    background: #fff;
    box-shadow: -8px 0 34px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform 0.28s ease;
}

.trm-cl.is-abierto .trm-cl__panel {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .trm-cl__fondo,
    .trm-cl__panel {
        transition: none;
    }
}

.trm-cl__cuerpo {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    font-family: var(--tipo1, inherit);
    color: var(--neutro3, #1a1a1a);
}

body.trm-cl-bloqueado {
    overflow: hidden;
}

/* ── Cabecera ────────────────────────────────────────────────────────────── */

.trm-cl__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid #eee;
}

.trm-cl__titulo {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--neutro2, #010101);
}

.trm-cl__cuenta {
    color: var(--neutro4, #666);
    font-weight: 500;
}

.trm-cl__cerrar {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 6px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--neutro3, #1a1a1a);
    cursor: pointer;
    line-height: 0;
}

.trm-cl__cerrar:hover {
    background: #f3f3f3;
}

.trm-cl__cerrar svg {
    width: 100%;
    height: 100%;
}

/* ── Zona con scroll ─────────────────────────────────────────────────────── */

.trm-cl__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 22px;
}

.trm-cl.is-cargando .trm-cl__scroll {
    opacity: 0.45;
    pointer-events: none;
}

.trm-cl__esperando {
    margin: 30px 0;
    text-align: center;
    color: var(--neutro4, #666);
}

.trm-cl__esperando a {
    color: var(--trm-oro-fuerte, #b8933f);
    text-decoration: underline;
}

/* ── Envío gratis ────────────────────────────────────────────────────────── */

/* Los huecos de arriba y abajo los piden las marcas: son de 26px sobre una
   barra de 6, así que sobresalen 10 por cada lado. */
.trm-cl__envio {
    margin: 0 0 28px;
}

.trm-cl__envio p {
    margin: 0 0 16px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--neutro4, #666);
}

.trm-cl__envio strong {
    color: var(--neutro2, #010101);
    font-weight: 700;
}

/* Los 13px de los lados son el sitio de las marcas: van centradas en su punto,
   y la del final cae justo en el borde. Sin ese hueco se saldrían del panel, y
   como la zona con scroll recorta también a lo ancho, quedarían cortadas. */
.trm-cl__barra {
    display: block;
    position: relative;
    height: 6px;
    margin: 0 13px;
    border-radius: 3px;
    background: #ececec;
}

.trm-cl__barra-hecho {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--canun-brand, #e3b576);
    transition: width 0.3s ease;
}

/* Las metas: el regalo donde caiga y el envío al final de la línea. En gris
   mientras no se llegan, encendidas después. */
.trm-cl__meta {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #e4e4e4;
    color: #9a9a9a;
    overflow: hidden;
    transform: translate(-50%, -50%);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.trm-cl__meta svg {
    width: 13px;
    height: 13px;
}

.trm-cl__meta img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.trm-cl__meta.is-hecha {
    background: var(--trm-oro-fuerte, #b8933f);
    color: #fff;
}

.trm-cl__meta.is-hecha img {
    filter: none;
    opacity: 1;
}

.trm-cl__envio--logrado .trm-cl__meta.is-hecha {
    background: #4a8f52;
}

.trm-cl__envio--logrado .trm-cl__barra-hecho {
    background: #4a8f52;
}

.trm-cl__etiqueta {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--papel-calido, #faf8f5);
    border: 1px solid var(--canun-brand, #e3b576);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--trm-oro-fuerte, #b8933f);
}

.trm-regalo-gratis {
    color: #4a8f52;
}

/* ── Líneas ──────────────────────────────────────────────────────────────── */

.trm-cl__item {
    display: grid;
    grid-template-columns: 74px 1fr 28px;
    gap: 14px;
    align-items: start;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
}

.trm-cl__foto img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

.trm-cl__nombre {
    margin: 0 0 4px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
}

.trm-cl__nombre a {
    color: var(--neutro2, #010101);
}

.trm-cl__nombre a:hover {
    color: var(--trm-oro-fuerte, #b8933f);
}

.trm-cl__variacion,
.trm-cl__variacion p {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--neutro4, #666);
}

.trm-cl__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.trm-cl__cantidad {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 20px;
    overflow: hidden;
}

.trm-cl__cantidad button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--neutro3, #1a1a1a);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.trm-cl__cantidad button:hover:not([disabled]) {
    background: #f5f5f5;
}

.trm-cl__cantidad button[disabled] {
    opacity: 0.35;
    cursor: default;
}

.trm-cl__cantidad span {
    min-width: 24px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
}

.trm-cl__precio {
    margin: 0;
    text-align: right;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--neutro2, #010101);
}

.trm-cl__precio del {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: #999;
}

.trm-cl__quitar {
    width: 26px;
    height: 26px;
    padding: 4px;
    border: 0;
    background: transparent;
    color: #aaa;
    cursor: pointer;
    line-height: 0;
}

.trm-cl__quitar:hover {
    color: #c0392b;
}

.trm-cl__quitar svg {
    width: 100%;
    height: 100%;
}

/* ── Cómpralo con ────────────────────────────────────────────────────────── */

.trm-cl__cruzados {
    margin-top: 22px;
}

.trm-cl__rotulo {
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--trm-oro-fuerte, #b8933f);
}

.trm-cl__cruzado {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
}

.trm-cl__cruzado-foto img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

.trm-cl__cruzado-datos a {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--neutro2, #010101);
}

.trm-cl__cruzado-precio {
    font-size: 0.8rem;
    color: var(--neutro4, #666);
}

.trm-cl__cruzado-precio del {
    color: #aaa;
}

.trm-cl__cruzado-btn {
    padding: 7px 14px;
    border: 1px solid var(--trm-oro-fuerte, #b8933f);
    border-radius: 20px;
    background: transparent;
    color: var(--trm-oro-fuerte, #b8933f);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.trm-cl__cruzado-btn:hover {
    background: var(--trm-oro-fuerte, #b8933f);
    color: #fff;
}

/* ── Vacío ───────────────────────────────────────────────────────────────── */

.trm-cl__vacio {
    padding: 40px 0;
    text-align: center;
}

.trm-cl__vacio p {
    margin: 0 0 18px;
    color: var(--neutro4, #666);
}

.trm-cl__seguir {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 4px;
    background: var(--trm-oro-fuerte, #b8933f);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.trm-cl__seguir:hover {
    color: #fff;
    filter: brightness(0.94);
}

/* ── Pie ─────────────────────────────────────────────────────────────────── */

.trm-cl__pie {
    flex-shrink: 0;
    padding: 16px 22px 20px;
    border-top: 1px solid #eee;
    background: #fff;
}

.trm-cl__fila-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 6px;
    font-size: 0.88rem;
    color: var(--neutro4, #666);
}

.trm-cl__fila-total span:last-child {
    font-weight: 700;
    color: var(--neutro2, #010101);
}

.trm-cl__fila-total--descuento span:last-child {
    color: #4a8f52;
}

.trm-cl__pagar {
    display: block;
    margin-top: 12px;
    padding: 15px 18px;
    border-radius: 4px;
    background: var(--trm-oro-fuerte, #b8933f);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-align: center;
}

.trm-cl__pagar:hover,
.trm-cl__pagar:focus {
    color: #fff;
    filter: brightness(0.94);
}

.trm-cl__pagar span {
    font-weight: 700;
}

.trm-cl__ver {
    display: block;
    margin-top: 10px;
    font-size: 0.85rem;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--neutro4, #666);
}

.trm-cl__ver:hover {
    color: var(--trm-oro-fuerte, #b8933f);
}

@media (max-width: 480px) {
    .trm-cl__scroll,
    .trm-cl__cabecera,
    .trm-cl__pie {
        padding-left: 16px;
        padding-right: 16px;
    }

    .trm-cl__item {
        grid-template-columns: 64px 1fr 24px;
        gap: 10px;
    }
}