/* =====================================================================
   ZARAGOZA CFF — Tienda online
   Se carga después de site.css y usa sus variables (--navy, --red, --gold,
   --f-display…). Todo cuelga de .sx-* para no tocar el resto de la web.
   ===================================================================== */

.shop-page{ background:var(--paper); }

/* ---------------------------------------------------- botón del carrito */
.cartbtn{ position:relative; display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  color:var(--navy); box-shadow:inset 0 0 0 2px var(--line); transition:box-shadow .25s var(--ease), color .25s; flex:none; }
.cartbtn svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cartbtn:hover{ color:var(--red); box-shadow:inset 0 0 0 2px var(--red); }
.cartbtn__n{ position:absolute; top:-4px; right:-5px; min-width:20px; height:20px; padding:0 5px; border-radius:999px;
  background:var(--red); color:#fff; font-size:.7rem; font-weight:800; line-height:20px; text-align:center;
  box-shadow:0 0 0 2px #fff; }
@media (max-width:440px){ .cartbtn{ width:38px; height:38px; } }

/* ----------------------------------------------------------- generales */
/* Lo que el JS oculta con `hidden` se queda oculto aunque una regla le dé display. */
.sx [hidden]{ display:none !important; }
.sx{ min-height:60vh; padding-bottom:clamp(3.5rem,8vw,6rem); }
.sx-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1rem,4vw,2.4rem); }
.sx-wrap--top{ padding-top:clamp(6.2rem,9vw,7.6rem); }
.sx-wrap--narrow{ max-width:880px; }
.sx-sub{ padding-bottom:1.6rem; }
.sx-sub h1{ font-size:clamp(2.6rem,7vw,4.6rem); }

.sx-test{ position:fixed; left:0; right:0; bottom:0; z-index:950; padding:.55rem 1rem; text-align:center;
  background:var(--gold); color:var(--navy); font-weight:800; font-size:.78rem; letter-spacing:.04em;
  box-shadow:0 -6px 20px -10px rgba(11,28,70,.35); }
body:has(.sx-test:not([hidden])){ padding-bottom:2.4rem; }

/* Tienda cerrada: oculta hasta que tienda.js sabe si es la vista previa del panel. */
html[data-gate] body{ visibility:hidden; }
/* Vista previa del panel: su aviso y el de pruebas, apilados abajo. */
.sx-bars{ position:fixed; left:0; right:0; bottom:0; z-index:950; box-shadow:0 -6px 20px -10px rgba(11,28,70,.35); }
.sx-bars .sx-test{ position:static; box-shadow:none; }
.sx-preview{ padding:.55rem 1rem; text-align:center; background:var(--navy); color:#fff; font-size:.78rem; line-height:1.4; }
.sx-preview b{ color:var(--gold); text-transform:uppercase; letter-spacing:.06em; }
body:has(.sx-bars){ padding-bottom:8rem; }

.sx-loading{ display:flex; align-items:center; gap:.7rem; padding:3rem 0; color:var(--txt-dim); font-weight:600; }
.sx-spin{ width:22px; height:22px; border-radius:50%; border:3px solid rgba(226,0,26,.2); border-top-color:var(--red);
  animation:sxspin .8s linear infinite; flex:none; }
@keyframes sxspin{ to{ transform:rotate(360deg); } }

.sx-empty{ text-align:center; padding:clamp(3rem,8vw,5rem) 1rem; }
.sx-empty__t{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(1.6rem,4vw,2.4rem); color:var(--navy); line-height:1.05; }
.sx-empty__d{ color:var(--txt-dim); margin:.6rem auto 1.6rem; max-width:46ch; }

.sx-card{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:clamp(1.05rem,2.4vw,1.45rem);
  box-shadow:0 1px 0 rgba(11,28,70,.04), 0 18px 40px -34px rgba(11,28,70,.45); }
.sx-card h2{ font-family:var(--f-display); font-weight:400; text-transform:uppercase; letter-spacing:.02em;
  font-size:1.25rem; color:var(--navy); margin-bottom:.7rem; }

.sx-h2{ font-family:var(--f-display); font-weight:400; text-transform:uppercase; color:var(--navy);
  font-size:clamp(1.6rem,3.2vw,2.3rem); line-height:1; }
.sx-label{ display:block; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-dim); margin:1.1rem 0 .5rem; }
.sx-dim{ color:var(--txt-dim); }
.sx-red{ color:var(--red); }
.sx-note{ font-size:.82rem; color:var(--txt-dim); margin-top:.7rem; }
.sx-note--center{ text-align:center; }
.sx-center{ text-align:center; margin-top:2rem; }
.sx-link{ background:none; border:0; padding:0; font:inherit; font-size:.84rem; font-weight:700; color:var(--txt-dim); cursor:pointer;
  text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; }
