/* ==========================================================================
   Home page only (index.html). Loaded after styles.css, so every rule here
   reads the storefront tokens and their dark values; nothing below defines a
   color of its own.

   Hero: one photograph is the whole hero. The vials stand centred in it and
   the copy sits on the empty wall above them. The photo's size and offset are
   solved from the space the copy needs: on the desktop plate the cap tops sit
   at 43.3% of its height and the front base at 88.4%; on the portrait plate
   45.6% and 80.9%, with the vials 65% of its width. The plates' outer wall was
   flattened to the page color, so the photo can overflow the hero invisibly.
   ========================================================================== */

.btn--ink{--bg:var(--ink);--fg:var(--paper);--bd:var(--ink)}
.home-hero__actions .btn,.home-shop__more .btn,.home-spot__buy .btn{min-height:52px;padding:0 26px;font-size:15px;font-weight:500;letter-spacing:0}
.home-link{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--line-2);transition:text-decoration-color .2s var(--ease)}
.home-link:hover{text-decoration-color:currentColor}

/* ---------- hero ---------- */
.home-hero{--head:var(--header-h);--pad:clamp(28px,4.5svh,48px);--copy:118px;--acts:80px;--air:64px;--zb:92%;
  position:relative;isolation:isolate;margin-top:calc(-1 * var(--head));height:clamp(800px,100svh,940px);
  display:flex;flex-direction:column;align-items:center;overflow:hidden}
/* the photograph always finishes fading into the page inside the hero */
.home-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;pointer-events:none;z-index:0;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--paper) 0%,transparent),var(--paper))}
.home-hero__media{--zt:calc(var(--head) + var(--pad) + var(--copy) + var(--acts));
  --ih:min(calc((var(--zb) - var(--zt) - var(--air)) / .451),115%,calc(100vw * 1.065));
  position:absolute;left:50%;top:calc((var(--zt) + var(--air) + var(--zb)) / 2 - .6585 * var(--ih));
  height:var(--ih);aspect-ratio:3/2;transform:translateX(-50%);z-index:-1}
/* one mask per element: WebKit crashes compositing two mask layers on this image */
.home-hero__media{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 88%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 88%,transparent 100%)}
.home-hero__media img{display:block;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%)}
.home-hero__copy,.home-hero__actions{position:relative;z-index:1}
.home-hero__copy{width:100%;padding-top:calc(var(--head) + var(--pad));text-align:center;display:grid;justify-items:center;gap:16px}
.home-hero__title{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(2.5rem,1.25rem + 3vw,4.25rem);line-height:1.02;letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.home-hero__sub{margin:0;font-size:clamp(1rem,.94rem + .2vw,1.125rem);line-height:1.5;color:var(--ink-2)}
.home-hero__actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 28px;margin-top:28px}

/* ---------- trust strip (rows come from the copy list; icons stay in the
   markup for the admin, but this page reads as plain text) ---------- */
.trust{border:0;background:transparent;padding-top:40px}
.trust__row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:stretch;gap:0;padding-block:0}
.trust__item{justify-content:center;gap:8px;padding:20px 16px;border-block:1px solid var(--line);font-size:14px;text-align:center}
.trust__item+.trust__item{border-left:1px solid var(--line)}
.trust__item svg{display:none}
.trust__item>span{font-size:0}
.trust__item b{margin-right:8px;font-size:14px;font-weight:500;color:var(--ink)}
.trust__item em{font-size:14px;font-style:normal;color:var(--muted)}

