/* Tienda Belfesta — solo lo propio de la tienda (prefijo tn-). El resto (botones, formularios,
   encabezado, pie, tema claro/oscuro) viene de ../styles.css, igual que el sitio principal. */
.tienda{--tn-ok:#2f9e63; --tn-err:#d9534f; --tn-r:18px;}
[data-theme="dark"] .tienda{--tn-ok:#7fc29a; --tn-err:#f08a80;}

.tn-head{padding-bottom:0}
.tn-filters{display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 8px;}
.tn-chip{padding:9px 18px; border-radius:999px; border:1px solid var(--line-strong); font-weight:600; font-size:.9rem; background:transparent; color:var(--ink); cursor:pointer; font-family:inherit;}
.tn-chip.on,.tn-chip:hover{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}

.tn-grid{display:grid; gap:22px; grid-template-columns:1fr;}
@media (min-width:640px){ .tn-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1100px){ .tn-grid{grid-template-columns:repeat(4,1fr);} }
.tn-card{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--tn-r); overflow:hidden; display:flex; flex-direction:column; transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .2s;}
.tn-card:hover{transform:translateY(-5px); border-color:var(--line-strong);}
.tn-card[hidden]{display:none;}
.tn-thumb{aspect-ratio:4/3; background:var(--bg-3); overflow:hidden; position:relative;}
.tn-thumb img{width:100%; height:100%; object-fit:cover; object-position:top; display:block;}
.tn-badge{position:absolute; top:12px; left:12px; background:var(--c); color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:5px 12px; border-radius:999px;}
.tn-body{padding:20px; display:flex; flex-direction:column; flex:1;}
.tn-body h3{font-family:var(--font-display); font-size:1.3rem; line-height:1.15; margin-bottom:6px;}
.tn-body p{font-size:.95rem; color:var(--ink-2); flex:1;}
.tn-price{font-family:var(--font-display); font-weight:800; font-size:1.9rem; margin:16px 0 2px; white-space:nowrap;}
.tn-meta{font-size:.82rem; color:var(--ink-3); margin-bottom:14px;}
.tn-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.tn-soon{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin-top:20px;}
.tn-soon div{border:1.5px dashed var(--line-strong); border-radius:14px; padding:18px; text-align:center; color:var(--ink-2); font-weight:600;}
.tn-soon small{display:block; color:var(--ink-3); font-weight:400; margin-top:2px;}

.tn-narrow{max-width:640px; margin-inline:auto;}
.tn-summary{display:flex; gap:16px; align-items:center; background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:24px;}
.tn-summary img{width:84px; height:84px; border-radius:10px; object-fit:cover; object-position:top; flex:none;}
.tn-summary h3{font-family:var(--font-display); font-size:1.1rem; line-height:1.2;}
.tn-summary small{color:var(--ink-3);}
.tn-summary .tn-price{font-size:1.5rem; margin:2px 0 0;}
.tn-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.tn-aviso{border-radius:12px; padding:14px 16px; font-size:.95rem; border:1px solid var(--line-strong); background:var(--bg-2);}
.tn-aviso.err{border-color:var(--tn-err); color:var(--ink);} .tn-aviso.ok{border-color:var(--tn-ok); color:var(--ink);}
.tn-help{font-size:.85rem; color:var(--ink-3);}

.tn-pago{display:grid; gap:26px; max-width:920px; margin:0 auto;}
@media (min-width:820px){ .tn-pago{grid-template-columns:1fr 1fr; align-items:start;} }
.tn-box{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--tn-r); padding:clamp(22px,3.4vw,32px);}
.tn-box h2{font-family:var(--font-display); font-size:1.5rem; margin-bottom:14px;}
.tn-center{text-align:center;}
.tn-qr{width:min(280px,100%); margin:0 auto 14px; border-radius:16px; padding:10px; background:#fff; display:block;}
.tn-amount{font-family:var(--font-display); font-weight:800; font-size:2.6rem; line-height:1.1;}
.tn-ref{display:inline-block; background:var(--bg-3); border-radius:8px; padding:3px 10px; font-weight:700; letter-spacing:.04em;}
.tn-steps{display:grid; gap:10px; margin:14px 0 20px; padding-left:20px; color:var(--ink-2); font-size:.95rem;}
.tn-state{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 22px;}
.tn-state span{font-size:.78rem; font-weight:600; padding:6px 12px; border-radius:999px; background:var(--bg-3); color:var(--ink-3);}
.tn-state span.on{background:var(--accent); color:var(--accent-ink);}
.tn-state span.done{background:var(--accent-soft); color:var(--tn-ok);}
.tienda .btn-wa{background:#25c866; color:#06210f; border-color:transparent;}
.tienda .btn-wa:hover{filter:brightness(1.06);}
.tienda input[type=file]{padding:12px;}


/* ---------- Extras ---------- */
.tn-extras{border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin:0 0 22px; background:var(--bg-2);}
.tn-extras legend{padding:0 8px; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);}
.tn-extra{display:flex; gap:12px; align-items:flex-start; padding:10px 0; cursor:pointer;}
.tn-extra + .tn-extra{border-top:1px solid var(--line);}
.tn-extra input{margin-top:5px; width:18px; height:18px; accent-color:var(--accent); flex:none;}
.tn-extra strong{font-weight:700;} .tn-extra em{font-style:normal; color:var(--accent); font-weight:700; white-space:nowrap;}
.tn-extra small{display:block; color:var(--ink-3); margin-top:3px; line-height:1.45;}
.tn-desglose{list-style:none; margin:14px 0 0; padding:12px 0 0; border-top:1px solid var(--line); text-align:left; font-size:.92rem; color:var(--ink-2);}
.tn-desglose li{display:flex; justify-content:space-between; gap:12px; padding:3px 0;}
.tn-extras-lista{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:28px;}
.tn-extra-card{border:1px solid var(--line); border-radius:14px; padding:20px; background:var(--bg-2);}
.tn-extra-card h3{font-family:var(--font-display); font-size:1.1rem; line-height:1.25;} .tn-extra-card p{color:var(--ink-2); margin:8px 0 0; font-size:.95rem;} .tn-extra-card small{color:var(--ink-3);}