@charset "UTF-8";
/* ==========================================================================
   e-spacios BIBLE · bible-tokens.css · v2.0 (19 Oct 2026, back to the kit «biblia»)
   The single source of design rules. Every screen uses ONLY these tokens
   and component classes. No other colours, sizes, buttons or z-indexes.
   Human + AI rule of thumb: if a value is not a token here, do not use it.
   ========================================================================== */

/* ---------- 1. Colours: the kit «biblia» (V7) palette, nothing else ----------
   Two greys, two blues, three product pairs (dark / light), white. No black.
   Text: on white / light grey -> dark grey or navy · on navy, blue, dark grey -> white ·
   on product colours -> navy (dark red: navy only at large sizes, else use light red). */
:root {
  --c-white:  #FFFFFF;
  --c-dark:   #666666; /* dark grey: all body text, icons, control borders, default buttons (5.74:1 on white) */
  --c-light:  #E6E7E8; /* light grey (kit panel): panels, lines, boxes, disabled (#666 on it 4.64:1) */
  --c-navy:   #233365; /* titles that need emphasis, primary button, links, current price, text on product colours */
  --c-blue:   #307AB7; /* hover / focus of navy, Freemium (white text 4.57:1) */
  --c-green:  #5BC098; --c-green-l:  #7FE2CC; /* Premium */
  --c-orange: #F59A59; --c-orange-l: #FECBA3; /* Promotion, % OFF badge */
  --c-red:    #EF646C; --c-red-l:    #FEAAB1; /* Closed deal, danger */
  /* role aliases (kept so older classes keep working; all point to the palette above) */
  --c-text: var(--c-dark); --c-ink: var(--c-dark); --c-control: var(--c-dark); --c-on-color: var(--c-navy);
  --c-line: var(--c-light); --c-surface: var(--c-light); --c-surface-2: var(--c-light);
  --c-premium: var(--c-green); --c-promo: var(--c-orange); --c-closed: var(--c-red); --c-danger: var(--c-red);
  --c-graphite: var(--c-dark);
  --c-premium-tint: var(--c-white); --c-promo-tint: var(--c-white); --c-closed-tint: var(--c-white); --c-navy-tint: var(--c-light);
  --c-premium-bar: var(--c-green-l); --c-promo-bar: var(--c-orange-l); --c-closed-bar: var(--c-red-l);
  --c-scrim: rgba(102, 102, 102, .70); /* dark grey at 70 % behind pop-ups */

  /* ---------- 2. Type ---------- */
  --font-book:  "Avenir Book", AvBook, "Nunito Sans", Arial, sans-serif;
  --font-black: "Avenir Black", AvBlack, "Nunito Sans", Arial, sans-serif;
  --fs-sm:   14px; /* MINIMUM for any text: meta, tags, captions, legal notes */
  --fs-body: 16px; /* body, inputs, buttons (web AND mobile)                  */
  --fs-lg:   18px; /* lead, card titles, prices in lists, account nav         */
  --fs-h3:   20px; /* section and box titles                                  */
  --fs-h2:   24px; /* page titles                                             */
  --fs-h1:   32px; /* hero / marketing only                                   */
  --lh-body: 1.5; --lh-tight: 1.25;

  /* ---------- 3. Space, size, layers ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --h-sm: 36px;  /* desktop-only compact button / chip                        */
  --h-md: 44px;  /* default; MINIMUM touch target on mobile                   */
  --h-lg: 52px;  /* kit level-1 bar, primary CTA on mobile                    */
  --radius: 0;   /* the kit is square. No rounded corners.                    */
  --focus: 0 0 0 2px var(--c-white), 0 0 0 4px var(--c-navy);
  --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-dropdown: 200;
  --z-scrim: 900; --z-modal: 1000; --z-toast: 1100;
  --content-max: 952px; --gutter: 16px;
}

/* ---------- 4. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: var(--fs-body)/var(--lh-body) var(--font-book); color: var(--c-text); background: var(--c-white); }
b, strong, h1, h2, h3, h4 { font-family: var(--font-black); font-weight: normal; color: var(--c-dark); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); margin: 0 0 var(--sp-4); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); margin: 0 0 var(--sp-3); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); margin: 0 0 var(--sp-2); }
.text-sm, small, .meta { font-size: var(--fs-sm); line-height: 1.4; }
.text-lg { font-size: var(--fs-lg); }
a { color: var(--c-navy); text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--focus); }

/* ---------- 5. Layout ---------- */
.container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--sp-4); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.stack   { display: flex; flex-direction: column; gap: var(--sp-3); }          /* vertical rhythm */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } /* inline groups */
@media (max-width: 1023px) { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } .container { padding-inline: var(--sp-5); } }
@media (max-width: 767px)  { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .container { padding-inline: var(--sp-4); } }

