/* ================================================================
   METAFA HIGH TECH — Design System Complet
   Style: MonsieurCyberMan — Pro, épuré, bleu marine + bleu vif
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

:root {
  /* ── Palette bleue ── */
  --blue:      #3b82f6;
  --blue-d:    #2563eb;
  --blue-v:    #1d4ed8;
  --blue-l:    rgba(59,130,246,.13);
  --blue-glow: rgba(59,130,246,.25);

  /* ── Système de layers (dark-first) ── */
  /* Layer 0 — fond de page (base, le plus sombre) */
  --bg:        #080d16;
  /* Layer 1 — sections alternées */
  --bg-soft:   #0e1520;
  /* Layer 2 — panneaux / cartes conteneurs */
  --bg-soft2:  #141e2e;
  /* Layer 3 — cartes produits / éléments flottants */
  --surface:   #1a2640;
  /* Layer 4 — inputs, hover states */
  --surface-2: #1f2e4a;

  /* ── Couleurs sombres header/footer ── */
  --dark:   #050a12;
  --dark-2: #07101c;
  --dark-3: #0a1526;

  /* ── Textes ── */
  --text:   #e8f0fe;
  --text-2: #9fb3d4;
  --text-3: #5a7299;
  --text-4: #3a4f6e;

  /* ── Bordures avec contraste net ── */
  --border:   rgba(59,130,246,.12);
  --border-2: rgba(59,130,246,.22);
  --border-s: rgba(255,255,255,.06);

  /* ── Sémantiques ── */
  --green:     #22c55e;
  --green-l:   rgba(34,197,94,.13);
  --red:       #ef4444;
  --red-l:     rgba(239,68,68,.13);
  --orange:    #f97316;
  --orange-l:  rgba(249,115,22,.13);
  --yellow:    #eab308;
  --yellow-l:  rgba(234,179,8,.13);

  /* ── Rayons & ombres ── */
  --r:         12px;
  --r-sm:      8px;
  --r-lg:      18px;
  --shadow:    0 2px 8px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.3);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.4);
  --shadow-blue: 0 4px 20px rgba(59,130,246,.2);
  --ease:      .2s ease;
  --font-h:    'Outfit', sans-serif;
  --font-b:    'DM Sans', sans-serif;
}

