body{
    overflow-x: hidden;
  }
:root{--primary:#ef2b50;--dark:#222;--gray:#777;--light:#f5f5f5;--border:#e0e0e0;--blue:#005eff}
*{box-sizing:border-box} body{margin:0;font-family:Vazir,IRANSansX,system-ui}

.full-width-header{width:100%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.05);position:sticky;top:0;z-index:1000}

/* Notice bar */
.notice-bar{background:#0f1830;color:#cfe3ff;border-bottom:1px solid #e0e0e022}
.notice-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 12px}
.ticker{display:flex;gap:40px;white-space:nowrap;overflow:hidden;mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker>span{animation:ticker 16s linear infinite}
.ticker>span:nth-child(2){animation-delay:-5.3s}.ticker>span:nth-child(3){animation-delay:-10.6s}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.deal{display:flex;gap:6px;background:#101a36;border:1px solid #e0e0e022;border-radius:999px;padding:4px 8px;font-weight:900}
.deal span{min-width:22px;text-align:center}

/* Top bar */
.top-bar{background:var(--light);border-bottom:1px solid var(--border);padding:8px 0}
.top-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 15px;gap:10px}
.top-links{display:flex;gap:25px;flex-wrap:wrap}
.top-link{color:var(--dark);text-decoration:none;font-size:15px}
.top-link:hover{color:var(--primary)}
.support-info{font-size:13px;color:var(--gray);font-weight:900}
.support-number{color:var(--primary);margin-right:5px}
.top-controls{display:flex;align-items:center;gap:10px}
.chip{background:#fff;border:1px solid var(--border);border-radius:999px;padding:5px 10px;font-size:12px;cursor:pointer}
.chip:hover{filter:brightness(1.05)}
.top-controls .sep{width:1px;height:16px;background:#e0e0e0}

/* Main header */
.main-header{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:15px;gap:15px;position:relative}
.logo-container{display:flex;align-items:center;gap:10px}
.logo-img{height:40px}
.logo-title{font-size:18px;font-weight:700;color:var(--dark)}
.logo-subtitle{font-size:12px;color:var(--gray)}

/* Search */
.search-container{flex:1;max-width:600px;margin:0 30px}
.search-box{display:flex;background:var(--light);border-radius:30px;border:1px solid var(--border);transition:.2s;position:relative}
.search-box:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(239,43,80,.1)}
.search-input{flex:1;border:0;background:transparent;padding:10px 15px;outline:0;font-size:14px}
.search-btn{background:none;border:0;padding:0 15px;cursor:pointer;color:var(--gray)}
.search-suggest{position:absolute;inset-inline:0;top:105%;background:#fff;border:1px solid #e0e0e0;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.12);display:none;overflow:hidden;z-index:10}
.search-suggest.is-open{display:block}
.search-suggest a{display:flex;align-items:center;gap:10px;padding:10px 12px;text-decoration:none;color:#222;border-bottom:1px solid #f5f5f5}
.search-suggest a:hover{background:#f9fafb}

/* Actions */
.action-buttons{display:flex;gap:15px;position:relative}
.action-btn{display:flex;align-items:center;gap:8px;padding:10px 15px;border-radius:8px;font-size:14px;cursor:pointer;transition:.2s}
.category-btn{background:var(--primary);color:#fff;border:0}
.cart-btn{background:#fff;color:var(--dark);border:1px solid var(--border)}
.action-btn:hover{transform:translateY(-2px)}

/* Mega menu (نسخه‌ی خودت) */
.mega-menu{display:none;position:absolute;top:100%;right:0;width:1000px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.15);border-radius:8px;z-index:999;padding:25px}
.category-btn-container:hover .mega-menu{display:block;animation:fadeIn .25s}
.category-btn-container .mega-menu.open{display:block} /* برای موبایل با کلیک */
.mega-menu-container{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
.mega-menu-column h4{font-size:16px;margin-bottom:15px;padding-bottom:8px;border-bottom:2px solid var(--primary);color:var(--dark)}
.mega-menu-column a{display:flex;align-items:center;gap:10px;color:var(--gray);text-decoration:none;padding:8px 0}
.mega-menu-column a:hover{color:var(--blue);padding-right:10px}
.mega-menu-column i{color:var(--primary);font-size:14px}

/* Quick icons + cart */
.quick-icons{display:flex;gap:10px}
.qi{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--border);border-radius:10px;text-decoration:none;color:#222;background:#fff}
.qi:hover{transform:translateY(-2px);transition:.2s}
.cart-wrap{position:relative}
.cart-count{background:var(--primary);color:#fff;border-radius:999px;padding:0 6px;margin-inline-start:6px;font-size:12px}

/* Mini cart */
.mini-cart{position:absolute;inset-inline-end:0;top:89%;width:320px;background:#fff;border:1px solid #e0e0e0;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.12);display:none}
.cart-wrap:hover .mini-cart{display:block;animation:fadeIn .2s}
.mini-head{padding:10px 12px;border-bottom:1px solid #eee;font-weight:900}
.mini-items{max-height:260px;overflow:auto}
.mini-item{display:flex;gap:8px;padding:10px 12px;border-bottom:1px solid #f3f3f3}
.mini-item img{width:60px;height:60px;object-fit:cover;border-radius:8px}
.mi-meta b{display:block}
.mi-remove{margin-inline-start:auto;border:0;background:transparent;font-size:18px;cursor:pointer}
.mini-foot{padding:10px 12px;border-top:1px solid #eee}
.mini-actions{display:flex;gap:8px;margin-top:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:10px;text-decoration:none}
.btn.primary{background:var(--primary);color:#fff}
.btn.ghost{background:#fff;border:1px solid #e0e0e0}

/* USP */
.usp-bar{background:#fafafa;border-top:1px solid #eaeaea;border-bottom:1px solid #eaeaea}
.usp-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:10px 12px}
.usp{display:flex;gap:8px;align-items:center;justify-content:center;color:#333}

/* Dark mode */
:root{color-scheme:light dark}
:root[data-theme="dark"] .full-width-header{background:#0b1220;color:#e7edf7}
:root[data-theme="dark"] .top-bar{background:#101a36;border-color:#223}
:root[data-theme="dark"] .top-link{color:#cfe3ff}
:root[data-theme="dark"] .mega-menu,.search-suggest,.mini-cart{background:#101a36;color:#e7edf7;border-color:#223}
:root[data-theme="dark"] .qi,.btn.ghost{background:#101a36;border-color:#223;color:#e7edf7}
:root[data-theme="dark"] .btn.primary{background:#7c3aed}

/* ریسپانسیو */
@media (max-width:1024px){
  .mega-menu{width:800px;right:auto;left:50%;transform:translateX(-50%)}
  .mega-menu-container{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
  .top-container{flex-direction:column;gap:10px;padding:10px}
  .top-links{gap:15px;flex-wrap:wrap;justify-content:center}
  .main-header{flex-wrap:wrap}
  .search-container{order:3;width:100%;margin:10px 0 0}
  .action-buttons{margin-right:auto}
  .mega-menu{width:90%;right:auto;left:50%;transform:translateX(-50%)}
  .mega-menu-container{grid-template-columns:1fr}
  .usp-in{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .usp-in{grid-template-columns:1fr}
}

@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}


/* در موبایل */
/* -------- Mobile rules: hide mega menu + certain items, show only hamburger -------- */
@media (max-width: 768px){
  /* Do NOT show the mega menu on mobile */
  .category-btn-container:hover .mega-menu,
  .mega-menu{ display: none !important; }

  /* Hide these in mobile */
  .top-links,               /* we’ll show them inside the drawer instead */
  .top-link.login,          /* registration/login */
  .support-info,            /* support phone */
  .quick-icons,             /* ❤️ ⇄ 👤 */
  .cart-wrap                /* cart button + mini-cart */
  { display: none !important; }

  /* Make the category button act as the hamburger trigger */
  .category-btn{
    background:#fff;
    color:var(--dark);
    border:1px solid var(--border);
    min-width:44px;
  }
  .lang-curr{
  display: none;
}
}


/* -------- Mobile Drawer (off-canvas) -------- */
.mobile-drawer{
  position: fixed;
  inset: 0 0 0 auto;
  width: 85vw;
  max-width: 380px;
  background: #fff;
  color:#222;
  box-shadow: -12px 0 30px rgba(0,0,0,.15);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 1101;
  display: flex;
  flex-direction: column;
}
.mobile-drawer.is-open{ transform: translateX(0) }
:root[data-theme="dark"] .mobile-drawer{
  background:#101a36; color:#e7edf7; box-shadow: -12px 0 30px rgba(0,0,0,.45);
}

.drawer-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid #eaeaea; font-weight:900;
}
:root[data-theme="dark"] .drawer-header{ border-color:#223 }

.drawer-close{
  background:transparent; border:0; font-size:22px; cursor:pointer;
  line-height:1; padding:6px; border-radius:10px;
}

.drawer-body{ padding:10px 12px; overflow:auto }
.drawer-nav{ display:flex; flex-direction:column; gap:6px; }
.drawer-nav a{
  display:block; padding:12px 12px; text-decoration:none; color:#222;
  border:1px solid #eaeaea; border-radius:12px; background:#fff;
}
.drawer-nav a:hover{ background:#f9fafb }
:root[data-theme="dark"] .drawer-nav a{
  color:#e7edf7; background:#0c1530; border-color:#223;
}

/* Backdrop */
.drawer-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:1100;
}
.drawer-backdrop.is-active{ opacity:1; pointer-events:auto }

/* Focus visibility */
.mobile-drawer :where(a,button):focus-visible{
  box-shadow: 0 0 0 3px rgba(0,110,255,.25);
}

/* Lock scroll when drawer open */
body.no-scroll{ overflow:hidden }


/* --- Fix: نمایش آیکن ورود/ثبت‌نام در موبایل، مخفی‌کردن بقیه لینک‌ها --- */
@media (max-width: 768px){
  /* دیگه کل top-links رو مخفی نکن! فقط آیتم‌ها به‌جز login پنهان بشن */
  .top-links { display: flex !important; align-items: center; gap: 8px; }
  .top-links a:not(.login){ display: none !important; }

  /* خود دکمه‌ی ورود/ثبت‌نام به‌صورت آیکن */
  .top-link.login{
    position: relative;
    display: grid !important;
    place-items: center;
    width: 38px; height: 38px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff; color:#222;
    font-size:0; /* متن رو مخفی می‌کنه */
  }
  .top-link.login::before{
    content:"\f007"; /* fa-user */
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    font-size:16px;
    line-height:1;
  }

  /* تم تیره هماهنگ */
  :root[data-theme="dark"] .top-link.login{
    background:#101a36; color:#e7edf7; border-color:#223;
  }
}
/* هدر همراه اسکرول حرکت کند */
.full-width-header{
  position: static !important; /* یا relative */
  top: auto !important;
}

/* اگر قبلاً به خاطر fixed/sticky پدینگ به بدنه داده‌ای */
body{ padding-top: 0 !important; }






 :root{
      /* === RED THEME === */
      --primary:#dc2626;          /* red-600 */
      --primary-600:#b91c1c;      /* darker */
      --soft:#fff5f5;             /* page soft bg */
      --line:#ffe4e6;             /* rose-100 */
      --text:#111827;             /* slate-900 */
      --muted:#6b7280;            /* slate-500 */
      --success:#16a34a;          /* green-600 */
      --shadow:0 12px 35px rgba(220,38,38,.12);
      --radius-xl:26px;
      --radius-lg:18px;
      --radius-md:14px;
    }
    *{box-sizing:border-box}
    body{font-family:"Vazirmatn",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:linear-gradient(180deg,#fff7f7, #fff0f0 20%, #fff7f7);color:var(--text)}

    /* Shell */
    .product-shell{background:#fff;border:1px solid var(--line);border-radius:32px;padding:22px;box-shadow:var(--shadow)}
    .product-shell-inner{background:linear-gradient(180deg,#fffafa,#fff5f5);border-radius:28px;padding:24px}

    /* Left summary card */
    .summary-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:var(--shadow)}

    /* Countdown */
    .countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:linear-gradient(180deg,#fff7f7,#fff2f2);border:1px solid var(--line);border-radius:24px;padding:12px}
    .cd-item{background:#fff;border:1px solid var(--line);border-radius:18px;text-align:center;padding:10px;font-weight:800;box-shadow:var(--shadow)}
    .cd-item small{display:block;color:var(--muted);font-weight:700}

    /* Status */
    .status-pill{display:inline-flex;align-items:center;gap:.4rem;background:#ecfdf5;border:1px solid #bbf7d0;color:#065f46;border-radius:999px;padding:.35rem .7rem;font-weight:800}

    /* Price, quantity */
    .price{font-size:1.9rem;font-weight:900;color:#111}
    .old-price{color:var(--muted);text-decoration:line-through}
    .qty-wrap{display:flex;gap:8px;align-items:center}
    .qty-btn{width:42px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;font-weight:900}
    .qty-input{width:70px;height:44px;border-radius:12px;border:1px solid var(--line);text-align:center;font-weight:800}

    .btn-add{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;border:none;border-radius:14px;padding:13px 16px;font-weight:900;background:linear-gradient(135deg,var(--primary),#ef4444);color:#fff;box-shadow:0 12px 30px rgba(239,68,68,.25);transition:transform .15s ease, box-shadow .15s ease}
    .btn-add:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(239,68,68,.35)}

    .mini-row{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px}
    .mini-row i{color:var(--primary)}

    /* Center info */
    .title{font-weight:900}
    .subtitle{color:var(--muted)}
    .chip{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.42rem .7rem;margin:.25rem 0;box-shadow:var(--shadow);font-weight:800}
    .chip i{color:#64748b}

    .card-soft{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:var(--shadow)}

    /* Gallery */
    .gallery-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:var(--shadow)}
    .discount-badge{position:absolute;z-index: 9999999;top:16px;left:16px;background:linear-gradient(135deg,#fb7185,var(--primary));color:#fff;border-radius:999px;padding:.45rem .7rem;font-weight:800;box-shadow:var(--shadow)}
    .action-icons{position:absolute;z-index: 99999999;top:12px;right:12px;display:flex;gap:10px}
    .icon-btn{width:40px;height:40px;border-radius:999px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:var(--shadow);transition:transform .15s ease}
    .icon-btn:hover{transform:translateY(-2px)}

    .main-image{position:relative;border-radius:18px;border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center;background:#fff7f7;min-height:280px}
    .main-image img{width:100%;height:auto}
    .slide-img{position:absolute;inset:0;object-fit:contain;transition:transform .35s ease, opacity .35s ease}

    .thumbs-wrap{position:relative;background:linear-gradient(180deg,#fff7f7,#fff2f2);border:1px solid var(--line);border-radius:22px;padding:12px;margin-top:14px}
    .thumbs{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;padding:6px}
    .thumb{flex:0 0 auto;width:82px;height:70px;border-radius:16px;border:2px solid transparent;overflow:hidden;background:#fff;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s ease, border-color .15s ease}
    .thumb img{width:100%;height:100%;object-fit:cover}
    .thumb.active{border-color:var(--primary)}
    .thumb:hover{transform:translateY(-2px)}
    .thumb-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:999px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
    .thumb-arrow.prev{right:8px}
    .thumb-arrow.next{left:8px}

    /* Stars */
    .stars{color:#f59e0b}

    /* Helpers */
    .small-muted{font-size:.9rem;color:var(--muted)}

    /* Bottom info cards */
    .info-pills .pill{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.5rem .8rem;font-weight:800}
    .progress-soft{background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px}
    .progressbar{height:8px;background:#fee2e2;border-radius:999px;overflow:hidden}
    .progressbar > span{display:block;height:100%;background:linear-gradient(90deg,#fb7185,var(--primary));width:0%;transition:width .8s ease}
    .feature-section{margin-top:2rem;background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:var(--shadow)}
.feature-item{text-align:center;padding:15px;transition:transform .2s ease}
.feature-item:hover{transform:translateY(-4px)}
.feature-icon{width:64px;height:64px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(135deg,#fecaca,var(--primary));color:#fff;font-size:26px;box-shadow:0 8px 20px rgba(220,38,38,.25)}
.feature-title{font-weight:900;color:var(--primary)}
.feature-desc{font-size:.9rem;color:var(--muted)}
    @media (max-width: 991.98px){
      .product-shell-inner{padding:18px}
      .gallery-card{order:-1}
    }

    .nav-tabs .nav-link {
  border: none;
  border-radius: 999px;
  margin: 0 .3rem;
  background: #fff5f5;
  color: #dc2626;
}
.nav-tabs .nav-link.active {
  background: #dc2626;
  color: #fff;
}

/* Related products */
.rel-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:16px;
  box-shadow:0 10px 26px rgba(220,38,38,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.rel-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(220,38,38,.12);
}
.rel-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 2px 10px 2px;
}
.rel-badge{
  background:#fff;
  color:var(--primary);
  border:2px solid var(--primary);
  border-bottom-width:4px;
  border-radius:12px;
  padding:.15rem .55rem;
  font-weight:800;
}
.rel-count{
  font-weight:900;
  color:#111;
  background:#fff5f5;
  border:1px solid var(--line);
  border-radius:999px;
  padding:.2rem .55rem;
  font-size:.9rem;
}
.rel-thumb{
  width:100%; height:215px; border-radius:16px;
  border:1px solid var(--line); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
 margin-bottom:12px;
}
.rel-thumb img{ width:100%; height:100%; object-fit:contain; }
.rel-title{ font-weight:800; margin-bottom:6px; min-height:48px; }
.rel-rating{ color:#f59e0b; font-weight:700; font-size:.9rem; margin-bottom:6px; }
.rel-price{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.rel-old{ color:#94a3b8; text-decoration:line-through; }
.rel-new{ color:var(--primary); font-weight:900; font-size:1.1rem; }

.rel-actions{
  display:flex; align-items:center; justify-content:space-between;
}
.rel-actions .icon{
  width:40px; height:40px; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:#111;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, box-shadow .15s ease, color .15s ease;
}
.rel-actions .icon:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(0,0,0,.06);
  color:var(--primary);
}
.rel-pill{
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#fb7185,var(--primary));
  color:#fff; border-radius:999px; padding:.35rem .8rem;
  font-weight:900; box-shadow:0 10px 24px rgba(220,38,38,.25);
}

.tooltip-inner {
    max-width: var(--bs-tooltip-max-width);
    padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
    color: var(--bs-tooltip-color);
    text-align: center;
    background-color: brown;
    border-radius: 13px;
    font-family: 'VAZIRMATN';
}




:root{
    --f-ink:#0f172a;        /* رنگ متن اصلی */
    --f-muted:#6b7280;      /* متن ثانویه */
    --f-line:#e5e7eb;       /* خط جداکننده */
    --f-accent:#ff3b30;     /* قرمز تم */
    --f-accent2:#ff6b3d;    /* نارنجی تم */
    --f-pill:#f8fafc;       /* چیپ‌ها/پس‌زمینه‌ی عناصر کوچک */
  }
  footer.slim-footer{direction:rtl; color:var(--f-ink); background:transparent;}
  .sf-wrap{max-width:1250px}
  .sf-hr{border:0; height:1px; background:linear-gradient(90deg, transparent, var(--f-line), transparent)}
  .sf-title{font-weight:900; font-size:1.05rem; margin-bottom:.9rem}
  .sf-link{color:var(--f-muted); text-decoration:none}
  .sf-link:hover{color:var(--f-ink)}
  .sf-badge{background:#d91645; color:#fff; border-radius:10px; padding:.25rem .6rem; font-weight:800; font-size:.82rem}
  .sf-app{border:1px solid var(--f-line); background:#fff; color:var(--f-ink)}
  .sf-social a{width:40px; height:40px; border-radius:50%; border:1px solid var(--f-line); display:grid; place-items:center; color:var(--f-muted)}
  .sf-social a:hover{border-color:var(--f-accent); color:var(--f-accent)}
  .chip{display:inline-block; border:1px solid var(--f-line); background:var(--f-pill); border-radius:999px; padding:.25rem .6rem; margin:.2rem .25rem; color:var(--f-muted); font-size:.85rem}
  .pay img{height:26px; filter:grayscale(100%) opacity(.8)}
  .contact i{color:var(--f-accent)}
  .newsletter .form-control{border-color:var(--f-line)}
  .newsletter .btn{background:#d91645; border:none; color:#fff; font-weight:700}

  /* Back-to-top (floating) */
  #toTop{
    position:fixed; left:18px; bottom:18px; z-index:9999;
    width:46px; height:46px; border:none; border-radius:12px; display:none;
    color:#fff; background:#f12754;
    box-shadow:0 10px 22px rgba(255,59,48,.28)
  }
  #toTop:hover{transform:translateY(-2px)}