/* Site layout overrides requested by the user. Does NOT alter the verbatim
   lune.css / styles.css design tokens; only adjusts hero alignment so the
   hero text is centered on the page. */
@media (min-width: 1024px) {
  .hero__wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 54px 90px 36px;
  }
  .hero__col {
    width: auto;
    max-width: 620px;
    align-items: center;
    text-align: center;
  }
  .hero__art {
    flex: 0 0 auto;
    min-width: 0;
    width: 360px;
    height: 460px;
    margin: 18px 0 0;
  }
  .hero__glow {
    bottom: 90px;
  }
}

/* Center "The Fitpeptides Guarantee" block on the homepage. The block keeps
   its 720px max-width; auto margins center it within the container. */
.guarantee {
  margin-inline: auto;
}

/* Center the upper section on every product page: the title, subtitle, price,
   CoA preview, spec row, bundle picker and Add-to-cart button are all
   centered within the info column. */
.pdp__info{align-items:center;text-align:center}
.pdp__info .specrow,
.pdp__info .bundles{align-self:stretch}

/* Center the shop-page header: heading, subtitle, sort/search row,
   category chips and count all sit centered. */
.shop-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.shop-head .shop-tools{justify-content:center}
.shop-head .chips{justify-content:center}

/* Center the logo in the mobile header. The brand is lifted out of the flex
   flow and pinned to the horizontal center; burger (left) and actions
   (right) keep their ends via space-between. Desktop keeps its
   logo-left / nav-center layout. */
@media (max-width:1023px){
  .site-header__inner{position:relative}
  .site-header__inner .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
}