/* ---------- 6. Buttons: the ONLY button system ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; align-items: center; } /* never overlap */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--h-md); min-width: var(--h-md); padding: var(--sp-2) var(--sp-4);
  font: var(--fs-body)/var(--lh-tight) var(--font-black); text-align: center; white-space: normal;
  border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; text-decoration: none;
  flex: 0 0 auto; max-width: 100%;
}
/* kit «Otros botones»: dark grey fill, white text. Primary = navy (one per screen). */
.btn-primary   { background: var(--c-navy); color: var(--c-white); }
.btn-secondary { background: var(--c-dark); color: var(--c-white); }
.btn-primary:hover { background: var(--c-blue); }
.btn-secondary:hover { background: var(--c-navy); }
/* kit «Botones especiales»: light product colour, 1 px dark product colour, navy text (7.9 / 8.2 / 6.7:1) */
.btn.is-premium { background: var(--c-green-l);  border-color: var(--c-green);  color: var(--c-navy); }
.btn.is-promo   { background: var(--c-orange-l); border-color: var(--c-orange); color: var(--c-navy); }
.btn.is-closed, .btn-danger { background: var(--c-red-l); border-color: var(--c-red); color: var(--c-navy); }
.btn.is-premium:hover { background: var(--c-green); } .btn.is-promo:hover { background: var(--c-orange); }  /* navy 5.5:1 */
.btn.is-closed:hover, .btn-danger:hover { box-shadow: inset 0 0 0 1px var(--c-red); }  /* navy on dark red is only 3.9:1 */
.btn:disabled, .btn.is-disabled, .btn[aria-disabled="true"] {
  background: var(--c-surface-2); color: var(--c-text); border-color: var(--c-surface-2); cursor: not-allowed; filter: none; }
.btn-sm { min-height: var(--h-sm); padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }  /* desktop only */
.btn-lg { min-height: var(--h-lg); padding: var(--sp-3) var(--sp-5); font-size: var(--fs-lg); }
.btn-block { display: flex; width: 100%; }
/* kit «Botón Nivel 1» (DOWNLOAD OUR APP) and «Nivel 2» (Login, Register…): text buttons between 1 px light-grey lines */
.btn-l1 { display: flex; width: 100%; min-height: var(--h-lg); background: none; color: var(--c-dark); border-block: 1px solid var(--c-light); text-transform: uppercase; font-size: var(--fs-lg); }
.btn-l2 { background: none; color: var(--c-dark); border-bottom: 1px solid var(--c-light); }
.btn-l1:hover, .btn-l2:hover { color: var(--c-navy); }
.btn-icon { padding: 0; width: var(--h-md); }
.btn-icon img, .btn img { width: 20px; height: 20px; flex: 0 0 20px; }
@media (max-width: 767px) { .btn-sm { min-height: var(--h-md); font-size: var(--fs-body); } .btn-row > .btn { flex: 1 1 auto; } }

/* ---------- 7. Tags and badges ---------- */
.tag { display: inline-flex; align-items: center; min-height: 24px; padding: 2px var(--sp-2);
  font: var(--fs-sm)/1.2 var(--font-black); text-transform: uppercase; letter-spacing: .3px; color: var(--c-navy); border: 1px solid transparent; }
.tag-premium { background: var(--c-green-l); border-color: var(--c-green); } .tag-promo { background: var(--c-orange-l); border-color: var(--c-orange); }
.tag-closed  { background: var(--c-red-l); border-color: var(--c-red); }
.tag-free    { background: var(--c-blue); color: var(--c-white); }
.tag-pro { background: var(--c-dark); color: var(--c-white); } .tag-company { background: var(--c-navy); color: var(--c-white); }
.tag-neutral { background: var(--c-light); color: var(--c-dark); }
/* Discounted price group (Badge A, owner-set discount, PSI 19 Oct 2026):
   <span class="price-group"><s class="price-was"><span class="sr-only">Original price </span>$38,000,000 MXN</s>
   <b class="price-now"><span class="sr-only">Now </span>$30,400,000 MXN</b><span class="badge-off is-sm">20% OFF</span></span>
   Order: original (struck) → current → badge. Badge sits next to the current price, never on the photo.
   The owner enters the original price and N at upload; current = original × (1 − N/100), rounded to the
   currency unit. If the owner types the current price instead, N = round(100 × (original − current) / original).
   N is a whole number 1–99; current < original. No discount entered = plain price, no strikethrough, no badge. */