.sx-link:hover{ color:var(--red); text-decoration-color:currentColor; }
.sx-link--center{ display:block; text-align:center; margin-top:.9rem; }
.sx-back{ display:inline-block; font-size:.82rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--txt-dim); margin-bottom:1rem; }
.sx-back:hover{ color:var(--red); }
.sx-tag{ display:inline-block; font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  background:var(--gold); color:var(--navy); padding:.12rem .45rem; border-radius:4px; vertical-align:2px; }
.sx-alert{ margin:.9rem 0; padding:.75rem .9rem; border-radius:8px; background:rgba(226,0,26,.08); color:var(--red-d); font-size:.86rem; font-weight:600; }
.sx-noimg{ width:38%; max-width:90px; fill:none; stroke:rgba(11,28,70,.22); stroke-width:1.6; stroke-linejoin:round; }

.btn--sm{ padding:.6rem 1.05rem; font-size:.72rem; }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.btn:disabled::before{ display:none; }

/* --------------------------------------------------------------- hero */
.sx-hero{ position:relative; overflow:hidden; padding:clamp(7.4rem,12vw,9.5rem) clamp(1rem,4vw,2.4rem) clamp(2.6rem,6vw,4rem);
  background:radial-gradient(800px 420px at 85% 10%, rgba(244,178,35,.2), transparent 60%),
             radial-gradient(700px 500px at 0% 100%, rgba(18,53,140,.55), transparent 65%), var(--navy); color:#fff; }
.sx-hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
  background:repeating-linear-gradient(90deg,var(--red) 0 34px,var(--gold) 34px 68px); }
.sx-hero__inner{ position:relative; max-width:var(--maxw); margin:0 auto; }
.sx-hero__eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-weight:800; font-size:.76rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); }
.sx-hero__eyebrow .eyebrow__bar{ background:var(--gold); }
.sx-hero h1{ font-family:var(--f-display); font-weight:400; text-transform:uppercase; line-height:.92;
  font-size:clamp(3rem,9vw,6.6rem); margin-top:.7rem; }
.sx-hero h1 em{ font-family:var(--f-serif); font-style:italic; font-weight:600; text-transform:none; color:var(--gold); }
.sx-hero__lead{ margin-top:1rem; max-width:58ch; color:rgba(255,255,255,.78); font-size:clamp(.98rem,1.4vw,1.1rem); }

/* -------------------------------------------------------- catálogo */
.sx-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:clamp(1.6rem,4vw,2.4rem) 0 .4rem; }
.sx-chips .chip{ display:inline-flex; align-items:center; padding:.55rem 1rem; border:2px solid var(--line); border-radius:999px; background:#fff; color:var(--navy); }
.sx-sec{ margin-top:clamp(2rem,5vw,3.2rem); }
.sx-sec__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.2rem;
  padding-bottom:.8rem; border-bottom:2px solid var(--navy); }
.sx-sec__desc{ color:var(--txt-dim); margin:-.6rem 0 1.2rem; font-size:.95rem; }
.sx-sec__head .sx-sec__desc{ margin:.35rem 0 0; }
.sx-sort{ display:flex; align-items:center; gap:.7rem; font-size:.84rem; color:var(--txt-dim); font-weight:600; }
.sx-sort select{ font:inherit; font-weight:700; color:var(--navy); padding:.5rem .7rem; border:2px solid var(--line); border-radius:8px; background:#fff; }

.sx-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:clamp(.9rem,2vw,1.5rem); }
.sx-grid--4{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
@media (max-width:560px){ .sx-grid, .sx-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; } }

