/* ═══════════════════════════════════════════════════════════════
   global.css — Omni Cosplay 万相次元  v3.0
   Design tokens + reset + base + shared components
   Loaded by every page. Navigation → nav-menu.css
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Design Tokens ───────────────────────────────────────── */
:root {
  --bg:       #FAF7F2;
  --surface:  #FFFFFF;
  --bg2:      #F5F0E8;
  --bg3:      #EDE8DF;
  --fg:       #1A1A1A;
  --muted:    #6B6256;
  --muted2:   #9B9388;
  --border:   rgba(40,30,20,.10);
  --border2:  rgba(40,30,20,.06);
  --accent:   #E63946;
  --accent2:  #c62d39;
  --gold:     #C9A24B;
  --gold2:    #b8943f;
  --green:    #2d6a4f;
  --amber:    #b87a2b;
  --amber-bg: rgba(184,122,43,.08);
  --red-bg:   rgba(230,57,70,.06);

  --font-display: 'Rajdhani', sans-serif;
  --font-brand:   'Orbitron', sans-serif;
  --font-body:    'Inter', sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-sm: 0 2px 8px rgba(40,30,20,.05);
  --shadow-md: 0 8px 30px rgba(40,30,20,.08);
  --shadow-lg: 0 16px 48px rgba(40,30,20,.10);
  --shadow-card: 0 4px 16px rgba(40,30,20,.06);
  --shadow-hover: 0 12px 36px rgba(40,30,20,.10);

  --max-w: 1320px;
  --pad: 24px;
  --nav-h: 68px;
}

/* ── 2. Reset & Base ────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-size:15px;font-weight:400;line-height:1.65;
  color:var(--fg);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--fg);text-decoration:none;transition:color .18s}
a:hover{color:var(--accent)}
ul{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;color:var(--fg);line-height:1.15;letter-spacing:-.01em}

/* ── 3. Layout Utilities ────────────────────────────────────── */
.omni-container{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad)}
.omni-section{padding:64px 0}
.omni-section__label{
  font-family:var(--font-display);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--accent);
  margin-bottom:8px;display:flex;align-items:center;gap:8px;
}
.omni-section__label::before{content:'';width:20px;height:2px;background:var(--accent)}
.omni-section__title{
  font-family:var(--font-display);font-size:clamp(22px,2.8vw,34px);
  font-weight:700;color:var(--fg);margin-bottom:8px;letter-spacing:-.01em;
}
.omni-section__desc{font-size:15px;color:var(--muted);max-width:520px;line-height:1.7;margin-bottom:28px}
.omni-section-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.omni-section-header .omni-section__title{margin-bottom:0}
.omni-view-all{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}

