:root { --violet:#7817ff; --blue:#00a8ff; --ink:#07091b; --panel:rgba(17,20,57,.68); --line:rgba(157,178,255,.21); --muted:#b9c5ee; }
* { box-sizing:border-box; margin:0; } html { scroll-behavior:smooth; } body { min-height:100vh; overflow-x:hidden; color:#f8f9ff; background:radial-gradient(circle at 72% 12%,#1b2465 0,transparent 26%),radial-gradient(circle at 8% 58%,#250f66 0,transparent 30%),var(--ink); font-family:Poppins,sans-serif; } body.modal-open { overflow:hidden; } .aurora { position:fixed; pointer-events:none; border-radius:50%; filter:blur(90px); opacity:.34; z-index:-1; }.aurora-one { width:440px;height:440px;background:#8022ff;top:140px;right:-160px; }.aurora-two { width:340px;height:340px;background:#009dff;bottom:170px;left:-150px; }
.anabolic-header { width:min(1320px,92%); margin:24px auto 0; padding:16px 22px; display:flex; justify-content:space-between; align-items:center; border:1px solid var(--line); border-radius:19px; background:rgba(10,12,37,.66); backdrop-filter:blur(18px); position:relative; z-index:5; }.anabolic-logo { color:white;text-decoration:none;font-family:Orbitron,sans-serif;font-size:25px;font-weight:900;letter-spacing:2px;line-height:1; }.anabolic-logo span { color:#a640ff;text-shadow:0 0 20px #8524ff; }.anabolic-logo small { display:block;margin-top:5px;color:#81bdff;font-size:8px;letter-spacing:5px;text-align:center; }.anabolic-nav { display:flex;align-items:center;gap:25px; }.anabolic-nav a { color:#cbd4ff;text-decoration:none;font-size:13px;font-weight:700;transition:.25s; }.anabolic-nav a:hover,.anabolic-nav a.active { color:white;text-shadow:0 0 17px #a43dff; }.icon-link { position:relative;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.06); }.icon-link span { position:absolute;top:-8px;right:-8px;min-width:17px;height:17px;border-radius:9px;background:linear-gradient(135deg,var(--violet),var(--blue));color:#fff;font-size:9px;text-align:center;line-height:17px; }.menu-toggle { display:none; }
.steroid-hero { max-width:980px;margin:0 auto;padding:130px 24px 95px;text-align:center; }.eyebrow { color:#a8caff;font-size:11px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase; }.eyebrow i { margin-right:7px;color:#c15aff; }.steroid-hero h1,.section-heading h2,.modal-details h2 { font-family:Orbitron,sans-serif; }.steroid-hero h1 { margin:20px auto;max-width:850px;font-size:clamp(42px,7.5vw,88px);line-height:1.04;letter-spacing:-2px; }.steroid-hero h1 span,.section-heading h2 span { color:#a23cff;text-shadow:0 0 28px rgba(147,37,255,.65); }.hero-copy { max-width:640px;margin:0 auto;color:var(--muted);font-size:16px;line-height:1.75; }.hero-cta,.modal-cart-btn { margin-top:30px;display:inline-flex;gap:11px;align-items:center;justify-content:center;border:0;border-radius:12px;padding:15px 22px;background:linear-gradient(105deg,#7621ff,#079cff);color:#fff;text-decoration:none;font:700 13px Poppins,sans-serif;box-shadow:0 14px 35px rgba(64,72,255,.34);cursor:pointer;transition:.25s; }.hero-cta:hover,.modal-cart-btn:hover { transform:translateY(-3px);box-shadow:0 18px 42px rgba(112,43,255,.5); }
.collection { width:min(1320px,92%);margin:0 auto 105px; }.section-heading { display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:32px; }.section-heading h2 { margin-top:9px;font-size:clamp(29px,4vw,48px); }.section-heading>p { color:#91a5df;font-size:12px;letter-spacing:1px; }.steroid-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px; }.steroid-card { overflow:hidden;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,rgba(27,32,83,.85),rgba(10,13,39,.85));box-shadow:0 22px 50px rgba(0,0,0,.2);cursor:pointer;transition:.32s; }.steroid-card:hover { transform:translateY(-8px);border-color:rgba(126,106,255,.75);box-shadow:0 25px 60px rgba(65,35,180,.35); }.card-image { position:relative;aspect-ratio:1.03;overflow:hidden;background:#e9eaff; }.card-image img { width:100%;height:100%;object-fit:cover;transition:.5s; }.steroid-card:hover .card-image img { transform:scale(1.045); }.card-image span { position:absolute;top:14px;left:14px;padding:6px 10px;border:1px solid rgba(255,255,255,.46);border-radius:99px;background:rgba(23,11,92,.73);backdrop-filter:blur(8px);font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase; }.card-content { position:relative;padding:22px 20px 19px; }.card-number { position:absolute;right:18px;top:19px;color:rgba(146,171,255,.43);font:700 13px Orbitron,sans-serif; }.card-content h3 { max-width:84%;font:700 17px Orbitron,sans-serif;line-height:1.35; }.strength { display:inline-block;margin:14px 0 18px;padding:5px 9px;border-radius:7px;background:linear-gradient(105deg,rgba(134,30,255,.5),rgba(0,151,255,.45));color:#fff;font-size:11px;font-weight:800; }.details-btn { width:100%;display:flex;justify-content:space-between;align-items:center;padding-top:15px;border:0;border-top:1px solid var(--line);background:transparent;color:#b8c9ff;font:700 11px Poppins,sans-serif;text-transform:uppercase;letter-spacing:.7px;cursor:pointer; }
.modal-overlay { position:fixed;inset:0;display:grid;place-items:center;padding:25px;background:rgba(3,4,17,.8);backdrop-filter:blur(11px);opacity:0;visibility:hidden;transition:.25s;z-index:30; }.modal-overlay.active { opacity:1;visibility:visible; }.steroid-modal { position:relative;display:grid;grid-template-columns:minmax(300px,.9fr) minmax(400px,1.1fr);width:min(1080px,100%);max-height:calc(100vh - 50px);overflow:auto;border:1px solid rgba(145,167,255,.33);border-radius:24px;background:linear-gradient(135deg,#141844,#080a23);box-shadow:0 28px 95px rgba(0,0,0,.65); }.modal-image { min-height:550px;background:#e9eaff; }.modal-image img { width:100%;height:100%;object-fit:cover; }.modal-details { padding:52px 42px 38px; }.modal-details h2 { margin:12px 0 8px;font-size:clamp(28px,3.5vw,44px);line-height:1.14; }.modal-sku { display:inline-block;padding:6px 10px;border:1px solid var(--line);border-radius:7px;color:#aac0ff;font-size:10px;font-weight:800;letter-spacing:1px; }.close-btn { position:absolute;z-index:2;top:14px;right:14px;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:#101339;color:#fff;font-size:26px;line-height:1;cursor:pointer; }.spec-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:25px 0 15px; }.spec-grid div,.modal-copy { border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.045); }.spec-grid div { padding:14px; }.spec-grid span { display:block;margin-bottom:7px;color:#97aeea;font-size:9px;font-weight:800;letter-spacing:.8px;text-transform:uppercase; }.spec-grid strong { color:#fff;font:700 16px Orbitron,sans-serif; }.modal-copy { margin-top:10px;padding:15px; }.modal-copy h3 { margin-bottom:6px;color:#c9d7ff;font-size:11px;text-transform:uppercase;letter-spacing:1px; }.modal-copy p { color:var(--muted);font-size:12px;line-height:1.65; }.modal-actions { display:flex;gap:10px;margin-top:19px; }.modal-cart-btn { flex:1;margin:0; }.modal-cart-btn.added { background:linear-gradient(105deg,#1fcf95,#0287c9); }.modal-message-btn { display:grid;place-items:center;width:49px;border:1px solid var(--line);border-radius:12px;color:#b9c8ff;text-decoration:none; }
.anabolic-footer { display:grid;grid-template-columns:1.4fr 1fr auto;gap:35px;align-items:center;padding:45px 7% 21px;border-top:1px solid var(--line);background:rgba(4,6,25,.75); }.anabolic-footer p { margin-top:12px;color:#8ca6ec;font:700 10px Orbitron,sans-serif;letter-spacing:2px;text-transform:uppercase; }.footer-links { display:flex;flex-wrap:wrap;gap:10px 20px; }.footer-links a,.footer-social a { color:#adbee8;text-decoration:none;font-size:11px;font-weight:700; }.footer-social { display:flex;gap:9px; }.footer-social a { display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:9px; }.anabolic-footer small { grid-column:1/-1;padding-top:18px;border-top:1px solid rgba(157,178,255,.12);color:#7e8cbf;font-size:10px; }
@media (max-width:850px) { .steroid-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.anabolic-nav { position:absolute;top:calc(100% + 10px);right:0;width:220px;padding:15px;display:grid;gap:5px;border:1px solid var(--line);border-radius:15px;background:#101339;opacity:0;visibility:hidden;transform:translateY(-10px);transition:.2s; }.anabolic-nav.is-open { opacity:1;visibility:visible;transform:none; }.anabolic-nav a { padding:10px; }.menu-toggle { display:flex;gap:4px;padding:10px;border:1px solid var(--line);border-radius:9px;background:#131645;color:#fff; }.menu-toggle span { width:4px;height:4px;border-radius:50%;background:currentColor; }.steroid-modal { grid-template-columns:1fr; }.modal-image { min-height:300px;max-height:380px; }.anabolic-footer { grid-template-columns:1fr; }.footer-social { grid-row:2; } }
@media (max-width:540px) { .anabolic-header { width:94%;margin-top:12px;padding:13px 15px; }.anabolic-logo { font-size:20px; }.steroid-hero { padding:88px 20px 65px; }.steroid-grid { grid-template-columns:1fr;gap:15px; }.steroid-card { display:grid;grid-template-columns:42% 58%; }.card-image { aspect-ratio:auto; }.card-content { padding:17px 14px; }.card-content h3 { font-size:14px; }.strength { margin:10px 0 13px; }.section-heading { align-items:start;flex-direction:column;margin-bottom:20px; }.modal-overlay { padding:10px; }.steroid-modal { max-height:calc(100vh - 20px);border-radius:18px; }.modal-image { min-height:250px; }.modal-details { padding:27px 18px 21px; }.modal-actions { flex-direction:column; }.modal-message-btn { width:100%;height:43px; }.anabolic-footer { padding:36px 7% 18px; } }

/* Steroids footer: same layout as the site footer, with its own violet-blue palette. */
.anabolic-footer { position:relative; overflow:hidden; padding:75px 7% 28px; border-top:1px solid var(--line); background:linear-gradient(180deg,rgba(20,24,72,.96),rgba(5,7,28,.98)); }
.anabolic-footer::before { content:""; position:absolute; top:-180px; right:-120px; width:420px; height:420px; border-radius:50%; background:rgba(113,31,255,.24); filter:blur(90px); }
.anabolic-footer::after { content:""; position:absolute; top:0; left:0; width:100%; height:2px; background:linear-gradient(90deg,transparent,#a84dff,#83ceff,#a84dff,transparent); box-shadow:0 0 24px rgba(123,73,255,.8); }
.footer-container { position:relative; z-index:1; display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:50px; }.footer-logo { width:280px; max-width:100%; filter:drop-shadow(0 0 28px rgba(112,55,255,.48)); transition:.4s ease; }.footer-logo:hover { transform:scale(1.03); filter:drop-shadow(0 0 40px rgba(54,172,255,.7)); }.footer-about p { max-width:520px; margin-top:24px; color:#bdc8f1; font-size:15px; line-height:1.9; }.footer-title { position:relative; display:inline-block; margin-bottom:24px; font:700 20px Orbitron,sans-serif; letter-spacing:1px; }.footer-title::after { content:""; position:absolute; left:0; bottom:-8px; width:55px; height:3px; border-radius:99px; background:linear-gradient(90deg,#a84dff,transparent); }.footer-contact a { display:flex; align-items:center; gap:12px; margin-bottom:18px; color:#bdc8f1; text-decoration:none; font-size:14px; transition:.3s; word-break:break-word; }.footer-contact a i { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.08); color:#b364ff; }.footer-contact a:hover { transform:translateX(8px); color:#fff; text-shadow:0 0 14px rgba(130,89,255,.6); }.footer-social { display:block; }.social-icons { display:flex; flex-wrap:wrap; gap:16px; }.social-icons a { display:grid; place-items:center; width:58px; height:58px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.08); color:#fff; text-decoration:none; font-size:22px; transition:.3s; }.social-icons a:hover { transform:translateY(-8px) scale(1.05); border-color:#a84dff; background:linear-gradient(135deg,rgba(149,45,255,.8),rgba(0,151,255,.45)); box-shadow:0 20px 45px rgba(79,45,222,.35); }.footer-bottom { position:relative; z-index:1; margin-top:60px; padding-top:24px; border-top:1px solid rgba(157,178,255,.15); color:#9daee1; font-size:14px; text-align:center; }
@media (max-width:850px) { .footer-container { grid-template-columns:1fr; gap:40px; } }
@media (max-width:540px) { .anabolic-footer { padding:55px 5% 22px; }.footer-title { font-size:18px; }.footer-about p,.footer-contact a { font-size:14px; }.social-icons a { width:54px; height:54px; border-radius:16px; } }

/* Keep footer sections in one row and place the copyright bar below them. */
.anabolic-footer { display:block; }
.footer-logo { display:inline-block; width:auto; }
.footer-bottom { display:block; width:100%; }

/* Steroids card actions and price treatment. */
.steroid-wishlist-btn { position:absolute; top:12px; right:12px; display:grid; place-items:center; width:37px; height:37px; border:1px solid rgba(207,187,255,.64); border-radius:50%; background:rgba(21,13,76,.72); backdrop-filter:blur(8px); color:#d9c9ff; cursor:pointer; transition:.25s; }
.steroid-wishlist-btn i:last-child { display:none; }.steroid-wishlist-btn:hover,.steroid-wishlist-btn.is-active { color:#fff; border-color:#c063ff; background:linear-gradient(135deg,#942fff,#159eff); box-shadow:0 0 22px rgba(151,59,255,.72); transform:scale(1.09); }.steroid-wishlist-btn.is-active i:first-child { display:none; }.steroid-wishlist-btn.is-active i:last-child { display:block; }
.card-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:14px 0 18px; }.card-meta .strength { margin:0; }.card-meta strong { color:#fff; font:700 13px Orbitron,sans-serif; text-shadow:0 0 12px rgba(65,165,255,.55); }

/* Compact modal metadata keeps the product image and details balanced. */
.modal-meta-row { display:flex; align-items:center; gap:9px; margin-bottom:20px; }.modal-meta-row .modal-sku { margin:0; }.modal-price { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid rgba(109,194,255,.42); border-radius:7px; background:linear-gradient(105deg,rgba(126,35,255,.32),rgba(0,149,255,.22)); }.modal-price span { color:#afc4ff; font-size:9px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; }.modal-price strong { color:#fff; font:700 13px Orbitron,sans-serif; text-shadow:0 0 14px rgba(78,180,255,.65); }.modal-details .spec-grid { margin-top:0; }.modal-image { align-self:stretch; overflow:hidden; }.modal-image img { display:block; min-height:100%; }
@media (max-width:540px) { .modal-meta-row { margin-bottom:14px; }.modal-price { padding:6px 8px; }.modal-price strong { font-size:11px; } }

/* Match the main navigation structure and give Steroids wishlists their own fill effect. */
.steroid-wishlist-btn { z-index:2; overflow:hidden; }.steroid-wishlist-btn i { position:absolute; font-size:16px; line-height:1; }.steroid-wishlist-btn i:last-child,.steroid-wishlist-btn.is-active i:first-child { display:block; }.steroid-wishlist-btn .fa-regular { opacity:.95; }.steroid-wishlist-btn .fa-solid { color:#d777ff; clip-path:inset(100% 0 0 0); filter:drop-shadow(0 0 12px rgba(173,74,255,.9)); transition:clip-path .45s cubic-bezier(.22,1,.36,1); }.steroid-wishlist-btn.is-active .fa-solid { clip-path:inset(0 0 0 0); }.steroid-wishlist-btn.is-animating .fa-solid { animation:steroidHeartFillPop .52s ease; }
@keyframes steroidHeartFillPop { 0% { transform:scale(.82); } 65% { transform:scale(1.22); } 100% { transform:scale(1); } }
@media (max-width:850px) { .anabolic-nav .icon-link { width:100%; height:42px; padding:0; margin-top:5px; } }

.steroid-hero h1 { font-size:clamp(38px,6.5vw,76px); }

@media (max-width:540px) {
  .footer-about p { font-size:12px; line-height:1.65; }

  .steroid-modal .modal-image { display:grid; place-items:center; height:210px; min-height:0; max-height:210px; background:#0d1030; }
  .steroid-modal .modal-image img { width:100%; height:100%; min-height:0; object-fit:contain; }

  .card-image span { right:58px; max-width:calc(100% - 72px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .steroid-wishlist-btn { top:10px; right:10px; }
}

@media (max-width:540px) {
  .steroid-modal .modal-details { padding:20px 16px 16px; }
  .steroid-modal .modal-details h2 { margin:8px 0 6px; font-size:25px; }
  .steroid-modal .eyebrow { font-size:9px; letter-spacing:1.7px; }
  .steroid-modal .modal-meta-row { gap:6px; margin-bottom:10px; }
  .steroid-modal .modal-sku,.steroid-modal .modal-price { padding:5px 7px; }
  .steroid-modal .modal-price span { font-size:8px; }
  .steroid-modal .spec-grid { gap:7px; margin-bottom:8px; }
  .steroid-modal .spec-grid div { padding:10px; }
  .steroid-modal .spec-grid span { margin-bottom:4px; font-size:8px; }
  .steroid-modal .spec-grid strong { font-size:13px; }
  .steroid-modal .modal-copy { margin-top:7px; padding:10px; }
  .steroid-modal .modal-copy h3 { margin-bottom:4px; font-size:10px; }
  .steroid-modal .modal-copy p { font-size:11px; line-height:1.42; }
  .steroid-modal .modal-actions { margin-top:11px; }
  .steroid-modal .modal-cart-btn { padding:11px 15px; }
}