.sx-pcard{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.sx-pcard:hover{ transform:translateY(-4px); border-color:transparent; box-shadow:0 22px 44px -26px rgba(11,28,70,.55); }
.sx-pcard__img{ position:relative; display:grid; place-items:center; aspect-ratio:1/1; background:var(--paper-2); overflow:hidden; }
.sx-pcard__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.sx-pcard:hover .sx-pcard__img img{ transform:scale(1.05); }
.sx-pcard.is-out .sx-pcard__img img{ filter:grayscale(.85); opacity:.6; }
.sx-pcard__b{ display:flex; flex-direction:column; gap:.3rem; padding:.95rem 1rem 1.1rem; flex:1; }
.sx-pcard__cat{ font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--red); }
.sx-pcard__name{ font-weight:800; color:var(--navy); line-height:1.25; flex:1; transition:color .25s; }
.sx-pcard:hover .sx-pcard__name{ color:var(--red); }
.sx-pcard__sum{ font-size:.8rem; color:var(--txt-dim); line-height:1.4; }
.sx-price{ font-family:var(--f-display); font-size:1.35rem; color:var(--red); letter-spacing:.01em; line-height:1.1; }
.sx-price s, .sx-info__price s{ font-family:var(--f-body); font-size:.8rem; font-weight:600; color:var(--txt-dim); margin-left:.3rem; }
@media (max-width:560px){ .sx-pcard__b{ padding:.7rem .75rem .85rem; } .sx-pcard__name{ font-size:.9rem; } .sx-price{ font-size:1.15rem; } }

