/* Ares Men's Health — store
   Tokens taken from the live Wix site (see BRAND.md). Do not introduce a new
   palette; this has to read as the same company across the domain jump. */

:root{
  --black:#000; --ink:#141414;
  --gold:#FFB908; --gold-deep:#E8A600;
  --cream:#FFF4D6; --sand:#F2EFE6;
  --stone:#4A4844; --mute:#9C988F;

  --bg:#F2EFE6; --bg-alt:#E9E5D9; --surface:#fff;
  --fg:#000; --fg-2:#4A4844; --fg-3:#6E6A63;
  --rule:#DCD7C9;
  --shadow:0 1px 2px rgba(20,20,20,.05),0 10px 30px -16px rgba(20,20,20,.18);

  --display:"Poppins","Futura","Avenir Next","Century Gothic",system-ui,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Helvetica,Arial,sans-serif;
  --r:16px; --pill:100px; --max:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);
     font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
/* height:auto is required: the width/height attributes on <img> otherwise fix
   the used height and aspect-ratio never resolves. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;text-wrap:balance;margin:0;letter-spacing:-.02em}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--gold-deep);outline-offset:2px;border-radius:4px}

/* ---------- chrome ---------- */
.topbar{background:var(--black);color:#fff;font-size:12.5px;letter-spacing:.06em;
        text-transform:uppercase;padding:9px 0}
.topbar .wrap{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap}
.topbar a{color:var(--gold);text-decoration:none}
.topbar a:hover{text-decoration:underline}

header.site{background:var(--black);position:sticky;top:0;z-index:30}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;
                  gap:20px;padding-block:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff}
.brand svg{width:38px;height:38px;flex:none}
.brand b{font-family:var(--display);font-size:22px;letter-spacing:.1em;font-weight:700;line-height:1}
.brand i{display:block;font-style:normal;font-size:8.5px;letter-spacing:.36em;
         color:var(--mute);margin-top:3px}
nav.main{display:flex;align-items:center;gap:22px;font-size:14.5px}
nav.main a{text-decoration:none;color:#fff;padding-block:4px;
           border-bottom:2px solid transparent;transition:color .18s,border-color .18s}
nav.main a:hover{color:var(--gold)}
nav.main a[aria-current="page"]{color:var(--gold);border-color:var(--gold)}
nav.main .portal{background:var(--gold);color:#000;font-weight:700;
                 border-radius:var(--pill);padding:11px 22px;border:none}