/* ---------- shop the Index: one contained row of four ---------- */
.home-shop{--gap:24px;--per:4;padding-block:64px}
/* the catalog rail follows Why Astral closely, as one run of content */
.home-why+.home-shop{padding-top:32px}
.home-shop__head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
.home-shop__title{display:flex;align-items:baseline;gap:12px;margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(1.75rem,1.45rem + .9vw,2.25rem);line-height:1.1;letter-spacing:-.03em;color:var(--ink)}
.home-shop__count{font-family:var(--font-sans);font-size:14px;font-weight:450;letter-spacing:0;color:var(--muted)}
.home-shop__nav{display:flex;gap:8px}
.home-rail-btn{position:relative;width:40px;height:40px;display:grid;place-items:center;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer;transition:border-color .2s var(--ease),opacity .2s var(--ease),transform .1s var(--ease)}
.home-rail-btn::before{content:"";position:absolute;inset:-2px}
.home-rail-btn:hover:not(:disabled){border-color:var(--ink)}
.home-rail-btn:active:not(:disabled){transform:scale(.94)}
.home-rail-btn:disabled{opacity:.35;cursor:default}
.home-rail-btn svg{width:16px;height:16px}
#popular-section .rail__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));gap:var(--gap);padding:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:auto;scrollbar-width:none}
#popular-section .rail__track::-webkit-scrollbar{display:none}
#popular-section .rail__track>*{flex:none;scroll-snap-align:start}
.home-rail-progress{position:relative;height:2px;margin-top:32px;background:var(--line);border-radius:2px;overflow:hidden}
.home-rail-progress span{position:absolute;inset:0 auto 0 0;width:33%;background:var(--ink);border-radius:2px;transition:transform .2s var(--ease)}
.home-shop__more{display:none}