.sx-badge{ position:absolute; top:.7rem; left:.7rem; z-index:2; padding:.3rem .6rem; border-radius:999px; font-size:.64rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; background:rgba(255,255,255,.94); color:var(--gold-tx); box-shadow:0 4px 12px -6px rgba(11,28,70,.4); }
.sx-badge--sale{ background:var(--red); color:#fff; }
.sx-badge--out{ background:var(--navy); color:#fff; }
.sx-badge--pack{ background:var(--gold); color:var(--navy); }

/* ------------------------------------------------------------ ficha */
.sx-crumb{ font-size:.8rem; color:var(--txt-dim); margin-bottom:1.2rem; font-weight:600; }
.sx-crumb a{ color:var(--red); font-weight:800; }
.sx-crumb span{ margin:0 .35rem; }
.sx-prod{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:clamp(1.6rem,4vw,3.4rem); align-items:start; }
@media (max-width:900px){ .sx-prod{ grid-template-columns:1fr; } }

.sx-gal{ position:sticky; top:96px; }
@media (max-width:900px){ .sx-gal{ position:static; } }
.sx-gal__main{ position:relative; display:grid; place-items:center; aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:var(--paper-2); }
.sx-gal__main img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .25s; }
.sx-gal__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.88); color:var(--navy); font-size:1.5rem; line-height:1; box-shadow:0 6px 18px -8px rgba(11,28,70,.5); }
.sx-gal__nav:hover{ background:var(--red); color:#fff; }
.sx-gal__nav--prev{ left:.8rem; } .sx-gal__nav--next{ right:.8rem; }
.sx-gal__count{ position:absolute; top:.8rem; right:.8rem; z-index:2; padding:.25rem .6rem; border-radius:999px; background:rgba(11,28,70,.65); color:#fff; font-size:.72rem; font-weight:700; }
.sx-gal__thumbs{ display:flex; gap:.55rem; margin-top:.75rem; overflow-x:auto; scrollbar-width:none; padding:2px; }
.sx-gal__thumbs::-webkit-scrollbar{ display:none; }
.sx-gal__thumbs button{ flex:none; width:72px; height:72px; border-radius:9px; overflow:hidden; border:2px solid transparent; padding:0; cursor:pointer;
  background:var(--paper-2); opacity:.7; transition:opacity .2s, border-color .2s; }
.sx-gal__thumbs button.is-on, .sx-gal__thumbs button:hover{ opacity:1; border-color:var(--red); }
.sx-gal__thumbs img{ width:100%; height:100%; object-fit:cover; }

.sx-info__cat{ font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--red); }
.sx-info__name{ font-family:var(--f-display); font-weight:400; text-transform:uppercase; color:var(--navy);
  font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:.95; margin:.35rem 0 .7rem; }
.sx-info__short{ color:var(--txt); margin-bottom:.8rem; }
.sx-info__price{ font-family:var(--f-display); font-size:clamp(2rem,3.6vw,2.6rem); color:var(--red); line-height:1; margin-top:.6rem; }
.sx-info__vat{ font-size:.78rem; color:var(--txt-dim); margin-top:.45rem; }

.sx-chips2{ display:flex; flex-wrap:wrap; gap:.5rem; }
.sx-size{ min-width:54px; padding:.62rem .85rem; border-radius:8px; border:2px solid var(--line); background:#fff; cursor:pointer;
  font:inherit; font-weight:800; font-size:.86rem; color:var(--navy); transition:border-color .2s, background .2s, color .2s; }
.sx-size small{ font-weight:600; color:var(--txt-dim); }
.sx-size:hover{ border-color:var(--navy); }
.sx-size.is-on{ background:var(--navy); border-color:var(--navy); color:#fff; }
.sx-size.is-on small{ color:rgba(255,255,255,.75); }
.sx-size.is-out{ background:var(--paper-2); color:rgba(11,28,70,.35); text-decoration:line-through; cursor:not-allowed; }
.sx-size.is-out.is-on{ background:var(--paper-3); color:var(--txt-dim); border-color:var(--txt-dim); }

.sx-guide{ margin-top:.9rem; font-size:.88rem; }
.sx-guide summary{ cursor:pointer; font-weight:800; color:var(--navy); }
.sx-guide summary:hover{ color:var(--red); }
.sx-guide div{ margin-top:.6rem; padding:.85rem 1rem; background:var(--paper-2); border-radius:8px; color:var(--txt); }

.sx-buy{ display:flex; align-items:flex-end; gap:.9rem; margin-top:.4rem; flex-wrap:wrap; }
.sx-buy__q .sx-label{ margin-top:1rem; }
.sx-buy__btn{ flex:1; min-width:220px; padding:1.05rem 1.3rem; }
.sx-buy__btn--full{ width:100%; margin-top:1.3rem; }
.sx-step{ display:inline-flex; align-items:stretch; border:2px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; height:48px; }
.sx-step button{ width:42px; border:0; background:none; font-size:1.2rem; font-weight:700; color:var(--navy); cursor:pointer; }
.sx-step button:hover:not(:disabled){ background:var(--paper-2); color:var(--red); }
.sx-step button:disabled{ color:rgba(11,28,70,.25); cursor:not-allowed; }
.sx-step input{ width:46px; border:0; text-align:center; font:inherit; font-weight:800; color:var(--navy); -moz-appearance:textfield; }
.sx-step input::-webkit-inner-spin-button, .sx-step input::-webkit-outer-spin-button{ -webkit-appearance:none; }
.sx-line .sx-step{ height:38px; }
.sx-line .sx-step button{ width:34px; }
.sx-line .sx-step input{ width:38px; }

.sx-feedback{ min-height:1.4em; margin-top:.7rem; font-weight:700; font-size:.9rem; }
.sx-feedback.is-ok{ color:#12734a; }
.sx-feedback.is-err{ color:var(--red-d); }
.sx-feedback a{ color:var(--red); text-decoration:underline; }
.sx-low{ color:var(--gold-tx); font-weight:800; font-size:.86rem; margin-top:.2rem; }
.sx-low::before{ content:"● "; color:var(--gold); }
.sx-desc{ margin-top:1.6rem; }
.sx-desc p{ color:var(--txt); font-size:.95rem; }
.sx-out{ margin-top:1.3rem; background:var(--paper-2); }
.sx-out b{ font-family:var(--f-display); text-transform:uppercase; font-size:1.2rem; color:var(--navy); font-weight:400; }
.sx-packlist{ margin-top:1.2rem; }
.sx-packlist ul{ list-style:none; display:grid; gap:.45rem; }
.sx-packlist li{ font-size:.94rem; }

/* serigrafía */
.sx-ser{ margin-top:1.3rem; border-left:4px solid var(--gold); }
.sx-ser__t{ font-weight:700; color:var(--navy); display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.sx-ser__t b{ color:var(--red); }
.sx-ser__ico{ display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--red); color:#fff; font-size:.85rem; }
.sx-ser__modes{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin-top:.8rem; font-size:.9rem; font-weight:600; }
.sx-ser__modes label{ display:flex; align-items:center; gap:.4rem; cursor:pointer; }
.sx-ser__modes input{ accent-color:var(--red); }
.sx-ser__body{ margin-top:.9rem; }
.sx-ser__body select{ width:100%; }
.sx-ser__custom{ display:grid; grid-template-columns:1fr 110px; gap:.7rem; }
.sx-ser__note{ font-size:.78rem; color:var(--txt-dim); margin-top:.6rem; }

/* ------------------------------------------------------ formularios */
.sx-form{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem 1rem; margin-top:.9rem; }
@media (max-width:620px){ .sx-form{ grid-template-columns:1fr; } }
.sx-field{ display:flex; flex-direction:column; gap:.35rem; position:relative; }
.sx-field--wide{ grid-column:1 / -1; }
.sx-field > span{ font-size:.76rem; font-weight:800; letter-spacing:.04em; color:var(--navy); }
.sx-field > span em{ font-style:normal; color:var(--red); }
.sx-field small{ position:absolute; right:.7rem; bottom:.7rem; font-size:.72rem; color:var(--txt-dim); }
.sx-field input, .sx-field select, .sx-field textarea, .sx-ser__body select, .sx-code input{
  width:100%; font:inherit; font-size:.95rem; color:var(--navy); padding:.72rem .85rem; border:2px solid var(--line); border-radius:8px; background:#fff;
  transition:border-color .2s, box-shadow .2s; }
.sx-field input:focus, .sx-field select:focus, .sx-field textarea:focus, .sx-ser__body select:focus, .sx-code input:focus{
  outline:0; border-color:var(--navy); box-shadow:0 0 0 4px rgba(18,53,140,.12); }
.sx-field.is-invalid input, .sx-field.is-invalid select, .sx-field.is-invalid textarea{ border-color:var(--red); box-shadow:0 0 0 4px rgba(226,0,26,.1); }
.sx-check{ display:flex; align-items:flex-start; gap:.6rem; cursor:pointer; font-size:.9rem; margin-top:.4rem; }
.sx-check input{ width:18px; height:18px; margin-top:.15rem; accent-color:var(--red); flex:none; }
.sx-check a{ color:var(--red); font-weight:700; text-decoration:underline; }
.sx-check.is-invalid span{ color:var(--red-d); }

/* ----------------------------------------------------- carrito/checkout */
.sx-cols{ display:grid; grid-template-columns:minmax(0,1fr) 370px; gap:clamp(1.2rem,3vw,2.2rem); align-items:start; margin-top:.4rem; }
@media (max-width:920px){ .sx-cols{ grid-template-columns:1fr; } }

.sx-lines{ list-style:none; padding:0; }
.sx-line{ display:grid; grid-template-columns:88px minmax(0,1fr) auto; gap:1rem; padding:1.1rem 1.3rem; border-bottom:1px solid var(--line-2); align-items:start; }
.sx-line:last-child{ border-bottom:0; }
.sx-line.is-bad{ background:rgba(226,0,26,.035); }
.sx-line__img{ display:grid; place-items:center; width:88px; height:88px; border-radius:10px; overflow:hidden; background:var(--paper-2); }
.sx-line__img img{ width:100%; height:100%; object-fit:cover; }
.sx-line__name{ font-weight:800; color:var(--navy); line-height:1.3; }
.sx-line__name:hover{ color:var(--red); }
.sx-line__meta{ font-size:.82rem; color:var(--txt-dim); margin-top:.25rem; line-height:1.45; }
.sx-line__unit{ font-size:.8rem; color:var(--txt-dim); margin-top:.25rem; }
.sx-line__err{ font-size:.84rem; color:var(--red-d); font-weight:700; margin-top:.35rem; }
.sx-line__acts{ display:flex; align-items:center; gap:1rem; margin-top:.6rem; flex-wrap:wrap; }
.sx-line__sub{ font-family:var(--f-display); font-size:1.2rem; color:var(--navy); white-space:nowrap; }
@media (max-width:520px){
  .sx-line{ grid-template-columns:68px minmax(0,1fr); padding:1rem; gap:.8rem; }
  .sx-line__img{ width:68px; height:68px; }
  .sx-line__sub{ grid-column:2; }
}

.sx-sum h2{ margin-bottom:1rem; }
.sx-sum--sticky{ position:sticky; top:92px; }
@media (max-width:920px){ .sx-sum--sticky{ position:static; } }
.sx-code{ margin-bottom:1rem; }
.sx-code .sx-label{ margin-top:0; }
.sx-code div{ display:flex; gap:.5rem; align-items:center; }
.sx-code input{ text-transform:uppercase; padding:.6rem .75rem; }
.sx-rows{ display:grid; gap:.55rem; padding-top:.9rem; border-top:1px solid var(--line); }
.sx-rows > div{ display:flex; justify-content:space-between; gap:1rem; font-size:.92rem; }
.sx-rows dt{ color:var(--txt-dim); }
.sx-rows dd{ font-weight:700; color:var(--navy); text-align:right; }
.sx-rows .sx-green dt, .sx-rows .sx-green dd{ color:#12734a; }
.sx-rows .sx-redrow dd{ color:var(--red-d); font-size:.82rem; }
.sx-rows__total{ padding-top:.7rem; margin-top:.2rem; border-top:2px solid var(--navy); align-items:baseline; }
.sx-rows__total dt{ font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.06em; font-size:.82rem; }
.sx-rows__total dd{ font-family:var(--f-display); font-weight:400; font-size:1.9rem; color:var(--red); line-height:1; }
.sx-gap{ font-size:.8rem; color:var(--gold-tx); font-weight:700; background:rgba(244,178,35,.14); padding:.45rem .6rem; border-radius:6px; }
.sx-sum .btn--block{ margin-top:1rem; padding:1.05rem 1rem; }
.sx-legal-check{ margin-top:1.1rem; font-size:.82rem; line-height:1.45; }

.sx-step-card{ margin-bottom:1rem; }
.sx-step-card h2{ margin-bottom:.35rem; }
.sx-opts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.7rem; margin-top:.9rem; }
.sx-opts--col{ grid-template-columns:1fr; }
.sx-opt-card{ position:relative; display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem; border:2px solid var(--line); border-radius:10px;
  cursor:pointer; transition:border-color .2s, background .2s, box-shadow .2s; }
.sx-opt-card:hover{ border-color:rgba(11,28,70,.35); }
.sx-opt-card input{ position:absolute; opacity:0; pointer-events:none; }
.sx-opt-card__ico{ display:grid; place-items:center; width:42px; height:42px; border-radius:9px; background:var(--paper-2); color:var(--navy); flex:none; transition:background .2s, color .2s; }
.sx-opt-card__ico svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sx-opt-card__t{ display:flex; flex-direction:column; flex:1; line-height:1.3; }
.sx-opt-card__t b{ color:var(--navy); font-size:.95rem; }
.sx-opt-card__t small{ color:var(--txt-dim); font-size:.78rem; }
.sx-opt-card__dot{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line); flex:none; position:relative; }
.sx-opt-card:has(input:checked){ border-color:var(--red); background:rgba(226,0,26,.035); box-shadow:0 8px 22px -16px rgba(226,0,26,.6); }
.sx-opt-card:has(input:checked) .sx-opt-card__ico{ background:var(--red); color:#fff; }
.sx-opt-card:has(input:checked) .sx-opt-card__dot{ border-color:var(--red); background:var(--red); }
.sx-opt-card:has(input:checked) .sx-opt-card__dot::after{ content:""; position:absolute; left:6px; top:2px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.sx-opt-card:has(input:focus-visible){ outline:3px solid rgba(18,53,140,.35); outline-offset:2px; }
.sx-pickup{ margin-top:.9rem; padding:.9rem 1rem; background:var(--paper-2); border-radius:10px; font-size:.92rem; border-left:4px solid var(--gold); }

.sx-mini{ list-style:none; display:grid; gap:.8rem; max-height:330px; overflow:auto; margin-bottom:1rem; padding:2px 2px 2px 0; }
.sx-mini li{ display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:.75rem; align-items:center; font-size:.86rem; }
.sx-mini__img{ position:relative; display:grid; place-items:center; width:56px; height:56px; border-radius:9px; background:var(--paper-2); overflow:visible; }
.sx-mini__img img{ width:100%; height:100%; object-fit:cover; border-radius:9px; }
.sx-mini__img i{ position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; border-radius:999px; background:var(--navy); color:#fff;
  font-style:normal; font-size:.68rem; font-weight:800; display:grid; place-items:center; padding:0 5px; }
.sx-mini__img--pack{ background:var(--gold); color:var(--navy); font-weight:800; font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; }
.sx-mini__n{ display:flex; flex-direction:column; color:var(--navy); font-weight:700; line-height:1.3; }
.sx-mini__n small{ font-weight:600; color:var(--txt-dim); font-size:.76rem; }
.sx-mini__n small.sx-red{ color:var(--red); }
.sx-mini li > b{ color:var(--navy); white-space:nowrap; }
.sx-mini--order{ max-height:none; margin-top:.4rem; }

/* ------------------------------------------------------------ pedido */
.sx-state{ display:flex; gap:1rem; align-items:flex-start; padding:1.2rem 1.3rem; border-radius:12px; margin:0 0 1.2rem;
  background:var(--paper-2); border:1px solid var(--line); }
.sx-state > div > b{ font-family:var(--f-display); font-weight:400; text-transform:uppercase; font-size:1.5rem; color:var(--navy); line-height:1.05; }
.sx-state p{ color:var(--txt); margin:.3rem 0 .6rem; }
.sx-state__ico{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--navy); color:#fff; font-size:1.3rem; font-weight:800; flex:none; }
.sx-state--ok{ background:rgba(18,115,74,.07); border-color:rgba(18,115,74,.25); }
.sx-state--ok .sx-state__ico{ background:#12734a; }
.sx-state--ko{ background:rgba(226,0,26,.05); border-color:rgba(226,0,26,.22); }
.sx-state--ko .sx-state__ico{ background:var(--red); }
.sx-state--wait{ background:rgba(244,178,35,.1); border-color:rgba(244,178,35,.4); align-items:center; }
.sx-state--wait .sx-spin{ width:34px; height:34px; border-color:rgba(244,178,35,.3); border-top-color:var(--gold-tx); }

.sx-order h3{ font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-dim); margin:1.4rem 0 .5rem; }
.sx-order__head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.sx-order__head .sx-dim{ font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.sx-order__num{ font-family:var(--f-display); font-size:2rem; color:var(--navy); line-height:1; }
.sx-pill{ padding:.35rem .8rem; border-radius:999px; background:var(--navy); color:#fff; font-size:.74rem; font-weight:800; letter-spacing:.06em; white-space:nowrap; }
.sx-order__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
@media (max-width:620px){ .sx-order__grid{ grid-template-columns:1fr; gap:0; } }
.sx-order__grid p{ font-size:.92rem; }
.sx-order .sx-link{ display:inline-block; margin-top:.8rem; }
.sx-track{ margin-top:.5rem; font-weight:700; color:var(--navy); }
.sx-track a{ color:var(--red); text-decoration:underline; }

.sx-steps{ list-style:none; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:.4rem; margin-top:1.2rem; }
.sx-steps li{ font-size:.72rem; font-weight:700; color:var(--txt-dim); line-height:1.25; }
.sx-steps li span{ display:block; height:5px; border-radius:3px; background:var(--paper-3); margin-bottom:.45rem; }
.sx-steps li.is-done{ color:var(--navy); }
.sx-steps li.is-done span{ background:var(--red); }

.sx-wd{ margin-top:1.2rem; }
.sx-wd p{ font-size:.92rem; margin-bottom:.9rem; }
.sx-wd p a{ color:var(--red); text-decoration:underline; }
.sx-wd form{ display:grid; gap:.8rem; justify-items:start; }
.sx-wd form .sx-field{ width:100%; }

/* ------------------------------------------------------------ legal */
.sx-legal{ padding-top:.5rem; }
.sx-legal__date{ font-size:.8rem; color:var(--txt-dim); margin-bottom:1rem; }
.sx-legal h2{ font-family:var(--f-display); font-weight:400; text-transform:uppercase; color:var(--navy); font-size:1.5rem; margin:2rem 0 .6rem; }
.sx-legal .sx-card h2{ margin-top:0; font-size:1.2rem; }
.sx-legal p{ margin-bottom:.8rem; max-width:75ch; }
.sx-legal a{ color:var(--red); text-decoration:underline; }
.sx-legal__seller{ border-left:4px solid var(--gold); }
.sx-legal__form{ margin-top:2rem; background:var(--paper-2); }