/* ── Thème clair ───────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:        #f8fafc;
  --bg-soft:   #f1f5f9;
  --bg-soft2:  #e8edf5;
  --surface:   #ffffff;
  --surface-2: #f0f4fa;
  --dark:      #1e293b;
  --dark-2:    #0f172a;
  --dark-3:    #1e293b;
  --text:      #0f172a;
  --text-2:    #334155;
  --text-3:    #64748b;
  --text-4:    #94a3b8;
  --border:    rgba(15,23,42,.1);
  --border-2:  rgba(15,23,42,.18);
  --border-s:  rgba(15,23,42,.07);
  --shadow:    0 2px 8px rgba(0,0,0,.08), 0 8px 28px rgba(0,0,0,.06);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.08);
  --blue-l:    rgba(59,130,246,.1);
  --green-l:   rgba(34,197,94,.1);
  --red-l:     rgba(239,68,68,.1);
  --orange-l:  rgba(249,115,22,.1);
  --yellow-l:  rgba(234,179,8,.1);
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-b); color: var(--text); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-b); cursor: pointer; }
textarea, input, select { font-family: var(--font-b); }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }

/* ── BARRE ANNONCE ──────────────────────────────────────────── */
.bar { background: var(--blue); color: #fff; font-size: .78rem; font-weight: 500; padding: .5rem 0; }
.bar-inner { display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.bar-inner span { display: flex; align-items: center; gap: .4rem; opacity: .95; }
.bar-inner i { font-size: .78rem; }

/* ── HEADER ─────────────────────────────────────────────────── */
.header { background: var(--dark); color: #fff; position: sticky; top: 0; z-index: 500; box-shadow: 0 2px 20px rgba(0,0,0,.3); }
.header-inner { display: flex; align-items: center; gap: 1.2rem; padding: .85rem 1.5rem; max-width: 1280px; margin: 0 auto; }
.logo { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.logo img { height: 44px; width: auto; object-fit: contain; }
.logo-words { line-height: 1.2; }
.logo-name { font-family: var(--font-h); font-size: 1.05rem; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.logo-sub  { font-size: .65rem; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .06em; }
.h-search { flex: 1; max-width: 520px; display: flex; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.12); transition: border-color var(--ease); }
.h-search:focus-within { border-color: var(--blue); }
.h-search input { flex: 1; background: none; border: none; outline: none; padding: .6rem 1rem; font-size: .875rem; color: #fff; }
.h-search input::placeholder { color: rgba(255,255,255,.35); }
.h-search button { background: var(--blue); border: none; padding: 0 1rem; color: #fff; font-size: .9rem; transition: background var(--ease); }
.h-search button:hover { background: var(--blue-d); }
.h-actions { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.h-btn { display: flex; flex-direction: column; align-items: center; gap: .18rem; background: none; border: none; color: rgba(255,255,255,.75); padding: .4rem .65rem; border-radius: 8px; font-size: .68rem; transition: all var(--ease); position: relative; cursor: pointer; }
.h-btn:hover { color: #fff; background: rgba(255,255,255,.1); }
.h-btn i { font-size: 1.15rem; }
.h-btn span { white-space: nowrap; }
.h-cart-num { position: absolute; top: .1rem; right: .2rem; background: var(--blue); color: #fff; font-size: .58rem; font-weight: 800; min-width: 18px; height: 18px; border-radius: 99px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.h-admin-btn { color: #fbbf24 !important; }
.h-admin-btn:hover { background: rgba(251,191,36,.15) !important; }
.burger { display: none; flex-direction: column; gap: 4px; background: none; border: none; padding: .5rem; }
.burger span { display: block; width: 22px; height: 2px; background: rgba(255,255,255,.8); border-radius: 2px; transition: all .3s; }

/* ── NAV ────────────────────────────────────────────────────── */
.nav { background: var(--dark-2); border-top: 1px solid rgba(255,255,255,.06); }
.nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.nav-list { display: flex; list-style: none; gap: 0; }
.nav-lnk { display: flex; align-items: center; gap: .35rem; padding: .65rem 1rem; font-size: .84rem; font-weight: 500; color: rgba(255,255,255,.6); transition: all var(--ease); border-bottom: 2px solid transparent; }
.nav-lnk:hover, .nav-lnk.active { color: #fff; border-bottom-color: var(--blue); }
.nav-lnk i { font-size: .8rem; }

/* ── MOBILE NAV ─────────────────────────────────────────────── */
.mob-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 498; }
.mob-nav { position: fixed; top: 0; right: -100%; width: min(320px, 85vw); height: 100vh; background: var(--dark); z-index: 499; transition: right .3s; display: flex; flex-direction: column; overflow-y: auto; }
.mob-nav.open { right: 0; }
.mob-nav-overlay.open { display: block; }
.mob-nav-hd { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.mob-nav-body { padding: .8rem 0; flex: 1; }
.mob-nav-body a { display: flex; align-items: center; gap: .75rem; padding: .8rem 1.5rem; color: rgba(255,255,255,.7); font-size: .9rem; font-weight: 500; transition: all var(--ease); }
.mob-nav-body a:hover { color: #fff; background: rgba(255,255,255,.07); }
.mob-nav-body a i { width: 18px; text-align: center; color: var(--blue); }
.mob-nav-sep { padding: .5rem 1.5rem .2rem; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.25); }

/* ── CART DRAWER ────────────────────────────────────────────── */
.cart-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 800; }
.cart-overlay.open { display: block; }
.cart-drawer { position: fixed; top: 0; right: -420px; width: min(420px, 100vw); height: 100vh; background: var(--bg); z-index: 900; transition: right .3s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(0,0,0,.15); }
.cart-drawer.open { right: 0; }
.cart-hd { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--border); }
.cart-hd h3 { font-family: var(--font-h); font-size: 1.05rem; font-weight: 700; }
.cart-hd button { background: none; border: none; padding: .4rem; border-radius: 6px; color: var(--text-3); transition: all var(--ease); }
.cart-hd button:hover { background: var(--bg-soft); color: var(--text); }
.cart-items-list { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; }
.cart-empty { text-align: center; padding: 3rem 1rem; color: var(--text-4); }
.cart-empty i { font-size: 2.5rem; display: block; margin-bottom: .8rem; }
.cart-empty p { font-size: .9rem; }
.cart-row { display: flex; gap: .9rem; align-items: flex-start; padding: .9rem 0; border-bottom: 1px solid var(--border); }
.cart-row:last-child { border-bottom: none; }
.cart-row-img { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--bg-soft); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.cart-row-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-row-info { flex: 1; min-width: 0; }
.cart-row-name { font-size: .84rem; font-weight: 600; line-height: 1.3; margin-bottom: .3rem; }
.cart-row-price { font-family: var(--font-h); font-size: .95rem; font-weight: 700; color: var(--blue); }
.cart-row-rm { font-size: .72rem; color: var(--red); cursor: pointer; margin-top: .3rem; display: inline-flex; align-items: center; gap: .25rem; }
.cart-ft { border-top: 1px solid var(--border); padding: 1.2rem 1.5rem; }
.cart-ft-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.cart-ft-total span { font-size: .85rem; color: var(--text-3); }
.cart-ft-total strong { font-family: var(--font-h); font-size: 1.3rem; font-weight: 800; }

/* ── AUTH MODAL ─────────────────────────────────────────────── */
.modal-ov { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1000; align-items: center; justify-content: center; padding: 1rem; backdrop-filter: blur(4px); }
.modal-ov.open { display: flex; }
.modal-box { background: var(--bg); border-radius: var(--r-lg); width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: var(--shadow-lg); }
.modal-cls { position: absolute; top: 1rem; right: 1rem; background: var(--bg-soft); border: none; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: .9rem; transition: all var(--ease); z-index: 1; }
.modal-cls:hover { background: var(--border); color: var(--text); }
.modal-tabs-row { display: flex; border-bottom: 1px solid var(--border); }
.modal-tab { flex: 1; padding: 1rem; font-size: .88rem; font-weight: 600; background: none; border: none; color: var(--text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--ease); }
.modal-tab.on { color: var(--blue); border-bottom-color: var(--blue); }
.m-pane { display: none; padding: 1.5rem; }
.m-pane.on { display: block; }
.m-pane h2 { font-family: var(--font-h); font-size: 1.3rem; font-weight: 800; margin-bottom: .3rem; }
.modal-desc { font-size: .84rem; color: var(--text-3); margin-bottom: 1.3rem; }
.m-switch { text-align: center; font-size: .82rem; color: var(--text-3); margin-top: 1rem; }
.m-switch a { color: var(--blue); font-weight: 600; cursor: pointer; }
.profile-menu a { display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem; border-radius: 8px; font-size: .88rem; font-weight: 500; transition: background var(--ease); }
.profile-menu a:hover { background: var(--bg-soft); }
.avatar-wrap { width: 64px; height: 64px; border-radius: 50%; background: var(--blue-l); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: var(--blue); font-size: 1.6rem; overflow: hidden; }
.avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* ── FORM ELEMENTS ──────────────────────────────────────────── */
.fg { display: flex; flex-direction: column; gap: .3rem; }
.fg label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.fg input, .fg textarea, .fg select { padding: .65rem .95rem; border: 2px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); font-size: .875rem; font-family: var(--font-b); outline: none; transition: border-color var(--ease); width: 100%; }
.fg input:focus, .fg textarea:focus, .fg select:focus { border-color: var(--blue); }
.fg input.err, .fg textarea.err { border-color: var(--red); }
.fg textarea { resize: vertical; min-height: 90px; }
.fg2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.fc { grid-column: 1 / -1; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .65rem 1.4rem; border-radius: var(--r-sm); font-size: .875rem; font-weight: 600; font-family: var(--font-b); border: 2px solid transparent; transition: all var(--ease); cursor: pointer; white-space: nowrap; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-blue  { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 0 4px 16px rgba(59,130,246,.3); }
.btn-blue:hover:not(:disabled)  { background: var(--blue-d); border-color: var(--blue-d); box-shadow: 0 6px 24px rgba(59,130,246,.45); transform: translateY(-1px); }
.btn-dark  { background: var(--surface); color: var(--text); border-color: var(--border-2); }
.btn-dark:hover:not(:disabled)  { background: var(--surface-2); border-color: var(--blue); }
.btn-outline { background: transparent; color: var(--text-2); border-color: var(--border-2); }
.btn-outline:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); background: var(--blue-l); }
.btn-ghost  { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); }
.btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); }
.btn-red   { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 4px 14px rgba(239,68,68,.25); }
.btn-red:hover:not(:disabled)   { background: #dc2626; box-shadow: 0 6px 20px rgba(239,68,68,.4); }
.btn-green { background: var(--green); color: #fff; border-color: var(--green); box-shadow: 0 4px 14px rgba(34,197,94,.25); }
.btn-sm  { padding: .4rem .9rem; font-size: .8rem; }
.btn-lg  { padding: .85rem 2rem; font-size: .95rem; }
.btn-xs  { padding: .25rem .55rem; font-size: .72rem; }
.btn-full { width: 100%; }
.btn-icon-sq { width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--border); background: var(--surface); border-radius: 8px; font-size: .85rem; color: var(--text-2); transition: all var(--ease); }
.btn-icon-sq:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-l); }

/* ── BADGES ─────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .6rem; border-radius: 99px; font-size: .7rem; font-weight: 700; }
.b-blue   { background: var(--blue-l);   color: var(--blue); }
.b-green  { background: var(--green-l);  color: var(--green); }
.b-red    { background: var(--red-l);    color: var(--red); }
.b-orange { background: var(--orange-l); color: var(--orange); }
.b-yellow { background: var(--yellow-l); color: var(--yellow); }
.b-gray   { background: var(--bg-soft2); color: var(--text-3); }
.b-dark   { background: var(--dark);     color: #fff; }

/* ── PROMO BADGE (sur les cartes produit) ───────────────────── */
.promo-badge { position: absolute; top: .6rem; left: .6rem; background: var(--red); color: #fff; font-size: .68rem; font-weight: 800; padding: .22rem .55rem; border-radius: 6px; z-index: 2; }

/* ── CARDS ──────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); }
.card-hd { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-s); gap: .8rem; flex-wrap: wrap; }
.card-hd h3 { font-family: var(--font-h); font-size: 1rem; font-weight: 700; }
.card-bd { padding: 1.25rem; }

/* ── PRODUCT CARD ───────────────────────────────────────────── */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem; }
.p-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; cursor: pointer; transition: all .22s; display: flex; flex-direction: column; position: relative; }
.p-card:hover { border-color: var(--blue); box-shadow: 0 8px 32px rgba(59,130,246,.2), var(--shadow); transform: translateY(-3px); }
.p-img { aspect-ratio: 4/3; background: var(--bg-soft2); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.p-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s; }
.p-card:hover .p-img img { transform: scale(1.04); }
.p-body { padding: .9rem; flex: 1; display: flex; flex-direction: column; gap: .3rem; }
.p-brand { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); }
.p-name { font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--text); }
.p-specs { font-size: .72rem; color: var(--text-3); line-height: 1.5; flex: 1; }
.p-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; margin-top: .5rem; }
.p-price { font-family: var(--font-h); font-size: 1.1rem; font-weight: 800; color: var(--blue); }
.p-old-price { font-size: .75rem; color: var(--text-4); text-decoration: line-through; }
.p-discount { font-size: .68rem; font-weight: 700; color: var(--red); }
.p-add-btn { background: var(--blue); color: #fff; border: none; border-radius: 7px; padding: .45rem .75rem; font-size: .75rem; font-weight: 700; font-family: var(--font-b); display: flex; align-items: center; gap: .3rem; transition: background var(--ease); flex-shrink: 0; }
.p-add-btn:hover { background: var(--blue-d); }

/* ── HERO SLIDER ────────────────────────────────────────────── */
.hero-section { position: relative; overflow: hidden; }
.hero-slides { position: relative; height: clamp(340px, 52vw, 580px); }
.hero-slide { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; transition: opacity .6s ease; background-size: cover; background-position: center; }
.hero-slide.active { opacity: 1; z-index: 1; }
.hero-slide.slide-1 { background: linear-gradient(135deg, #0c1a2e 0%, #1a3155 50%, #1e4d8c 100%); }
.hero-slide.slide-2 { background: linear-gradient(135deg, #160c2e 0%, #311855 50%, #4c1d8c 100%); }
.hero-slide.slide-3 { background: linear-gradient(135deg, #0c2010 0%, #1a4020 50%, #1e7a40 100%); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.2) 60%, transparent 100%); }
.hero-content { position: relative; z-index: 2; color: #fff; padding: 2rem 1.5rem; max-width: 1280px; margin: 0 auto; width: 100%; }
.hero-eyebrow { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.55); margin-bottom: .7rem; display: flex; align-items: center; gap: .4rem; }
.hero-title { font-family: var(--font-h); font-size: clamp(1.8rem, 4.5vw, 3.2rem); font-weight: 900; line-height: 1.1; margin-bottom: .75rem; letter-spacing: -.02em; }
.hero-sub { font-size: clamp(.9rem, 1.5vw, 1.05rem); color: rgba(255,255,255,.75); max-width: 520px; margin-bottom: 1.5rem; }
.hero-btns { display: flex; gap: .75rem; flex-wrap: wrap; }
.hero-arr { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.2); color: #fff; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .9rem; transition: all var(--ease); backdrop-filter: blur(8px); }
.hero-arr:hover { background: rgba(255,255,255,.25); }
.hero-arr-l { left: 1rem; }
.hero-arr-r { right: 1rem; }
.hero-dots { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); display: flex; gap: .5rem; z-index: 10; }
.hero-dot { width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.35); cursor: pointer; transition: all .3s; }
.hero-dot.active { background: #fff; width: 24px; }

/* ── TRUST STRIP ────────────────────────────────────────────── */
.trust-strip { background: var(--bg-soft); border-top: 1px solid var(--border-s); border-bottom: 1px solid var(--border-s); padding: 1.1rem 0; }
.trust-inner { display: flex; align-items: stretch; justify-content: center; gap: 0; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: .7rem; padding: .5rem 1.8rem; border-right: 1px solid var(--border-s); }
.trust-item:last-child { border-right: none; }
.trust-item i { font-size: 1.3rem; color: var(--blue); }
.trust-item strong { font-size: .875rem; font-weight: 700; display: block; }
.trust-item span { font-size: .75rem; color: var(--text-3); }

/* ── ONGLETS ────────────────────────────────────────────────── */
.cat-tabs { display: flex; gap: 0; overflow-x: auto; border-bottom: 2px solid var(--border); scrollbar-width: none; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab { display: flex; align-items: center; gap: .4rem; padding: .7rem 1.1rem; font-size: .84rem; font-weight: 600; white-space: nowrap; border: none; background: none; color: var(--text-3); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all .18s; font-family: var(--font-b); }
.cat-tab:hover { color: var(--blue); }
.cat-tab.on { color: var(--blue); border-bottom-color: var(--blue); }
.cat-tab i { font-size: .82rem; }

/* ── FOOTER ─────────────────────────────────────────────────── */
.footer { background: var(--dark); color: rgba(255,255,255,.75); padding: 3.5rem 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.4fr; gap: 2.5rem; margin-bottom: 2.5rem; }
.footer-col h4 { font-family: var(--font-h); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.4); margin-bottom: 1rem; }
.footer-col p { font-size: .84rem; line-height: 1.75; color: rgba(255,255,255,.55); margin-bottom: 1rem; }
.footer-col a { display: block; font-size: .84rem; color: rgba(255,255,255,.55); margin-bottom: .5rem; transition: color var(--ease); }
.footer-col a:hover { color: #fff; }
.footer-logo { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.footer-logo img { height: 38px; filter: brightness(0) invert(.9); }
.footer-social { display: flex; gap: .5rem; margin-top: .8rem; }
.footer-social a { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-size: .85rem; margin-bottom: 0; transition: all var(--ease); }
.footer-social a:hover { background: var(--blue); color: #fff; }
.f-nl { display: flex; gap: 0; border-radius: 8px; overflow: hidden; border: 1.5px solid rgba(255,255,255,.15); }
.f-nl input { flex: 1; background: none; border: none; padding: .6rem .9rem; font-size: .82rem; color: #fff; outline: none; }
.f-nl input::placeholder { color: rgba(255,255,255,.3); }
.f-nl button { background: var(--blue); border: none; padding: 0 .9rem; color: #fff; font-size: .85rem; transition: background var(--ease); }
.f-nl button:hover { background: var(--blue-d); }
.f-pays { display: flex; gap: .6rem; margin-top: .9rem; font-size: 1.8rem; color: rgba(255,255,255,.3); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 1.2rem 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; font-size: .78rem; color: rgba(255,255,255,.3); }
.footer-bottom a { color: rgba(255,255,255,.3); }
.footer-bottom a:hover { color: rgba(255,255,255,.6); }
.f-creator { display: flex; align-items: center; gap: .4rem; }
.f-creator a { color: rgba(255,255,255,.45); }
.footer-year {}

/* ── TABLE ──────────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: .84rem; }
.tbl th { padding: .7rem .9rem; text-align: left; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); border-bottom: 2px solid var(--border); white-space: nowrap; background: var(--bg-soft2); }
.tbl td { padding: .75rem .9rem; border-bottom: 1px solid var(--border-s); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: var(--surface); }
.order-sel { padding: .3rem .6rem; border: 1.5px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text); font-size: .78rem; outline: none; cursor: pointer; }

/* ── TOAST ──────────────────────────────────────────────────── */
.toast { position: fixed; bottom: 5rem; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--dark); color: #fff; padding: .75rem 1.4rem; border-radius: 99px; font-size: .875rem; font-weight: 500; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: all .3s; z-index: 9999; white-space: nowrap; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.toast-ok  { background: var(--green); }
.toast.toast-err { background: var(--red); }
.toast.toast-dark { background: var(--dark); }

/* ── SCROLL TOP ─────────────────────────────────────────────── */
#scroll-top { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 42px; height: 42px; border-radius: 10px; background: var(--blue); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; transition: all .3s; z-index: 400; box-shadow: 0 4px 16px rgba(37,99,235,.35); }
#scroll-top.show { opacity: 1; pointer-events: auto; }
#scroll-top:hover { background: var(--blue-d); transform: translateY(-2px); }

/* ── SPINNER ────────────────────────────────────────────────── */
.spin { width: 16px; height: 16px; border: 2.5px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-item { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; margin-bottom: .5rem; background: var(--surface); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; font-size: .88rem; font-weight: 600; cursor: pointer; transition: background var(--ease); }
.faq-q:hover { background: var(--surface-2); }
.faq-q i { flex-shrink: 0; color: var(--text-3); font-size: .7rem; transition: transform .25s; }
.faq-a { display: none; padding: .8rem 1.1rem 1rem; font-size: .855rem; line-height: 1.75; color: var(--text-2); border-top: 1px solid var(--border-s); }
.faq-item.open .faq-q i { transform: rotate(180deg); }
.faq-item.open .faq-a { display: block; }

/* ── ADMIN PANEL ────────────────────────────────────────────── */
.adm-nav-link { display: flex; align-items: center; gap: .6rem; padding: .6rem 1.2rem; font-size: .84rem; font-weight: 500; color: rgba(255,255,255,.5); background: none; border: none; width: 100%; text-align: left; transition: all .15s; cursor: pointer; border-left: 3px solid transparent; }
.adm-nav-link:hover, .adm-nav-link.on { color: #fff; background: rgba(255,255,255,.07); }
.adm-nav-link.on { border-left-color: #60a5fa; color: #fff; }
.adm-nav-link i { width: 16px; text-align: center; }
.adm-sec { display: none; }
.adm-sec.on { display: block; }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.adm-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1.1rem 1.3rem; display: flex; align-items: center; gap: 1rem; transition: border-color var(--ease), box-shadow var(--ease); }
.adm-stat:hover { border-color: var(--border-2); box-shadow: var(--shadow); }
.adm-stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.i-blue   { background: rgba(37,99,235,.12); color: var(--blue); }
.i-green  { background: rgba(22,163,74,.12);  color: var(--green); }
.i-orange { background: rgba(234,88,12,.12);  color: var(--orange); }
.i-red    { background: rgba(220,38,38,.12);  color: var(--red); }
.i-purple { background: rgba(124,58,237,.12); color: #7c3aed; }
.adm-stat-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.adm-stat-val { font-family: var(--font-h); font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.2rem; }
.adm-form-actions { padding: .9rem 1.2rem 1.2rem; display: flex; gap: .6rem; flex-wrap: wrap; border-top: 1px solid var(--border); }
.prod-thumb-cell { width: 44px; height: 44px; border-radius: 7px; overflow: hidden; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; }
.prod-thumb-cell img { width: 100%; height: 100%; object-fit: cover; }
.act-btns { display: flex; gap: .35rem; flex-wrap: wrap; }
@media (max-width: 900px) {
  #adm-sb { transform: translateX(-100%); position: fixed; z-index: 600; }
  #adm-sb.open { transform: translateX(0); box-shadow: 4px 0 40px rgba(0,0,0,.4); }
  #adm-main { margin-left: 0 !important; }
}

/* ── CMS BAR ────────────────────────────────────────────────── */
#cms-edit-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: var(--dark); border-top: 2px solid var(--blue); color: #fff; padding: .55rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; font-size: .78rem; }
body.cms-hl [data-cms], body.cms-hl [data-cms-bg] { outline: 2px dashed rgba(37,99,235,.7) !important; outline-offset: 3px !important; cursor: pointer !important; position: relative; }
#cms-modal { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 1rem; backdrop-filter: blur(4px); }
#cms-modal-box { background: var(--bg); border-radius: var(--r-lg); padding: 1.6rem; width: 100%; max-width: 480px; box-shadow: var(--shadow-lg); }

/* ── PROMO STRIP ────────────────────────────────────────────── */
.promo-strip { background: linear-gradient(90deg,#dc2626,#ea580c); color:#fff; text-align:center; padding:.6rem 1.5rem; font-size:.84rem; font-weight:600; letter-spacing:.02em; display:flex; align-items:center; justify-content:center; gap:.6rem; }
.promo-strip .code { background:rgba(255,255,255,.25); padding:.15rem .5rem; border-radius:5px; font-family:monospace; font-size:.82rem; letter-spacing:.08em; }

/* ── MON-COMPTE ─────────────────────────────────────────────── */
.acc-layout { display: flex; gap: 0; min-height: 60vh; }
.acc-sidebar { width: 240px; flex-shrink: 0; border-right: 1px solid var(--border); }
.acc-sb-card { padding: 1.5rem; border-bottom: 1px solid var(--border); text-align: center; }
.acc-nav { padding: .5rem 0; }
.acc-nav a { display: flex; align-items: center; gap: .65rem; padding: .7rem 1.2rem; font-size: .875rem; font-weight: 500; color: var(--text-2); transition: all var(--ease); cursor: pointer; }
.acc-nav a:hover, .acc-nav a.on { color: var(--blue); background: var(--blue-l); }
.acc-nav a i { width: 16px; text-align: center; }
.acc-main { flex: 1; padding: 1.5rem; min-width: 0; }
.acc-section { display: none; }
.acc-section.on { display: block; }
.empty-sec { text-align: center; padding: 3rem 1rem; color: var(--text-4); }
.empty-sec i { font-size: 2.5rem; display: block; margin-bottom: .8rem; }

/* ── CHECKOUT ───────────────────────────────────────────────── */
.co-layout { display: grid; grid-template-columns: 1fr 380px; gap: 2rem; padding: 2rem 0; align-items: start; }
.co-steps { display: flex; gap: 0; margin-bottom: 1.5rem; border-bottom: 2px solid var(--border); }
.co-step { display: flex; align-items: center; gap: .5rem; padding: .75rem 1.2rem; font-size: .84rem; font-weight: 600; color: var(--text-3); cursor: default; }
.co-step.done { color: var(--green); }
.co-step.active { color: var(--blue); border-bottom: 3px solid var(--blue); margin-bottom: -2px; }
.co-step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-soft2); display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; }
.co-step.done .co-step-num { background: var(--green-l); color: var(--green); }
.co-step.active .co-step-num { background: var(--blue); color: #fff; }
.del-opt { border: 2px solid var(--border); border-radius: var(--r-sm); padding: .9rem 1.1rem; cursor: pointer; transition: all var(--ease); display: flex; align-items: center; gap: .8rem; }
.del-opt.on { border-color: var(--blue); background: var(--blue-l); }
.pay-m { border: 2px solid var(--border); border-radius: var(--r-sm); padding: .9rem 1.1rem; cursor: pointer; transition: all var(--ease); display: flex; align-items: center; gap: .8rem; }
.pay-m.on { border-color: var(--blue); background: var(--blue-l); }

/* ── LEGAL ──────────────────────────────────────────────────── */
.legal-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; padding: 3rem 0; align-items: start; }
.legal-toc-card { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; position: sticky; top: 80px; background: var(--surface); }
.legal-toc-card h4 { padding: .7rem 1rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); border-bottom: 1px solid var(--border-s); background: var(--bg-soft2); }
.legal-toc-card a { display: flex; align-items: center; gap: .5rem; padding: .65rem 1rem; font-size: .84rem; text-decoration: none; color: var(--text-2); border-bottom: 1px solid var(--border-s); transition: all .15s; }
.legal-toc-card a:last-child { border-bottom: none; }
.legal-toc-card a:hover, .legal-toc-card a.on { color: var(--blue); background: var(--blue-l); }
.legal-tbl { width: 100%; border-collapse: collapse; font-size: .83rem; }
.legal-tbl th { padding: .55rem .8rem; text-align: left; background: var(--bg-soft2); border: 1px solid var(--border); font-weight: 700; font-size: .78rem; }
.legal-tbl td { padding: .5rem .8rem; border: 1px solid var(--border); }
.legal-tbl tr:nth-child(even) td { background: var(--bg-soft); }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .co-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .header-inner { padding: .7rem 1rem; }
  .h-search { display: none; }
  .nav { display: none; }
  .burger { display: flex; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .trust-inner { gap: 0; }
  .trust-item { padding: .5rem 1rem; border-right: none; border-bottom: 1px solid var(--border); width: 50%; }
  .trust-item:nth-child(odd) { border-right: 1px solid var(--border); }
  .acc-layout { flex-direction: column; }
  .acc-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
  .legal-layout { grid-template-columns: 1fr; }
  .pf-grid { grid-template-columns: 1fr; }
  .fg2 { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); }
  .hero-slides { height: 60vw; min-height: 280px; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 1rem; }
  .products-grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .hero-title { font-size: 1.5rem; }
}

/* ================================================================
   METAFA — MOBILE FIXES & IMPROVEMENTS (v2)
   ================================================================ */

/* ── CART DRAWER ─── */
.cart-overlay.open { display: block; }
.cart-drawer.open   { right: 0; }

/* ── AUTH MODAL ─── */
.modal-ov.open { display: flex; }

/* ── MOB NAV ─── */
.mob-nav-overlay.open { display: block; }
.mob-nav.open         { right: 0; }

/* ── WHATSAPP BUTTON ─────────────────────────────────────────── */
#wa-btn { transition: transform .25s, box-shadow .25s !important; }
#wa-btn:hover { transform: scale(1.1) !important; box-shadow: 0 6px 30px rgba(37,211,102,.65) !important; }

/* ── SCROLL TOP ─── */
#scroll-top.show { opacity: 1; pointer-events: auto; }

/* ── HERO SLIDE transition ─── */
.hero-slide { transition: opacity .55s ease; }

/* ── MOBILE FIRST ────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Header */
  .header-inner { padding: .6rem 1rem; gap: .6rem; }
  .logo img { height: 36px; }
  .logo-name { font-size: .9rem; }
  .logo-sub  { display: none; }
  .h-search  { display: none; }
  .nav       { display: none; }
  .burger    { display: flex; }
  .h-btn     { padding: .35rem .5rem; font-size: .65rem; }
  .h-btn i   { font-size: 1.05rem; }
  .h-btn span { display: none; }
  /* Show just icons on mobile for user/cart */
  .h-btn.h-icon-only span { display: none; }

  /* Hero */
  .hero-slides { height: 55vw; min-height: 260px; }
  .hero-title  { font-size: clamp(1.4rem, 6vw, 2rem); }
  .hero-sub    { font-size: .82rem; }
  .hero-btns   { gap: .5rem; }
  .hero-btns .btn { padding: .6rem 1.1rem; font-size: .82rem; }
  .hero-arr    { width: 36px; height: 36px; font-size: .8rem; }
  .hero-arr-l  { left: .5rem; }
  .hero-arr-r  { right: .5rem; }

  /* Trust strip */
  .trust-inner { flex-direction: column; align-items: stretch; gap: 0; }
  .trust-item  { border-right: none !important; border-bottom: 1px solid var(--border); padding: .7rem 1rem; }
  .trust-item:last-child { border-bottom: none; }

  /* Products grid */
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .p-name { font-size: .8rem; }
  .p-price { font-size: 1rem; }
  .p-specs { display: none; }

  /* About section */
  section > .wrap[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-bottom { flex-direction: column; text-align: center; gap: .5rem; }

  /* Catalogue */
  .cat-tabs { gap: 0; }
  .cat-tab  { padding: .6rem .75rem; font-size: .78rem; }

  /* Cart drawer */
  .cart-drawer { width: 100vw; }

  /* Auth modal */
  .modal-box { max-height: 95vh; margin: .5rem; }

  /* Chat widget */
  #chat-widget { bottom: 1rem; right: 1rem; }
  #chat-box { width: calc(100vw - 2rem); right: -4px; }

  /* WhatsApp */
  #wa-btn { bottom: 5.5rem; right: 1rem; width: 46px; height: 46px; }

  /* Wrap padding */
  .wrap { padding: 0 .85rem; }
}

@media (max-width: 480px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .p-body { padding: .65rem; }
  .p-add-btn { padding: .35rem .55rem; font-size: .7rem; }
  .hero-slides { height: 65vw; min-height: 220px; }
  .hero-content { padding: 1rem; }
  .hero-title  { font-size: 1.3rem; }
  .hero-sub    { font-size: .78rem; margin-bottom: 1rem; }
  .hero-btns .btn-lg { padding: .55rem .9rem; font-size: .8rem; }

  /* Co-layout */
  .co-layout { grid-template-columns: 1fr; }

  /* Legal */
  .legal-layout { grid-template-columns: 1fr; }
}

/* ── PRODUCT CARD hover on mobile ─── */
@media (hover: none) {
  .p-card:hover { transform: none; }
}

/* ── PERFORMANCE ─────────────────────────────────────────────── */
.p-img img { will-change: transform; }
.hero-slide { will-change: opacity; }

/* ================================================================
   METAFA — MOBILE COMPLETE FIX v3
   ================================================================ */

/* Скрываем span у кнопок header на мобиле */
@media (max-width: 768px) {
  .h-btn > span:not(.h-cart-num):not(.cart-num) { display: none; }
  .h-btn { flex-direction: row; padding: .4rem .55rem; gap: .2rem; }
  .h-btn i { font-size: 1.2rem; }
  .header-inner { gap: .5rem; }
}

/* About section grid fix mobile */
@media (max-width: 768px) {
  .about-grid { grid-template-columns: 1fr !important; }
  section .wrap[style*="grid-template-columns:1fr 1fr"],
  section .wrap[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* Cart drawer full width mobile */
@media (max-width: 480px) {
  .cart-drawer { width: 100vw; max-width: 100vw; }
  .modal-box   { max-width: calc(100vw - 2rem); margin: 1rem; }
}

/* Chat widget mobile */
@media (max-width: 480px) {
  #chat-widget { bottom: 1rem; right: 1rem; }
  #chat-box    { width: calc(100vw - 2.5rem); right: 0; bottom: 70px; max-height: 420px; }
  #wa-btn      { bottom: 5.5rem !important; right: 1rem !important; width: 46px !important; height: 46px !important; }
}

/* Products grid responsive */
@media (max-width: 480px) {
  .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .65rem; }
  .p-body  { padding: .65rem; }
  .p-name  { font-size: .78rem; }
  .p-price { font-size: .95rem; }
  .p-add-btn { padding: .3rem .5rem; font-size: .68rem; }
}

/* Hero mobile */
@media (max-width: 480px) {
  .hero-slides { height: 62vw; min-height: 200px; }
  .hero-title  { font-size: 1.25rem !important; }
  .hero-sub    { font-size: .76rem; margin-bottom: .8rem; }
  .hero-btns .btn { padding: .5rem .85rem; font-size: .76rem; }
  .hero-arr    { width: 32px; height: 32px; font-size: .75rem; }
}

/* Trust strip mobile */
@media (max-width: 640px) {
  .trust-inner  { flex-wrap: wrap; }
  .trust-item   { width: 50%; border-right: none; border-bottom: 1px solid var(--border); padding: .65rem .8rem; }
  .trust-item:nth-child(odd)  { border-right: 1px solid var(--border); }
  .trust-item:last-child, .trust-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
}

/* Footer mobile */
@media (max-width: 768px) {
  .footer-grid   { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: .5rem; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* Catalogue mobile */
@media (max-width: 640px) {
  .cat-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .cat-tab  { padding: .55rem .75rem; font-size: .76rem; white-space: nowrap; }
}

/* Checkout mobile */
@media (max-width: 768px) {
  .co-layout { grid-template-columns: 1fr !important; }
  .co-steps  { overflow-x: auto; }
}

/* Account page mobile */
@media (max-width: 640px) {
  .acc-layout  { flex-direction: column; }
  .acc-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
}

/* Legal page mobile */
@media (max-width: 768px) {
  .legal-layout { grid-template-columns: 1fr !important; }
  .legal-toc-card { position: static; }
}

/* Prevent body scroll when overlay open */
body.no-scroll { overflow: hidden; }

/* Smooth transitions */
.mob-nav     { transition: right .3s cubic-bezier(.4,0,.2,1); }
.cart-drawer { transition: right .3s cubic-bezier(.4,0,.2,1); }
.modal-ov    { transition: opacity .2s ease; }

/* Touch-friendly buttons */
@media (hover: none) {
  .p-card:hover   { transform: none !important; }
  .btn:hover      { transform: none !important; }
}

/* ================================================================
   METAFA — ПЛАВНОСТЬ И АНИМАЦИИ v4
   ================================================================ */

/* ── Плавная загрузка страницы ─────────────────────────────────── */
body {
  animation: pageFadeIn .35s ease both;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Page transition при клике на ссылку ───────────────────────── */
body.page-leaving {
  animation: pageLeave .25s ease forwards;
}
@keyframes pageLeave {
  to { opacity: 0; transform: translateY(-6px); }
}

/* ── Плавные переходы для всех интерактивных элементов ─────────── */
a, button, input, select, textarea {
  transition: all .18s ease;
}

/* ── Карточки продуктов — плавный hover ────────────────────────── */
.p-card {
  transition: transform .22s cubic-bezier(.4,0,.2,1),
              border-color .18s ease,
              box-shadow .22s cubic-bezier(.4,0,.2,1);
}
.p-card:hover {
  transform: translateY(-5px);
  border-color: var(--blue);
  box-shadow: 0 12px 36px rgba(59,130,246,.18), 0 4px 12px rgba(0,0,0,.2);
}
.p-img img {
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.p-card:hover .p-img img {
  transform: scale(1.06);
}

/* ── Кнопки — пружинный эффект ──────────────────────────────────── */
.btn {
  transition: all .18s cubic-bezier(.4,0,.2,1);
}
.btn:active:not(:disabled) {
  transform: scale(.96) translateY(1px);
}
.p-add-btn {
  transition: background .15s ease, transform .15s ease;
}
.p-add-btn:active {
  transform: scale(.92);
}

/* ── Nav links ──────────────────────────────────────────────────── */
.nav-lnk {
  transition: color .15s ease, border-bottom-color .15s ease;
  position: relative;
}

/* ── Mobile nav — плавный слайд ────────────────────────────────── */
.mob-nav {
  transition: right .3s cubic-bezier(.4,0,.2,1);
}
.mob-nav-overlay {
  transition: opacity .3s ease;
  opacity: 0;
}
.mob-nav-overlay.open {
  opacity: 1;
}
.mob-nav-body a {
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.mob-nav-body a:hover {
  padding-left: 2rem;
}

/* ── Cart drawer — плавный слайд ───────────────────────────────── */
.cart-drawer {
  transition: right .3s cubic-bezier(.4,0,.2,1);
}
.cart-overlay {
  transition: opacity .3s ease;
  opacity: 0;
}
.cart-overlay.open {
  opacity: 1;
}
.cart-row {
  animation: slideInRow .2s ease both;
}
@keyframes slideInRow {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Модалка — плавное появление ───────────────────────────────── */
.modal-ov {
  transition: opacity .2s ease;
  opacity: 0;
}
.modal-ov.open {
  opacity: 1;
}
.modal-box {
  animation: modalIn .28s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(.92) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Hero слайдер — плавнее ─────────────────────────────────────── */
.hero-slide {
  transition: opacity .65s cubic-bezier(.4,0,.2,1);
}
.hero-arr {
  transition: background .18s ease, transform .18s ease;
}
.hero-arr:hover {
  transform: translateY(-50%) scale(1.1);
}
.hero-dot {
  transition: width .3s ease, background .3s ease;
}

/* ── Trust strip items ──────────────────────────────────────────── */
.trust-item {
  transition: background .18s ease;
}
.trust-item:hover {
  background: rgba(59,130,246,.05);
}

/* ── Sections — появление при скролле ──────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Footer links ───────────────────────────────────────────────── */
.footer-col a {
  transition: color .15s ease, padding-left .15s ease;
  display: block;
}
.footer-col a:hover {
  color: #fff !important;
  padding-left: .4rem;
}

/* ── Scroll top button ──────────────────────────────────────────── */
#scroll-top {
  transition: opacity .3s ease, transform .2s ease, background .15s ease;
}
#scroll-top:hover {
  transform: translateY(-3px);
}

/* ── Input focus ────────────────────────────────────────────────── */
.fg input:focus, .fg textarea:focus, .fg select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

/* ── Toast ──────────────────────────────────────────────────────── */
.toast {
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
}

/* ── WhatsApp button pulse ──────────────────────────────────────── */
#wa-btn {
  animation: waPulse 3s ease-in-out infinite;
}
@keyframes waPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,.5); }
  50%       { box-shadow: 0 4px 32px rgba(37,211,102,.8), 0 0 0 8px rgba(37,211,102,.12); }
}
#wa-btn:hover {
  animation: none;
  box-shadow: 0 6px 28px rgba(37,211,102,.75) !important;
}

/* ── Chat button bounce ─────────────────────────────────────────── */
#chat-btn {
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
#chat-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(59,130,246,.55);
}

/* ── Skeleton loader для карточек ──────────────────────────────── */
.p-skeleton {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  animation: skeletonPulse 1.4s ease-in-out infinite;
}
@keyframes skeletonPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .55; }
}
.p-skeleton-img  { aspect-ratio: 4/3; background: var(--bg-soft2); }
.p-skeleton-body { padding: .9rem; display: flex; flex-direction: column; gap: .5rem; }
.p-skeleton-line { height: 12px; background: var(--bg-soft2); border-radius: 4px; }
.p-skeleton-line.short { width: 60%; }
.p-skeleton-line.price { width: 40%; height: 16px; }

/* ── Smooth image load ──────────────────────────────────────────── */
img {
  transition: opacity .3s ease;
}
img[loading="lazy"] {
  opacity: 0;
}
img[loading="lazy"].loaded {
  opacity: 1;
}

/* ── Catalogue filter tabs animation ───────────────────────────── */
.cat-tab {
  transition: color .15s ease, border-bottom-color .15s ease, background .15s ease;
}
.cat-tab.on {
  animation: tabActivate .25s ease both;
}
@keyframes tabActivate {
  from { color: var(--text-3); }
  to   { color: var(--blue); }
}

/* ── Admin sidebar links ────────────────────────────────────────── */
.adm-nav-link {
  transition: all .15s ease;
}

/* ── Smooth scroll ──────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ── Chat typing dots ───────────────────────────────────────────── */
.typing-dots span {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  margin: 0 1px;
  animation: typingBounce 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%            { transform: translateY(-6px); }
}

/* ── Chat box transition ────────────────────────────────────────── */
#chat-box { flex-direction: column; }

/* ── Badge pop ──────────────────────────────────────────────────── */
@keyframes badgePop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ── Bouton thème clair/sombre ─────────────────────────────────── */
#theme-toggle {
  background: var(--bg-soft2);
  border: 1.5px solid var(--border-2);
  border-radius: 99px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-2);
  font-size: .9rem;
  transition: all var(--ease);
  flex-shrink: 0;
}
#theme-toggle:hover { background: var(--blue-l); color: var(--blue); border-color: var(--blue); }