/* Tiendas Smiley — Checkout. Mismos tokens del Portal (#009421 / #007a1b / #e30613). */
.stc,.stc-drawer,.stc-bag,.stc-add{
  --st-verde:#009421; --st-verde-osc:#007a1b; --st-verde-suave:#e8f6ea; --st-rojo:#e30613;
  --st-tinta:#14231a; --st-gris:#5b6660; --st-linea:#e3e8e2; --st-fondo:#f5f6f3;
}
/* Ícono de bolsa con contador (header) */
.stc-bag{position:relative;display:inline-grid;place-items:center;width:48px;height:48px;padding:0;border:0;background:transparent;cursor:pointer;border-radius:12px}
.stc-bag img{width:32px;height:32px;display:block}
.stc-bag:hover{background:var(--st-verde-suave)}
.stc-bag:focus-visible{outline:3px solid var(--st-tinta);outline-offset:2px}
.stc-bag__n{position:absolute;top:2px;right:0;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--st-rojo);color:#fff;font:700 .75rem/20px system-ui,sans-serif;text-align:center}
.stc-bag__n[hidden]{display:none}
/* Botón secundario "Me interesa" cuando hay bolsa */
.stc-add~[data-st-open-form]{background:#fff;color:var(--st-verde-osc);border-color:var(--st-verde-osc)}
.stc-add~[data-st-open-form]:hover{background:var(--st-verde-suave)}
.stc-add.is-added{background:#00651a}

/* Cajón */
.stc-drawer{position:fixed;inset:0;z-index:99998;color:var(--st-tinta)}
.stc-drawer[hidden]{display:none}
.stc-drawer__ov{position:absolute;inset:0;background:rgba(10,18,12,.55)}
.stc-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,100vw);background:#fff;display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(0,0,0,.2);animation:stc-in .22s ease}
@keyframes stc-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.stc-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--st-linea)}
.stc-drawer__head h2{margin:0;font-size:1.2rem}
.stc-x{width:44px;height:44px;border:0;background:transparent;font-size:1.8rem;cursor:pointer;border-radius:50%;color:var(--st-tinta)}
.stc-x:hover{background:var(--st-fondo)}
.stc-drawer__body{flex:1;overflow:auto;padding:12px 18px}
.stc-drawer__foot{padding:14px 18px 18px;border-top:1px solid var(--st-linea);display:grid;gap:10px}
.stc-drawer__foot .st-btn{width:100%}
.stc-sub{display:flex;justify-content:space-between;font-weight:800;font-size:1.1rem}
.stc-note{margin:0;font-size:.8rem;color:var(--st-gris)}
.stc-from{margin:0 0 8px;font-size:.9rem;color:var(--st-gris)}
.stc-item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--st-linea);align-items:start}
.stc-item img,.stc-item__ph{width:64px;aspect-ratio:3/4;object-fit:cover;border-radius:8px;background:var(--st-fondo);display:block}
.stc-item__t{font-weight:700;line-height:1.25;margin:0}
.stc-item__v{margin:2px 0 6px;font-size:.85rem;color:var(--st-gris)}
.stc-qty{display:inline-flex;align-items:center;border:1.5px solid var(--st-linea);border-radius:999px}
.stc-qty button{width:36px;height:36px;border:0;background:transparent;font-size:1.1rem;cursor:pointer;color:var(--st-tinta);border-radius:50%}
.stc-qty button:hover{background:var(--st-fondo)}
.stc-qty span{min-width:24px;text-align:center;font-weight:700}
.stc-item__p{font-weight:800;text-align:right}
.stc-rm{display:block;margin-top:6px;border:0;background:none;color:var(--st-gris);text-decoration:underline;cursor:pointer;font-size:.8rem;padding:4px 0}
.stc-empty{text-align:center;padding:36px 8px;color:var(--st-gris)}
.stc-empty img{width:72px;opacity:.9;margin-bottom:8px}
.stc-drawer button:focus-visible,.stc-drawer a:focus-visible{outline:3px solid var(--st-tinta);outline-offset:2px}
body.stc-open{overflow:hidden}