/* product cards: the vial stands on the page, no box */
#popular-section .card,#popular-section .card:hover{transform:none}
#popular-section .card__media,#popular-section .card:hover .card__media{aspect-ratio:600/660;border:0;border-radius:0;background:transparent;box-shadow:none}
#popular-section .card__media::after{content:none}
#popular-section .card__media>picture,#popular-section .card__media>picture img{display:block;width:100%;height:100%}
/* the photograph's headroom is cropped away, as in the catalog grid, so no empty band sits under the heading */
#popular-section .card__media img.home-tile{object-fit:cover;object-position:50% 88%;transition:transform .6s var(--ease)}
@media(hover:hover){#popular-section .card:hover .card__media img.home-tile{transform:scale(1.03)}}
#popular-section .card__body{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;grid-template-areas:"name price" "desc add";gap:4px 16px;align-items:start;padding:16px 0 0;min-height:0}
#popular-section .card__name{grid-area:name;font-family:var(--font-sans);font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
#popular-section .card__desc{grid-area:desc;font-family:var(--font-sans);font-style:normal;font-size:13.5px;line-height:1.4;color:var(--muted);-webkit-line-clamp:1}
#popular-section .card__foot{display:contents}
#popular-section .card__foot .price{grid-area:price;display:block;text-align:right;white-space:nowrap;transform:none;font-size:15px;line-height:1.3}
#popular-section .card__from{display:inline;margin-right:4px;font-size:13px;color:var(--muted);text-transform:lowercase}
#popular-section .card__amount,#popular-section .card__oos{font-size:15px;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
#popular-section .card__foot .card__add,#popular-section .card__foot .card__notify{grid-area:add;justify-self:end;align-self:end;width:36px;height:36px;min-height:36px;margin:0;padding:0;border-radius:999px;border:1px solid var(--line-2);background:transparent}
#popular-section .card__add::before,#popular-section .card__notify::before{content:"";position:absolute;inset:-4px}
#popular-section .card__add svg{width:16px;height:16px}
#popular-section .card__add:hover{background:transparent;border-color:var(--ink);color:var(--ink)}

/* ---------- most-ordered spotlight: the vial on the page, no panel ---------- */
.home-spot{padding-top:clamp(32px,3.5vw,48px)}
.home-spot__panel{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,10fr);gap:0 clamp(24px,4vw,56px);align-items:center;max-width:1100px}
.home-spot__media img{display:block;width:100%;height:auto;aspect-ratio:1}
.home-spot__body{display:flex;flex-direction:column;justify-content:center;gap:20px;min-width:0;max-width:400px}
.home-spot__tag{margin:0;font-size:13px;color:var(--muted)}
.home-spot__name{margin:4px 0 0;font-family:var(--font-display);font-size:clamp(1.75rem,1.45rem + .9vw,2.125rem);font-weight:500;line-height:1.05;letter-spacing:-.035em;color:var(--ink)}
.home-spot__desc{margin:8px 0 0;font-size:15px;color:var(--ink-2)}
.home-dose{min-width:0;margin:0;padding:0;border:0}
.home-dose legend{margin-bottom:12px;padding:0;font-size:13px;color:var(--muted)}
.home-dose__opts{position:relative;display:flex;flex-wrap:wrap;gap:8px}
.home-dose input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;clip-path:inset(50%)}
.home-dose label{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid var(--line-2);border-radius:999px;font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;transition:border-color .2s var(--ease),color .2s var(--ease)}
.home-dose label:hover{border-color:var(--ink)}
.home-dose input:checked+label{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 .5px var(--ink)}
.home-dose input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.home-dose input:disabled+label{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.home-spot__buy{display:flex;align-items:center;gap:24px}
.home-spot__price{font-size:24px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.home-spot__buy .btn{flex:1}
.home-spot__check:not([hidden]){display:inline-flex}
.home-spot__check svg{width:16px;height:16px}
.home-assure{display:grid;gap:12px;margin:0;padding:24px 0 0;list-style:none;border-top:1px solid var(--line-2);font-size:14px;color:var(--ink-2)}
.home-assure li{display:flex;align-items:center;gap:12px}
.home-assure svg{flex:none;width:18px;height:18px;color:var(--ink)}
.home-assure a{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-2)}

/* ---------- why Astral: four reasons in a hairline cross, the Astral star where they meet ---------- */
.home-why{padding-block:clamp(48px,5vw,64px) clamp(16px,2vw,24px)}
.home-why__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px 48px;align-items:start}
.home-why__head{padding-top:30px}
.home-why__title{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(1.75rem,1.45rem + .9vw,2.25rem);line-height:1.1;letter-spacing:-.03em;color:var(--ink)}
.home-why__head p{margin:16px 0 0;max-width:32ch;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.home-why__cells{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.home-why__cell{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-content:start;padding:36px 40px 40px 0}
.home-why__cell:nth-child(2n){padding:36px 0 40px 40px}
.home-why__cell:nth-child(1),.home-why__cell:nth-child(2){border-bottom:1px solid var(--line-2)}
.home-why__cell:nth-child(2n+1){border-right:1px solid var(--line-2)}
.home-why__cell svg{grid-row:span 2;width:26px;height:26px;margin-top:1px;color:var(--ink)}
.home-why__cell h3{margin:0;font-size:17px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.home-why__cell p{margin:0;max-width:36ch;font-size:14.5px;line-height:1.55;color:var(--muted)}
.home-why__star{position:absolute;left:50%;top:50%;width:46px;height:46px;display:grid;place-items:center;transform:translate(-50%,-50%);border-radius:50%;background:var(--paper);color:var(--ink)}
.home-why__star svg{width:22px;height:22px;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
@media(hover:hover){.home-why:hover .home-why__star svg{transform:rotate(45deg)}}

/* ---------- questions ---------- */
.home-faq{padding-block:8px 48px}
.home-faq__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:start}
.home-faq__head{display:grid;gap:16px;justify-items:start}
.home-faq__title{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(1.75rem,1.45rem + .9vw,2.25rem);line-height:1.1;letter-spacing:-.03em;color:var(--ink)}
.home-faq__list{border-top:1px solid var(--line)}
.home-faq details{border-bottom:1px solid var(--line)}
.home-faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:64px;padding:16px 0;list-style:none;cursor:pointer;font-size:16px;font-weight:500;color:var(--ink)}
.home-faq summary::-webkit-details-marker{display:none}
.home-faq summary::after{content:"";flex:none;width:12px;height:12px;color:var(--ink-2);transition:transform .3s var(--ease);
  background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat}
.home-faq details[open] summary::after{transform:rotate(45deg)}
.home-faq summary:hover{color:var(--ink-2)}
.home-faq__answer{max-width:64ch;margin:0 0 24px;font-size:15px;color:var(--ink-2)}
.home-faq__answer p{margin:0 0 12px}
.home-faq__answer p:last-child{margin:0}

/* ---------- tablet ---------- */
@media (max-width:1080px){
  .home-shop{--per:3}
  .home-why__grid{grid-template-columns:1fr}
  .home-why__head{padding-top:0}
}
@media (max-width:860px){
  .home-shop__head{margin-bottom:16px}
  .home-shop{--per:2}
  .home-shop__more{display:flex;justify-content:center;margin-top:32px}
  .home-spot__panel{grid-template-columns:1fr}
  .home-spot__body{max-width:none;padding-top:8px}
  .home-faq__grid{grid-template-columns:1fr;gap:32px}
}

/* ---------- phones: copy at the top, vials in the middle, main action in thumb reach ---------- */
@media (max-width:760px){
  /* the copy sits 36px lower and its reserve is 36px shorter, so the photograph
     and everything under it keep their place */
  .home-hero{--pad:64px;--copy:104px;--cta:114px;--padb:32px;--air:30px;height:clamp(600px,calc(100svh - 40px),900px)}
  .home-hero::after{height:72px}
  .home-hero__media{--zt:calc(var(--head) + var(--pad) + var(--copy));--zb:calc(100% - var(--cta) - var(--padb));
    --ih:min(calc((100vw - 56px) / .4335),calc((var(--zb) - var(--zt) - 2 * var(--air)) / .353));
    aspect-ratio:2/3;top:calc((var(--zt) + var(--zb)) / 2 - .6325 * var(--ih))}
  .home-hero__copy{gap:12px}
  .home-hero__title{font-size:clamp(2.4rem,1.5rem + 3.4vw,2.9rem);line-height:1.03}
  .home-hero__sub{font-size:15.5px}
  .home-hero__sub span{display:block}
  .home-hero__actions{flex-direction:column;gap:12px;width:100%;margin-top:auto;padding-bottom:var(--padb)}
  .home-hero__actions .btn{width:100%;min-height:54px;font-size:15.5px}
  .trust{padding-top:8px}
  .trust__row{grid-auto-flow:row}
  .trust__item{justify-content:center;padding:14px 0;border-block:0;font-size:13.5px}
  .trust__item+.trust__item{border-left:0;border-top:1px solid var(--line)}
  .trust__item:first-child{border-top:1px solid var(--line)}
  .trust__item:last-child{border-bottom:1px solid var(--line)}
  .home-shop{--gap:12px;padding-block:48px}
  .home-why+.home-shop{padding-top:28px}
  .home-shop__nav{display:none}
  .home-rail-progress{margin-top:24px}
  #popular-section .card__media,#popular-section .card:hover .card__media{aspect-ratio:600/700}
  #popular-section .card__media img.home-tile{object-position:50% 85%;transform:scale(1.14);transform-origin:50% 61%}
  @media(hover:hover){#popular-section .card:hover .card__media img.home-tile{transform:scale(1.16)}}
  #popular-section .card__body{grid-template-rows:auto auto 1fr;grid-template-areas:"name name" "desc desc" "price add";gap:4px 8px}
  #popular-section .card__name{font-size:14px}
  #popular-section .card__desc{font-size:13px}
  #popular-section .card__foot .price{margin-top:4px;text-align:left;align-self:end}
  #popular-section .card__foot .card__add,#popular-section .card__foot .card__notify{margin:4px 0 0;align-self:end}
  .home-spot{padding-top:24px}
  .home-spot__media img{width:86%;margin-inline:auto}
  .home-spot__body{gap:18px}
  .home-spot__buy{gap:16px}
  .home-spot__price{font-size:22px}
  .home-why{padding-block:48px 8px}
  .home-why__cells{grid-template-columns:1fr;border-top:1px solid var(--line-2)}
  .home-why .home-why__cells .home-why__cell{padding:22px 0;border:0;border-bottom:1px solid var(--line-2)}
  .home-why__star{display:none}
  .home-faq{padding-block:8px 40px}
  .home-faq summary{min-height:56px;font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){
  .home-rail-btn,.home-rail-progress span,.home-dose label,.home-faq summary::after,#popular-section .card__media img.home-tile,.home-why__star svg{transition:none!important}
}