/* ============================================================
   TheTryck · Cesta compartida (estilos)
   Neutro a propósito: hereda el color de la página con las
   variables --tt-cesta-*, para que valga igual en el granate de
   Company que en el rojo de Clothes o Ciclorama.
   ============================================================ */
:root{
  --tt-cesta-fondo:#120607;
  --tt-cesta-linea:rgba(255,255,255,.16);
  --tt-cesta-acento:#7f1020;
  --tt-cesta-acento-vivo:#9a1428;
  --tt-cesta-texto:#ffffff;
  --tt-cesta-suave:#c9c0b7;
}

/* botón flotante */
.tt-fab{position:fixed;right:24px;bottom:24px;z-index:150;
  width:58px;height:58px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.45);background:var(--tt-cesta-acento);
  color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.55);transition:.35s cubic-bezier(.16,1,.3,1)}
.tt-fab:hover{transform:translateY(-3px);border-color:#fff}
.tt-fab svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.tt-fab .tt-num{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;
  border-radius:999px;background:#fff;color:var(--tt-cesta-acento);
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:11px;font-weight:700}
.tt-fab.vacia .tt-num{display:none}

/* velo y panel */
.tt-velo{position:fixed;inset:0;z-index:190;background:rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transition:opacity .4s}
.tt-velo.on{opacity:1;pointer-events:auto}

.tt-panel{position:fixed;top:0;right:0;z-index:200;
  width:min(420px,94vw);height:100dvh;display:flex;flex-direction:column;
  padding:24px 24px 20px;background:var(--tt-cesta-fondo);
  border-left:1px solid var(--tt-cesta-acento);color:var(--tt-cesta-texto);
  transform:translateX(105%);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.tt-panel.abierta{transform:none}
.tt-panel h3{display:flex;align-items:center;justify-content:space-between;
  font-family:'Playfair Display',serif;font-weight:600;font-size:19px;
  letter-spacing:.08em;text-transform:uppercase;margin:0}
.tt-cerrar{background:none;border:none;color:inherit;font-size:24px;line-height:1;
  cursor:pointer;opacity:.7;transition:.25s;font-family:inherit}
.tt-cerrar:hover{opacity:1;color:#e8b7b9}

.tt-items{flex:1;overflow-y:auto;margin:20px 0;display:flex;flex-direction:column;gap:12px}
.tt-vacia{margin:auto 0;text-align:center;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tt-cesta-suave)}

.tt-item{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border:1px solid var(--tt-cesta-linea)}
.tt-item-info b{display:block;font-size:13.5px;letter-spacing:.03em;line-height:1.35}
.tt-item-info span{display:block;font-size:11.5px;color:var(--tt-cesta-suave)}
.tt-item-ctrl{display:flex;align-items:center;gap:10px;flex-shrink:0}
.tt-item-ctrl button{width:26px;height:26px;border-radius:50%;cursor:pointer;
  border:1px solid var(--tt-cesta-linea);background:none;color:inherit;
  font-family:inherit;font-size:15px;line-height:1;transition:.3s}
.tt-item-ctrl button:hover{background:var(--tt-cesta-acento);border-color:var(--tt-cesta-acento)}
.tt-item-ctrl span{min-width:16px;text-align:center;font-size:14px}

.tt-total{display:flex;justify-content:space-between;align-items:baseline;
  padding-top:16px;border-top:1px solid var(--tt-cesta-linea);
  font-family:'Playfair Display',serif;font-weight:600;font-size:19px;letter-spacing:.03em}

.tt-acciones{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.tt-btn{display:inline-flex;align-items:center;justify-content:center;
  padding:14px 24px;border-radius:999px;cursor:pointer;text-decoration:none;
  border:1px solid rgba(255,255,255,.5);background:none;color:inherit;
  font-family:inherit;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;
  transition:.35s cubic-bezier(.16,1,.3,1)}
.tt-btn:hover{background:var(--tt-cesta-acento);border-color:var(--tt-cesta-acento);color:#fff}
.tt-btn--pagar{background:var(--tt-cesta-acento);border-color:var(--tt-cesta-acento)}
.tt-btn--pagar:hover{background:var(--tt-cesta-acento-vivo);border-color:var(--tt-cesta-acento-vivo)}
.tt-btn[disabled]{opacity:.6;cursor:default}

.tt-aviso:empty{display:none}
.tt-aviso{margin-top:12px;padding:10px 12px;font-size:12.5px;line-height:1.5;
  border:1px solid var(--tt-cesta-acento);background:rgba(127,16,32,.2)}
.tt-nota{margin-top:12px;text-align:center;font-size:11.5px;color:var(--tt-cesta-suave)}

@media(max-width:560px){
  .tt-fab{right:16px;bottom:16px;width:52px;height:52px}
}