.price-group { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp-2); row-gap: var(--sp-1); }
.price-was { font: var(--fs-body)/var(--lh-tight) var(--font-book); color: var(--c-text);
  text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--c-text); white-space: nowrap; }
.price-now { font: var(--fs-lg)/var(--lh-tight) var(--font-black); color: var(--c-navy); white-space: nowrap; }
.price-group.is-lg .price-was { font-size: var(--fs-lg); }        /* ad detail: 18 / 24 + M badge */
.price-group.is-lg .price-now { font-size: var(--fs-h2); }
.price-group.is-xl .price-was { font-size: var(--fs-h3); }        /* hero: 20 / 32 + L badge */
.price-group.is-xl .price-now { font-size: var(--fs-h1); }
/* % OFF badge: S next to card / list prices, M next to detail prices, L next to hero prices */
.badge-off { position: static; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  background: var(--c-promo); color: var(--c-on-color); font-family: var(--font-black);
  min-height: 32px; padding: 2px var(--sp-3); font-size: var(--fs-lg); }
.badge-off.is-lg { min-height: 40px; padding: 2px var(--sp-4); font-size: var(--fs-h2); }
.badge-off.is-sm { min-height: 24px; padding: 1px var(--sp-2); font-size: var(--fs-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* review-only marks, never shipped */
.mark-draft, .mark-reported, .mark-legal { display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px;
  font: var(--fs-sm)/1.2 var(--font-black); text-transform: uppercase; }
.mark-draft { background: var(--c-dark); color: var(--c-white); }
.mark-reported { border: 1px solid var(--c-dark); color: var(--c-dark); }
.mark-legal { border: 1px solid var(--c-red); color: var(--c-navy); }

/* ---------- 8. Inputs ---------- */
.form-field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.label { font: var(--fs-body)/var(--lh-tight) var(--font-black); color: var(--c-dark); }
.input, .select, .textarea { width: 100%; min-height: var(--h-md); padding: var(--sp-2) var(--sp-3);
  font: var(--fs-body)/var(--lh-tight) var(--font-book); color: var(--c-dark); background: var(--c-white);
  border: 1px solid var(--c-control); border-radius: var(--radius); }
.textarea { min-height: 120px; resize: vertical; }
.input::placeholder { color: var(--c-text); }
.input:focus, .select:focus, .textarea:focus { outline: none; box-shadow: var(--focus); }
.input.is-error { border: 2px solid var(--c-red); }
.error-text { font-size: var(--fs-sm); color: var(--c-navy); border-left: 4px solid var(--c-red); padding-left: var(--sp-2); } /* red text fails (3.1:1) */
.help-text  { font-size: var(--fs-sm); color: var(--c-text); }
.check { display: flex; align-items: flex-start; gap: var(--sp-2); min-height: var(--h-md); padding-block: var(--sp-2); cursor: pointer; }
.check input { flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--c-navy); } /* never pre-ticked for consent */
.choice { display: inline-flex; align-items: center; justify-content: center; min-height: var(--h-md); padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-control); background: var(--c-white); font: var(--fs-body)/1.2 var(--font-black); color: var(--c-dark); }
.choice.is-selected, .choice[aria-checked="true"] { border: 2px solid var(--c-navy); background: var(--c-light); color: var(--c-navy); }