/* Checkout y pedido */
.stc{max-width:1100px;margin:0 auto;padding:0 16px 40px;box-sizing:border-box}
.stc *{box-sizing:border-box}
.stc__title{font-size:clamp(1.5rem,2.4vw,2rem);margin:16px 0}
.stc__cols{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:32px;align-items:start}
.stc__cols[hidden],.stc__empty[hidden]{display:none}
.stc__empty{text-align:center;padding:40px 16px;background:var(--st-fondo);border-radius:16px}
.stc__form fieldset{border:1px solid var(--st-linea);border-radius:14px;padding:16px;margin:0 0 16px;display:grid;gap:12px}
.stc__form legend{font-weight:800;padding:0 6px}
.stc label{display:grid;gap:4px;font-weight:600;font-size:.92rem}
.stc input[type=text],.stc input[type=email],.stc input[type=tel],.stc textarea{width:100%;min-height:46px;border:1.5px solid #cfd6cf;border-radius:10px;padding:10px 12px;font:inherit;background:#fff;color:var(--st-tinta)}
.stc input:focus-visible,.stc textarea:focus-visible{outline:3px solid var(--st-tinta);outline-offset:1px}
.stc .st-hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.stc__pay-opts{display:grid;gap:10px}
.stc__opt{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;border:2px solid var(--st-linea);border-radius:12px;padding:14px;cursor:pointer;font-weight:600}
.stc__opt:has(input:checked){border-color:var(--st-verde-osc);background:var(--st-verde-suave)}
.stc__opt small{grid-column:2;font-weight:400;color:var(--st-gris)}
.stc__submit{width:100%;margin:6px 0 10px}
.stc__submit:disabled{opacity:.6;cursor:not-allowed}
.stc__msg{margin:0 0 8px;font-weight:700;min-height:1.3em}.stc__msg.is-err{color:var(--st-rojo)}.stc__msg.is-ok{color:var(--st-verde-osc)}
.stc__hint{margin:0;font-size:.85rem;color:var(--st-gris)}
.stc__avisos p{margin:0 0 8px;padding:10px 14px;border-radius:10px;background:#fff4d6;font-weight:600}
.stc__sum{position:sticky;top:16px;background:var(--st-fondo);border-radius:18px;padding:20px}
.stc__sum h2{margin:0 0 4px;font-size:1.15rem}
.stc__marca{margin:0 0 10px;color:var(--st-gris)}
.stc__lines .stc-item{border-bottom-color:#dfe5de}
.stc__total{display:flex;justify-content:space-between;font-size:1.25rem;font-weight:800;margin:14px 0 0}
.stc__ok{padding:12px 16px;border-radius:10px;background:var(--st-verde-suave);color:var(--st-verde-osc);font-weight:700}
.stc__estado{display:inline-block;padding:4px 14px;border-radius:999px;background:var(--st-fondo);font-weight:800;margin:0 0 10px}
.stc__estado--pagado,.stc__estado--entregado{background:var(--st-verde-suave);color:var(--st-verde-osc)}
.stc__estado--cancelado{background:#fde8e8;color:var(--st-rojo)}
.stc__estado--pendiente_pago,.stc__estado--despachado{background:#fff4d6;color:#7a5200}
.stc__box{border:1px solid var(--st-linea);border-radius:14px;padding:16px 18px;margin:14px 0}
.stc__box h2{margin:0 0 8px;font-size:1.1rem}
.stc__box dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 12px}
.stc__box dt{color:var(--st-gris)}.stc__box dd{margin:0;font-weight:700}
.stc__tabla{width:100%;border-collapse:collapse;margin:14px 0}
.stc__tabla th,.stc__tabla td{padding:10px 8px;border-bottom:1px solid var(--st-linea);text-align:left}
.stc__tabla td:last-child,.stc__tabla th:last-child{text-align:right}
.stc__acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.stc-danger{background:#fff;color:var(--st-rojo);border-color:var(--st-rojo)}
@media (max-width:900px){
  .stc__cols{grid-template-columns:1fr}
  .stc__sum{position:static;order:-1}
}
@media (prefers-reduced-motion:reduce){.stc-drawer__panel{animation:none}}