/* ── 4. Buttons ─────────────────────────────────────────────── */
.omni-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:14px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  padding:13px 28px;border-radius:var(--radius-sm);
  transition:all .18s;white-space:nowrap;
}
.omni-btn--primary,.omni-btn--accent{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.omni-btn--primary:hover,.omni-btn--accent:hover{background:var(--accent2);border-color:var(--accent2);color:#fff}
.omni-btn--outline{background:transparent;color:var(--fg);border:1px solid var(--border)}
.omni-btn--outline:hover{background:var(--bg2);border-color:var(--muted2)}
.omni-btn--gold{background:var(--gold);color:#fff;border:1px solid var(--gold)}
.omni-btn--gold:hover{background:var(--gold2);border-color:var(--gold2);color:#fff}
.omni-btn--sm{padding:8px 18px;font-size:12px}
.omni-btn--full{width:100%;justify-content:center}

/* ── 5. Badges ──────────────────────────────────────────────── */
.omni-badge{display:inline-block;font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:3px}
.omni-badge--red{background:var(--red-bg);color:var(--accent);border:1px solid rgba(230,57,70,.15)}
.omni-badge--gold{background:rgba(201,162,75,.1);color:var(--gold);border:1px solid rgba(201,162,75,.2)}
.omni-badge--success{background:rgba(45,106,79,.08);color:var(--green);border:1px solid rgba(45,106,79,.15)}
.omni-badge--warn{background:var(--amber-bg);color:var(--amber);border:1px solid rgba(184,122,43,.15)}
.omni-badge--ghost{background:transparent;color:var(--muted2);border:1px solid var(--border)}

/* ── 6. Trust Bar ───────────────────────────────────────────── */
.omni-trust-bar{background:#fff;border-bottom:1px solid var(--border2);padding:18px 0}
.omni-trust-bar__inner{
  max-width:var(--max-w);margin:0 auto;padding:0 var(--pad);
  display:flex;justify-content:center;gap:32px;flex-wrap:wrap;
}
.omni-trust-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:500}
.omni-trust-item__icon{font-size:18px;flex-shrink:0}
.omni-trust-item strong{color:var(--fg)}

/* ── 7. Product Cards (shared: home + shop) ─────────────────── */
.omni-product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.omni-product-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  display:flex;flex-direction:column;transition:border-color .25s,box-shadow .25s,transform .25s;
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
}
.omni-product-card:hover{border-color:var(--gold);box-shadow:var(--shadow-hover);transform:translateY(-3px)}
.omni-product-card__img{
  aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;
  font-size:72px;position:relative;overflow:hidden;background:var(--bg2);
}
.omni-product-card__img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(transparent 60%,rgba(250,247,242,.4));pointer-events:none;
}
.omni-product-card__badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:4px;z-index:2}
.omni-product-card__badge{
  font-family:var(--font-display);font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:3px;color:#fff;
}
.omni-product-card__badge--new{background:var(--accent)}
.omni-product-card__badge--hot{background:var(--gold)}
.omni-product-card__badge--best{background:var(--fg)}
.omni-product-card__wish{
  position:absolute;top:8px;right:8px;z-index:2;
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;cursor:pointer;border:1px solid var(--border);transition:all .18s;
}
.omni-product-card__wish:hover{background:#fff;border-color:var(--accent)}
.omni-product-card__wish.active{color:var(--accent);border-color:var(--accent)}
.omni-product-card__body{padding:16px;flex:1;display:flex;flex-direction:column}
.omni-product-card__ip{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-family:var(--font-display);font-weight:600;margin-bottom:6px}
.omni-product-card__name{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--fg);line-height:1.4;margin-bottom:10px;flex:1}
.omni-product-card__heavy{
  font-size:11px;color:var(--amber);background:var(--amber-bg);
  border:1px solid rgba(184,122,43,.15);border-radius:var(--radius-sm);
  padding:6px 10px;margin-bottom:10px;display:flex;align-items:center;gap:4px;
}
.omni-product-card__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-bottom:10px}
.omni-product-card__price{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--fg)}
.omni-product-card__price-old{font-size:13px;color:var(--muted2);text-decoration:line-through}
.omni-product-card__stars{font-size:12px;color:var(--gold)}
.omni-product-card__stars span{color:var(--muted2);font-size:11px}
.omni-product-card__atc{
  width:100%;text-align:center;font-family:var(--font-display);font-size:13px;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:10px;border-radius:var(--radius-sm);
  background:var(--fg);color:#fff;cursor:pointer;transition:background .15s,color .15s;
}
.omni-product-card__atc:hover{background:var(--accent);color:#fff}

/* ── 8. Page Header (inner pages) ───────────────────────────── */
.omni-page-header{background:var(--surface);border-bottom:1px solid var(--border);padding:32px 0}
.omni-page-header__eyebrow{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.omni-page-header__title{font-family:var(--font-display);font-size:clamp(24px,3vw,36px);font-weight:700;color:var(--fg);margin-bottom:4px}
.omni-page-header__desc{font-size:14px;color:var(--muted)}

/* ── 9. Footer ──────────────────────────────────────────────── */
.omni-footer{background:var(--fg);color:rgba(255,255,255,.7);padding:56px 0 32px;margin-top:64px}
.omni-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.omni-footer__brand{font-family:var(--font-brand);font-size:18px;font-weight:900;color:#fff;margin-bottom:8px}
.omni-footer__brand span{color:var(--accent)}
.omni-footer__tagline{font-size:13px;color:rgba(255,255,255,.5);line-height:1.7;margin-bottom:16px}
.omni-footer__socials{display:flex;gap:8px}
.omni-footer__social{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:14px;transition:background .15s}
.omni-footer__social:hover{background:var(--accent)}
.omni-footer__col-title{font-family:var(--font-display);font-size:14px;font-weight:700;color:#fff;margin-bottom:16px;letter-spacing:.04em;text-transform:uppercase}
.omni-footer__links{display:flex;flex-direction:column;gap:9px}
.omni-footer__links a{font-size:13px;color:rgba(255,255,255,.55);transition:color .15s}
.omni-footer__links a:hover{color:#fff}
.omni-footer__bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:24px}
.omni-footer__copy{font-size:12px;color:rgba(255,255,255,.4);margin-bottom:12px}
.omni-footer__disclaimer{font-size:11px;color:rgba(255,255,255,.35);line-height:1.7;max-width:700px}
.omni-footer__disclaimer a{color:var(--gold);text-decoration:underline}

/* ── 10. Discount Popup ─────────────────────────────────────── */
.omni-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:999;display:flex;align-items:center;justify-content:center;padding:24px}
.omni-popup-overlay[hidden]{display:none}
.omni-popup{background:#fff;border-radius:var(--radius-lg);max-width:420px;width:100%;padding:36px 28px 28px;text-align:center;position:relative;box-shadow:0 24px 64px rgba(0,0,0,.2);animation:omni-pop-in .35s ease}
@keyframes omni-pop-in{0%{opacity:0;transform:scale(.9) translateY(20px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.omni-popup__close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--muted);cursor:pointer;transition:background .15s;border:none}
.omni-popup__close:hover{background:var(--bg3)}
.omni-popup__emoji{font-size:48px;margin-bottom:12px}
.omni-popup__title{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--fg);margin-bottom:6px}
.omni-popup__desc{font-size:14px;color:var(--muted);margin-bottom:16px;line-height:1.6}
.omni-popup__code{display:inline-block;font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:.08em;color:var(--accent);background:var(--red-bg);padding:8px 24px;border:2px dashed var(--accent);border-radius:var(--radius-sm);margin-bottom:12px}
.omni-popup__note{font-size:12px;color:var(--muted2)}

/* ── 11. Floating: WhatsApp + Back to Top ───────────────────── */
.omni-whatsapp-float{position:fixed;bottom:24px;right:24px;z-index:90;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 4px 20px rgba(37,211,102,.35);transition:transform .2s,box-shadow .2s;text-decoration:none}
.omni-whatsapp-float:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(37,211,102,.45);color:#fff}
.omni-whatsapp{position:fixed;bottom:24px;right:24px;z-index:90;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 4px 20px rgba(37,211,102,.35);transition:transform .2s;text-decoration:none}
.omni-whatsapp:hover{transform:scale(1.08)}
.omni-back-top{position:fixed;bottom:92px;right:24px;z-index:89;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--fg);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s,box-shadow .25s}
.omni-back-top:hover{box-shadow:var(--shadow-lg)}

/* ── 12. Helpers + Fade-up ──────────────────────────────────── */
.omni-text-accent{color:var(--accent)}
.omni-text-gold{color:var(--gold)}
.omni-text-muted{color:var(--muted)}
.omni-hidden{display:none!important}
.omni-fade-up{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.omni-fade-up.is-visible{opacity:1;transform:translateY(0)}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — global components
   ═══════════════════════════════════════════════════════════════ */

@media (max-width:1024px){
  .omni-product-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .omni-section{padding:48px 0}
  .omni-product-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .omni-footer__grid{grid-template-columns:1fr 1fr;gap:28px}
  .omni-trust-bar__inner{gap:16px}
}
@media (max-width:480px){
  .omni-product-grid{grid-template-columns:1fr;gap:12px}
  .omni-trust-bar__inner{flex-direction:column;align-items:center;gap:10px}
  .omni-footer__grid{grid-template-columns:1fr;gap:24px}
  .omni-popup{margin:16px;padding:28px 20px 24px}
  .omni-page-header__title{font-size:24px}
}