/* ---------- 9. Cards ---------- */
.card { display: flex; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--c-line); background: var(--c-white); position: relative; }
.card > .card-media { position: relative; flex: 0 0 228px; max-width: 100%; }
.card > .card-body  { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
/* product cards stay white (dark grey text fails on the light product colours); a 4 px bar in the dark colour marks them */
.card.is-premium { box-shadow: inset 4px 0 0 var(--c-green); } .card.is-promoted { box-shadow: inset 4px 0 0 var(--c-orange); } .card.is-closed { box-shadow: inset 4px 0 0 var(--c-red); }
.card-title { font: var(--fs-lg)/var(--lh-tight) var(--font-black); color: var(--c-dark); overflow-wrap: anywhere; }
.price { font: var(--fs-lg)/var(--lh-tight) var(--font-black); color: var(--c-dark); white-space: nowrap; }
.product-card > .product-head { min-height: var(--h-md); display: flex; align-items: center; justify-content: center; padding: var(--sp-2);
  font: var(--fs-h3)/1.2 var(--font-black); text-transform: uppercase; }

/* ---------- 10. Modals ---------- */
.scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: var(--c-scrim); }
.modal { position: fixed; z-index: var(--z-modal); left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 2 * var(--sp-4))); max-height: calc(100vh - 2 * var(--sp-4)); overflow: auto;
  display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); background: var(--c-white); border: 1px solid var(--c-line); }
.modal-head { display: flex; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-control); }
.modal-head h3 { flex: 1; margin: 0; text-transform: uppercase; }
.modal-foot { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; }

/* ---------- 11. Navigation ---------- */
.tabs { display: flex; flex-wrap: wrap; border-block: 1px solid var(--c-line); }
.tab  { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--h-md); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-body); color: var(--c-dark); }
.tab.is-active, .tab[aria-selected="true"] { background: var(--c-surface-2); font-family: var(--font-black); box-shadow: inset 0 -3px 0 var(--c-navy); }
.appbar { position: sticky; top: 0; z-index: var(--z-sticky); min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 0 var(--sp-2); background: var(--c-white); border-bottom: 1px solid var(--c-line); }
.tabbar { position: sticky; bottom: 0; z-index: var(--z-sticky); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; min-height: 64px; background: var(--c-surface); border-top: 1px solid var(--c-line); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: var(--sp-1); font-size: var(--fs-sm); line-height: 1.1; color: var(--c-dark); text-align: center; text-decoration: none; }
.tabbar a[aria-current="page"] { font-family: var(--font-black); box-shadow: inset 0 3px 0 var(--c-navy); }

/* ---------- 12. Icons ---------- */
.icon { width: 24px; height: 24px; flex: 0 0 24px; } .icon-sm { width: 20px; height: 20px; flex: 0 0 20px; }
/* icon-only controls must be .btn-icon (44 px) with aria-label */

/* ---------- 13. Mobile ---------- */
@media (max-width: 767px) {
  body { font-size: var(--fs-body); }               /* never below 16 px */
  .card > .card-media { flex-basis: 100%; }
  .modal { width: calc(100vw - 2 * var(--sp-4)); padding: var(--sp-4); }
}