nav.main .portal:hover{background:var(--gold-deep);color:#000}
@media (max-width:840px){nav.main a:not(.portal){display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
     font-family:var(--display);font-weight:700;font-size:16px;text-decoration:none;
     border-radius:var(--pill);padding:15px 30px;border:2px solid transparent;cursor:pointer;
     transition:background .18s,color .18s,border-color .18s,transform .18s}
.btn-primary{background:var(--gold);color:#000}
.btn-primary:hover{background:var(--gold-deep);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--fg)}
.btn-ghost:hover{background:var(--fg);color:#fff}
.btn-block{width:100%}

/* ---------- hero ---------- */
.hero{background:var(--black);color:#fff;padding:74px 0 66px}
.hero .eyebrow{color:var(--gold)}
.hero h1{font-size:clamp(34px,5vw,58px);line-height:1.04;margin-bottom:18px;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p{color:#BDB8AC;max-width:56ch;font-size:18.5px;margin:0 0 26px}

.eyebrow{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
         color:var(--fg-3);font-weight:700;margin:0 0 12px}

/* ---------- product grid ---------- */
section{padding:66px 0}
section.alt{background:var(--bg-alt)}
section > .wrap > h2{font-size:clamp(25px,3vw,34px);margin-bottom:8px}
.section-lede{color:var(--fg-2);max-width:60ch;margin:0 0 34px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:26px}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
      overflow:hidden;display:flex;flex-direction:column;text-decoration:none;
      transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--mute)}
.card img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#fff}
.card .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{font-size:20px}
.card .meta{color:var(--fg-3);font-size:14px}
.card .foot{margin-top:auto;padding-top:14px;display:flex;align-items:baseline;gap:10px}
.card .price{font-family:var(--display);font-size:24px;font-weight:700;
             font-variant-numeric:tabular-nums}
.card .per{font-size:13.5px;color:var(--fg-3)}

/* ---------- trust strip ---------- */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;
       background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.trust div{background:var(--surface);padding:22px 24px}
.trust svg{width:22px;height:22px;color:var(--gold-deep);margin-bottom:10px}
.trust b{display:block;font-family:var(--display);font-size:16px;margin-bottom:4px}
.trust p{margin:0;font-size:14.5px;color:var(--fg-2)}

/* ---------- product page ---------- */
.crumb{font-size:13px;color:var(--fg-3);padding-top:22px}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}

.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;
     padding:28px 0 64px;align-items:start}
@media (max-width:900px){.pdp{grid-template-columns:1fr;gap:34px}}
.gallery{position:sticky;top:96px}
@media (max-width:900px){.gallery{position:static}}
.shot{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.shot img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.thumbs button{padding:0;border:1.5px solid var(--rule);background:var(--surface);
               border-radius:10px;overflow:hidden;cursor:pointer;width:76px;height:76px;
               transition:border-color .18s}
.thumbs button:hover{border-color:var(--mute)}
.thumbs button img{width:100%;height:100%;object-fit:cover}
.thumbs button[aria-pressed="true"]{border-color:var(--gold);border-width:2.5px}

.pdp h1{font-size:clamp(31px,4vw,46px);line-height:1.05;margin-bottom:14px}
.lede{font-size:18.5px;color:var(--fg-2);margin:0 0 24px;max-width:44ch}
.pricerow{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:18px 0;
          border-block:1px solid var(--rule);margin-bottom:22px}
.price-lg{font-family:var(--display);font-size:38px;font-weight:700;letter-spacing:-.02em;
          font-variant-numeric:tabular-nums;line-height:1}
.per{font-size:14.5px;color:var(--fg-3)}
.instock{margin-left:auto;font-size:13px;font-weight:700;color:var(--fg-2);
         display:flex;align-items:center;gap:7px}
.dot{width:8px;height:8px;border-radius:50%;background:#1F9D55;flex:none}

.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
       border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;margin-bottom:24px}
.specs div{background:var(--surface);padding:14px 16px}
.specs dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin:0 0 4px}
.specs dd{margin:0;font-family:var(--display);font-size:19px;font-weight:700;
          font-variant-numeric:tabular-nums}
@media (max-width:520px){.specs{grid-template-columns:1fr 1fr}}

.order{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
       padding:22px 24px;margin-bottom:20px}
.order b{font-family:var(--display);font-size:17px;display:block;margin-bottom:6px}
.order p{margin:0 0 16px;font-size:15px;color:var(--fg-2)}
.tel{font-family:var(--display);font-size:26px;font-weight:700;text-decoration:none;
     display:inline-block;letter-spacing:-.01em}
.tel:hover{color:var(--gold-deep)}

/* ---------- buy box ---------- */
.buybox{margin:0 0 20px}
.buybox fieldset{border:0;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:10px}
.opt{display:flex;gap:13px;align-items:flex-start;border:1.5px solid var(--rule);
     border-radius:var(--r);padding:15px 16px;cursor:pointer;background:var(--surface);
     transition:border-color .18s,background .18s}
.opt:hover{border-color:var(--mute)}
.opt:has(input:checked){border-color:var(--gold);background:#FFFBF0}
.opt.solo{cursor:default}
.opt.solo input{display:none}
.opt input{margin:3px 0 0;accent-color:var(--gold-deep);flex:none;width:17px;height:17px}
.opt b{display:block;font-size:15.5px}
.opt small{color:var(--fg-3);font-size:13.5px;display:block;margin-top:2px}
.save{background:var(--gold);color:#000;font-size:11px;font-weight:700;letter-spacing:.06em;
      padding:3px 8px;border-radius:var(--pill);margin-left:6px;white-space:nowrap;
      text-transform:uppercase}
.paynote{font-size:13px;color:var(--fg-3);text-align:center;margin:12px 0 0}

.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.badges span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
             border:1px solid var(--rule);border-radius:var(--pill);padding:7px 13px;color:var(--fg-2)}
.badges svg{width:14px;height:14px;flex:none;color:var(--gold-deep)}

/* ---------- thesis ---------- */
.thesis{background:var(--ink);color:#F7F4EC;padding:76px 0}
.thesis .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
@media (max-width:900px){.thesis .wrap{grid-template-columns:1fr;gap:34px}.thesis{padding:56px 0}}
.thesis h2{font-size:clamp(28px,3.6vw,42px);line-height:1.08;margin-bottom:18px}
.thesis h2 em{font-style:normal;color:var(--gold)}
.thesis p{color:#BDB8AC;max-width:52ch;margin:0 0 16px}

/* FDA-style panel */
.facts{background:#fff;color:#000;border:2px solid #000;border-radius:2px;
       padding:12px 14px 14px;font-family:Helvetica,Arial,sans-serif;max-width:400px}
.facts h3{font-family:Helvetica,Arial,sans-serif;font-size:29px;font-weight:800;
          letter-spacing:-.03em;line-height:1;margin:0 0 6px}
.facts .sv{font-size:13.5px;line-height:1.35}
.facts .r7{border-top:7px solid #000;margin-top:5px}
.facts .r1{border-top:1px solid #000;margin-top:6px;padding-top:4px}
.facts table{width:100%;border-collapse:collapse;font-size:13.5px}
.facts th{text-align:right;font-size:11.5px;font-weight:700;padding:3px 0}
.facts th:first-child{text-align:left}
.facts td{padding:4px 0;border-top:1px solid #000}
.facts td:last-child{text-align:right;font-weight:700}
.facts .foot{font-size:11.5px;line-height:1.4;margin-top:6px}
.facts .none{background:var(--cream);font-weight:700;padding:2px 5px;border-radius:2px}

/* ---------- prose ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:start}
@media (max-width:900px){.cols{grid-template-columns:1fr;gap:32px}}
.prose h2{font-size:clamp(25px,3vw,34px);margin-bottom:18px;line-height:1.12}
.prose h3{font-size:19px;margin:30px 0 8px}
.prose p{max-width:66ch;color:var(--fg-2);margin:0 0 16px}
.prose strong{color:var(--fg);font-weight:600}

.support{list-style:none;padding:0;margin:0;display:grid;gap:1px;background:var(--rule);
         border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.support li{background:var(--surface);padding:15px 18px;display:flex;gap:13px;align-items:flex-start}
.support svg{width:17px;height:17px;color:var(--gold-deep);flex:none;margin-top:3px}
.support b{display:block;font-size:15.5px}
.support small{color:var(--fg-3);font-size:13.5px}

.callout{border-left:3px solid var(--gold);background:var(--surface);
         border-radius:0 var(--r) var(--r) 0;padding:20px 24px;box-shadow:var(--shadow);margin:26px 0}
.callout p{margin:0;max-width:60ch}

.howto{display:grid;gap:14px;margin-top:8px}
.howto div{display:flex;gap:16px;align-items:flex-start}
.howto .n{font-family:var(--display);font-size:13px;font-weight:700;background:var(--gold);
          color:#000;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
          flex:none;margin-top:2px}
.howto p{margin:0}

details{border-top:1px solid var(--rule)}
details:last-of-type{border-bottom:1px solid var(--rule)}
summary{cursor:pointer;padding:18px 34px 18px 0;font-size:16.5px;font-weight:600;
        position:relative;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:6px;top:26px;width:9px;height:9px;
               border-right:2px solid var(--fg-3);border-bottom:2px solid var(--fg-3);
               transform:rotate(45deg);transition:transform .2s}
details[open] summary::after{transform:rotate(-135deg)}
details p{padding:0 0 18px;margin:0;max-width:70ch}

.disc{font-size:13px;color:var(--fg-3);border:1px solid var(--rule);border-radius:var(--r);
      padding:18px 20px;max-width:74ch;margin-top:30px;font-style:italic}

/* ---------- footer ---------- */
footer.site{background:var(--black);color:#BDB8AC;padding:52px 0 36px;font-size:14px}
footer.site .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
@media (max-width:760px){footer.site .wrap{grid-template-columns:1fr;gap:26px}}
footer h4{font-family:var(--display);color:#fff;font-size:12px;letter-spacing:.18em;
          text-transform:uppercase;margin:0 0 14px;font-weight:700}
footer a{color:#BDB8AC;text-decoration:none}
footer a:hover{color:var(--gold)}
footer .links{display:grid;gap:7px}
footer .fine{grid-column:1/-1;border-top:1px solid #2A2926;margin-top:36px;padding-top:20px;
             font-size:12.5px;color:#6E6A63}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}