@font-face{font-family:"AvBook";src:url(/fonts_sx/AveniBoo.woff) format("woff");font-display:swap}
@font-face{font-family:"AvBlack";src:url(/fonts_sx/AveniBla.woff) format("woff");font-display:swap}
/* Spaxios home v1 (13 Nov 2026) - Bible tokens only. Port of design/spaxios/v2 screens 10/11/12. */
.sxh a{color:var(--c-navy)}
.sx-wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.sx-top{display:flex;align-items:center;gap:20px;min-height:80px;border-bottom:1px solid var(--c-light)}
.sx-logo{display:flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;font:28px/1 var(--font-black);color:var(--c-navy)!important;letter-spacing:-.5px}
.sx-logo .dot{color:var(--c-blue)}
.sx-nav{display:flex;gap:2px;flex:1;flex-wrap:wrap}
.sx-nav a{font:var(--fs-body)/1 var(--font-black);color:var(--c-dark);text-decoration:none;padding:14px 10px}
.sx-nav a:hover,.sx-nav a:focus{color:var(--c-navy);box-shadow:inset 0 -3px 0 var(--c-navy)}
.sx-pref{position:relative}
.sx-pref>summary{list-style:none;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:1px solid var(--c-dark);font:var(--fs-sm)/1 var(--font-black);color:var(--c-dark);background:var(--c-white);cursor:pointer;white-space:nowrap}
.sx-pref>summary::-webkit-details-marker{display:none}
.sx-caret{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--c-dark)}
.sx-globe{width:18px;height:18px;border:2px solid var(--c-dark);border-radius:50%;box-sizing:border-box}
.sx-dd{position:absolute;right:0;top:calc(100% + 4px);z-index:50;background:var(--c-white);border:1px solid var(--c-dark);padding:12px;display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:12px;min-width:520px}
[dir=rtl] .sx-dd{right:auto;left:0}
.sx-dd h4{margin:0 0 6px;font-size:var(--fs-sm);color:var(--c-navy)}
.sx-dd a,.sx-dd button{display:flex;justify-content:space-between;gap:12px;width:100%;min-height:40px;align-items:center;padding:0 10px;border:0;background:none;font:var(--fs-body) var(--font-book);color:var(--c-dark);text-decoration:none;cursor:pointer;text-align:start}
.sx-dd .on{background:var(--c-light);color:var(--c-navy);font-family:var(--font-black)}
.sx-auth{display:flex;gap:8px}
.sx-hero{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:end;padding:40px 0 24px}
.sx-h1{font:var(--fs-h1)/1.2 var(--font-black);color:var(--c-navy);margin:0}
.sx-lead{font-size:var(--fs-lg);color:var(--c-dark);margin:8px 0 0}
.sx-tabs{display:flex;margin:24px 0 -1px}
.sx-tabs>*{min-height:44px;display:flex;align-items:center;justify-content:center;padding:0 20px;font:16px var(--font-black);color:var(--c-dark);border:1px solid var(--c-light);border-bottom:0;background:var(--c-white);text-decoration:none;cursor:pointer}
.sx-tabs>.on{border-color:var(--c-dark);color:var(--c-navy);box-shadow:inset 0 3px 0 var(--c-navy);position:relative}
.sx-sbox{border:1px solid var(--c-dark);display:grid;grid-template-columns:2fr 1fr auto;background:var(--c-white)}
.sx-sbox label{display:flex;flex-direction:column;justify-content:center;padding:8px 16px;border-inline-end:1px solid var(--c-light);font-size:var(--fs-sm);color:var(--c-dark);min-width:0}
.sx-sbox input,.sx-sbox select{border:0;font:var(--fs-body) var(--font-book);color:var(--c-dark);background:none;padding:4px 0;min-height:32px;outline-offset:2px;min-width:0;width:100%}
.sx-sbox .btn{min-height:68px;padding:0 32px;font-size:18px;border-radius:0}
.sx-ai{display:flex;align-items:center;gap:12px;border:2px solid var(--c-blue);padding:6px 6px 6px 16px;background:var(--c-white);margin-top:12px}
[dir=rtl] .sx-ai{padding:6px 16px 6px 6px}
.sx-ai .dot{width:28px;height:28px;flex:0 0 28px;background:var(--c-blue);color:var(--c-white);display:flex;align-items:center;justify-content:center;font:var(--fs-sm)/1 var(--font-black)}
.sx-ai input{flex:1;border:0;font:var(--fs-body) var(--font-book);color:var(--c-dark);background:none;min-width:0;min-height:40px}
.sx-ai input::placeholder,.sx-sbox input::placeholder{color:var(--c-dark)}
.btn-ai{background:var(--c-blue);color:var(--c-white)!important;border-radius:0}
.sx-pub{border:2px solid var(--c-navy);padding:16px;display:flex;flex-direction:column;gap:8px}
.sx-pub b{color:var(--c-navy);font-size:20px}
.sx-pub .btn{color:var(--c-white)!important}
.btn-primary,.btn-secondary{color:var(--c-white)!important}
.sx-sec{padding:32px 0;border-bottom:1px solid var(--c-light)}
.sx-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.sx-sec-h h2{margin:0;color:var(--c-navy)}
.sx-sec-h a{font:var(--fs-body) var(--font-black)}
.sx-g8{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
.sx-g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sx-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:96px;border:1px solid var(--c-light);font:var(--fs-body) var(--font-black);color:var(--c-dark)!important;text-align:center;padding:8px;text-decoration:none}
.sx-chip:hover,.sx-chip:focus{border-color:var(--c-navy)}
.sx-card{border:1px solid var(--c-light);background:var(--c-white);display:flex;flex-direction:column;text-decoration:none;color:var(--c-dark)!important}
.sx-card .ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--c-light)}
.sx-card .ph img{width:100%;height:100%;object-fit:cover;display:block}
.sx-card .tags{position:absolute;inset-inline-start:8px;top:8px;display:flex;gap:4px}
.sx-card .bd{padding:12px;display:flex;flex-direction:column;gap:6px}
.sx-card.is-premium{box-shadow:inset 0 4px 0 var(--c-green)}.sx-card.is-promoted{box-shadow:inset 0 4px 0 var(--c-orange)}
.sx-card .t{font:var(--fs-lg)/1.25 var(--font-black);color:var(--c-dark);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sx-card .m{font-size:var(--fs-sm);color:var(--c-dark);overflow-wrap:anywhere}
.tag-premium{background:var(--c-green-l);color:var(--c-navy)}.tag-promo{background:var(--c-orange);color:var(--c-navy)}.tag-new{background:var(--c-blue);color:var(--c-white)}
.sx-svc{border:1px solid var(--c-light);padding:16px;display:flex;gap:12px;align-items:flex-start}
.sx-svc b{display:block;color:var(--c-navy);font-size:var(--fs-lg)}
.sx-svc span{font-size:var(--fs-sm);display:block;margin:4px 0 8px}
.sx-svc .btn{min-height:44px}
.sx-foot{background:var(--c-light);padding:32px 0;margin-top:32px;font-size:var(--fs-sm);color:var(--c-dark)}
.sx-foot b{color:var(--c-navy)}
.sx-foot .row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sx-tabbar{display:none}
.sx-empty{color:var(--c-dark);font-size:var(--fs-body);padding:16px;border:1px solid var(--c-light)}
.sxh .ico{width:28px;height:28px}
/* hide the standalone chat bubble: the AI button and Ask bar open it */
#spaxio-chat-bubble{display:none!important}
@media (max-width:1100px){.sx-g8{grid-template-columns:repeat(4,1fr)}.sx-nav{display:none}.sx-hero{grid-template-columns:1fr}}
@media (max-width:767px){
 .sx-wrap{padding:0 12px}
 .sx-top{min-height:64px;gap:8px;border:0}
 .sx-logo{font-size:24px;min-height:52px;padding:4px 10px;border:1px solid var(--c-light)}
 .sx-pref{margin-inline-start:auto}
 .sx-dd{position:fixed;left:0;right:0;top:auto;bottom:0;min-width:0;grid-template-columns:1fr;max-height:80vh;overflow:auto;border:0;border-top:4px solid var(--c-navy);padding:16px 12px 88px}
 .sx-auth{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 0 0}
 .sx-top .sx-auth{display:none}.sx-auth-m{display:grid!important}
 .sx-hero{padding:16px 0 0;gap:0}
 .sx-h1{font-size:24px}
 .sx-lead,.sx-pub b,.sx-pub>span,.sx-pub .note,.sx-sbox .sx-type{display:none}
 .sx-tabs{display:grid;grid-template-columns:repeat(4,1fr);margin-top:12px}
 .sx-tabs>*{padding:0 4px;font-size:15px;text-align:center}
 .sx-sbox{display:block;border:0}
 .sx-sbox label{border:1px solid var(--c-dark);min-height:52px;padding:0 12px}
 .sx-sbox label .lb{display:none}
 .sx-sbox .btn{display:flex;width:100%;min-height:56px;margin-top:8px}
 .sx-pub{border:0;padding:8px 0 0}
 .sx-pub .btn{min-height:56px}
 .sx-ai{padding-inline-start:10px}
 .sx-sec{padding:20px 0}
 .sx-sec-h h2{font-size:20px}
 .sx-g8{grid-template-columns:repeat(4,1fr);gap:8px}
 .sx-chip{min-height:80px;font-size:14px;padding:6px 2px}
 .sx-g4{grid-template-columns:1fr;gap:8px}
 .sx-card{display:grid;grid-template-columns:132px 1fr}
 .sx-card .ph{aspect-ratio:auto;min-height:120px}
 .sx-card .bd{padding:8px 10px;gap:4px}
 .sx-card .t{font-size:16px}
 .sx-card.is-premium{box-shadow:inset 4px 0 0 var(--c-green)}.sx-card.is-promoted{box-shadow:inset 4px 0 0 var(--c-orange)}
 [dir=rtl] .sx-card.is-premium{box-shadow:inset -4px 0 0 var(--c-green)}[dir=rtl] .sx-card.is-promoted{box-shadow:inset -4px 0 0 var(--c-orange)}
 .sx-recent .sx-card:nth-child(n+3){display:none}
 .sx-g4.sx-svcs{grid-template-columns:1fr 1fr}
 .sx-svc{flex-direction:column;gap:6px;padding:12px}
 .sx-svc span{display:none}
 .sx-foot{margin:0;padding:20px 0 96px}
 .sx-tabbar{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:45;grid-auto-flow:column;grid-auto-columns:1fr;min-height:64px;background:var(--c-white);border-top:1px solid var(--c-light)}
 .sx-tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:64px;font-size:14px;line-height:1.1;color:var(--c-dark)!important;text-decoration:none}
 .sx-tabbar a[aria-current=page]{font-family:var(--font-black);color:var(--c-navy)!important;box-shadow:inset 0 3px 0 var(--c-navy)}
 .sx-tabbar .ico{width:24px;height:24px}
}
.sx-auth-m{display:none}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.sx-foot .fl{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin-top:6px}
.sx-foot a{color:var(--c-dark)!important;text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.sx-mb{display:none}
@media (max-width:767px){
 .sx-dk{display:none}.sx-mb{display:inline}
 .sx-hero{display:flex;flex-direction:column}
 .sx-hero>div:first-child{display:contents}
 .sx-h1{order:1}#sx-search{order:2}.sx-pub{order:3}.sx-ai{order:4}
 .sx-tabs>*{border-color:var(--c-light)}
 .sx-sbox label{border-top:0}
}
@media (max-width:767px){.sx-hero{align-items:stretch}}

/* ===== v2 (Bible v1, 13 Nov 2026) ===== */
.sx-logo img{height:56px;width:auto;display:block}
.sx-logo{min-height:56px}
.sx-me{display:flex;align-items:center;gap:8px;min-height:44px;font:var(--fs-body) var(--font-black);color:var(--c-navy)!important;text-decoration:none}
.sxh .av{width:24px;height:24px;flex:0 0 24px;display:inline-flex;align-items:center;justify-content:center;background:var(--c-light);color:var(--c-navy);font:14px/1 var(--font-black);object-fit:cover;text-transform:uppercase}
.sx-sbox .in{display:flex;align-items:center;gap:8px}
.sx-card .t{font:18px/1.25 var(--font-black)}
.sx-price{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.sx-price .price-now{color:var(--c-navy);font-family:var(--font-black)}
.sx-price .price-was{color:var(--c-dark)}
.sx-sec-h a{min-height:44px;display:inline-flex;align-items:center}
.sx-more{margin-top:12px}
.sx-sub{margin:-8px 0 12px;font-size:var(--fs-sm);color:var(--c-dark)}
/* Live activity (PSI's live feed idea) */
.sx-feed{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px}
.sx-feed li{border-bottom:1px solid var(--c-light)}
.sx-feed a{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;min-height:64px;padding:8px 0;text-decoration:none;color:var(--c-dark)!important}
.sx-feed .ti{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--c-light)}
.sx-feed .mid{min-width:0;display:flex;flex-direction:column;gap:2px}
.sx-feed .lt{font:16px/1.3 var(--font-black);color:var(--c-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-feed .m{font-size:14px;color:var(--c-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-feed .end{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:end}
.sx-feed .who{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--c-dark)}
/* Product cards: header, bullets, ONE price bar, ONE button (Bible §7) */
.sx-prods{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:stretch}
.sx-prod{display:flex;flex-direction:column;border:1px solid var(--c-light);background:var(--c-white);min-width:0}
.sx-prod .hd{min-height:48px;display:flex;align-items:center;justify-content:center;padding:8px;font:16px/1.2 var(--font-black);text-transform:uppercase;text-align:center;text-decoration:none}
.sx-prod .bdg{display:flex;justify-content:center;padding:8px 8px 0}
.sx-prod ul{flex:1;margin:0;padding:12px 12px 12px 28px;font-size:14px;line-height:1.4;text-transform:uppercase;color:var(--c-navy)}
[dir=rtl] .sx-prod ul{padding:12px 28px 12px 12px}
.sx-prod li{margin-bottom:4px}
.sx-prod .bar{min-height:56px;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;border-top:1px solid var(--c-light);font:14px/1.3 var(--font-black);text-transform:uppercase;color:var(--c-navy)!important;text-decoration:none}
.sx-prod .pbtn{margin:0 8px 8px;min-height:44px;font-size:14px;padding:0 8px;text-align:center;white-space:normal;line-height:1.2}
.tag-rec{background:var(--c-orange-l);color:var(--c-navy);box-shadow:inset 0 0 0 1px var(--c-orange)}
.tag-vip{background:#C9A227;color:#111111}
.p-free .hd{background:var(--c-blue);color:var(--c-white)!important}
.p-free .pbtn{background:var(--c-dark);color:var(--c-white)!important}
.p-prem .hd{background:var(--c-green-l);color:var(--c-navy)!important;box-shadow:inset 0 -4px 0 var(--c-green)}
.p-prem .pbtn{background:var(--c-green-l);color:var(--c-navy)!important}
.p-promo .hd{background:var(--c-orange-l);color:var(--c-navy)!important;box-shadow:inset 0 -4px 0 var(--c-orange)}
.p-promo .pbtn{background:var(--c-orange-l);color:var(--c-navy)!important;box-shadow:inset 0 0 0 1px var(--c-orange)}
.p-promo .pbtn:hover{background:var(--c-orange)}
.p-closed .hd{background:var(--c-red-l);color:var(--c-navy)!important;box-shadow:inset 0 -4px 0 var(--c-red)}
.p-closed .pbtn{background:var(--c-red-l);color:var(--c-navy)!important;box-shadow:inset 0 0 0 1px var(--c-red)}
/* approved exceptions (PSI): silver, black + gold, yellow */
.p-pro{border-color:#C9CED6}
.p-pro .hd{background:#C9CED6;color:var(--c-navy)!important}
.p-pro .bar{border-top-color:#C9CED6}
.p-pro .pbtn{background:var(--c-navy);color:var(--c-white)!important}
.p-corp{background:#111111;border-color:#C9A227}
.p-corp .hd{background:#111111;color:#F3D27A!important;box-shadow:inset 0 -1px 0 #C9A227}
.p-corp ul,.p-corp .bar{color:#F3D27A!important}
.p-corp .bar{border-top-color:#C9A227}
.p-corp .pbtn{background:#C9A227;color:#111111!important}
.p-auct{background:#FFF8D6;border-color:#F2C200}
.p-auct .hd{background:#F2C200;color:#111111!important}
.p-auct ul,.p-auct .bar{color:#111111!important}
.p-auct .bar{border-top-color:#F2C200}
.p-auct .pbtn{background:#F2C200;color:#111111!important}
.sx-svc .ico{width:32px;height:32px}
/* Floating AI (Bible §11) */
.sx-fab{position:fixed;inset-inline-end:20px;bottom:24px;width:64px;height:64px;background:var(--c-blue);color:var(--c-white)!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:14px/1 var(--font-black);border:0;cursor:pointer;z-index:40;transition:transform .2s ease}
.sx-fab{transition:transform .2s ease,visibility .2s}
.sx-fab.is-hidden{transform:scale(.6);visibility:hidden}
@media (prefers-reduced-motion:reduce){.sx-fab{transition:none}}
@media (max-width:1199px){.sx-prods{grid-template-columns:repeat(4,1fr)}}
@media (max-width:1023px){.sx-feed{grid-template-columns:1fr}}
@media (max-width:767px){
 .sx-logo{min-height:52px;height:52px;box-sizing:border-box;padding:4px 8px;border:1px solid var(--c-light)}
 .sx-logo img{height:42px}
 .sx-card .t{font-size:18px}
 .sx-sec-h{padding-inline-end:76px}
 .sx-sbox .in{min-height:50px}
 .sx-feed a{grid-template-columns:40px 1fr;gap:4px 12px}
 .sx-feed .end{grid-column:2;flex-direction:row;justify-content:space-between;align-items:center;width:100%}
 .sx-prods{display:flex;flex-direction:column;gap:6px}
 .sx-prod{display:grid;grid-template-columns:minmax(132px,40%) 1fr;align-items:stretch}
 .sx-prod .hd{justify-content:flex-start;text-align:start;font-size:14px;padding:0 12px;min-height:48px}
 .sx-prod ul,.sx-prod .bdg,.sx-prod .pbtn{display:none}
 .sx-prod .bar{border-top:0;justify-content:flex-end;text-align:end;padding:0 12px;min-height:48px}
 .p-corp .hd{box-shadow:none}
 .sx-fab{inset-inline-end:12px;bottom:80px}
 .sx-foot{padding:20px 0 96px}
 .sx-foot .row{flex-direction:column;gap:6px}
}
.sx-prod .pbtn{text-transform:uppercase;font-family:var(--font-black)}