/* Scoped to the formula gallery, ingredients and its pack selector. */
#formula {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(36px, 5vw, 80px);
  row-gap: 64px;
  align-items: center;
}
#formula .formula-photo { position: static; padding: 0; }
/* Gallery photos are square files (gallery-*.webp), each extended from its own
   backdrop so nothing is cropped. Every photo and thumbnail therefore fills the
   same square, and the photo sits out of flow so switching can never move the page. */
#formula .gallery-stage {
  position: relative; display: block; overflow: hidden;
  width: 100%; height: auto; aspect-ratio: 1; margin: 0; padding: 0; left: auto; transform: none;
  border-radius: 16px; background: var(--sage-light);
  outline: 1px solid rgb(48 62 48 / 0.06); outline-offset: -1px;
}
#formula .gallery-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
  object-fit: cover; mix-blend-mode: normal; border-radius: 0; transform: none;
}
/* Frosted arrows sit on the photo's edges: quiet at rest, firmer on hover. */
#formula .gallery-arrow {
  position: absolute; top: 50%; z-index: 1; display: grid; place-items: center;
  width: 44px; height: 44px; margin-top: -22px; padding: 0;
  border: 1px solid rgb(48 62 48 / 0.1); border-radius: 50%;
  background: rgb(251 249 243 / 0.82); color: var(--forest);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px -8px rgb(48 62 48 / 0.35);
  cursor: pointer; transition: background-color 150ms, transform 150ms;
}
#formula .gallery-prev { left: 16px; }
#formula .gallery-next { right: 16px; }
#formula .gallery-next svg { transform: scaleX(-1); }
#formula .gallery-arrow svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
#formula .gallery-arrow:active { transform: scale(0.94); }
#formula .gallery-arrow:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
#formula .gallery-controls { gap: 12px; margin-top: 16px; }
#formula .gallery-controls button {
  flex: none; width: 64px; height: 64px; padding: 3px;
  border: 1px solid transparent; border-radius: 10px; background: none;
  opacity: 0.7; transition: opacity 150ms, border-color 150ms;
}
#formula .gallery-controls img {
  display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 7px;
  outline: 1px solid rgb(48 62 48 / 0.1); outline-offset: -1px;
}
#formula .gallery-controls button[aria-pressed="true"] { border-color: var(--forest); outline: none; opacity: 1; }
#formula .gallery-controls button:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
#formula .formula-copy { min-width: 0; }
#formula h2 { font-size: clamp(38px, 4.2vw, 60px); }
#formula .formula-copy > p { max-width: 43ch; margin-top: 22px; }
#formula .ingredient-tabs {
  display: grid; grid-template-columns: 1.1fr 1.3fr 0.8fr;
  gap: 16px; margin-top: 34px; border-bottom: 1px solid var(--line);
}
#formula .ingredient-tabs button {
  position: relative; padding: 12px 0 16px; text-align: left;
  font-family: var(--display); font-size: 21px; line-height: 1.2; font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--muted); border: 0;
}
#formula .ingredient-tabs button::after {
  content: ""; position: absolute; bottom: -1px; left: 0; right: 0;
  height: 3px; background: var(--gold); opacity: 0; transition: opacity 150ms;
}
/* Desktop: columns size to their labels, so "Collagen Peptides" never breaks.
   Phones keep the even split and let every label wrap. */
@media (min-width: 761px) {
  #formula .ingredient-tabs {
    grid-template-columns: minmax(0, auto) minmax(0, auto) max-content;
    justify-content: start; column-gap: 28px;
  }
  #formula .ingredient-tabs [data-ingredient="collagen"] { white-space: nowrap; }
}
#formula .ingredient-tabs button[aria-selected="true"] { color: var(--forest); }
#formula .ingredient-tabs button[aria-selected="true"]::after { opacity: 1; }
#formula .ingredient-panel {
  min-height: 310px; margin: 0; padding: 28px 0 24px;
  background: transparent; border-radius: 0;
}
#formula .ingredient-panel h3 {
  max-width: 22ch; font-family: var(--display);
  font-size: clamp(25px, 2.25vw, 32px); line-height: 1.15; letter-spacing: -0.035em;
}
#formula .ingredient-panel p { max-width: 49ch; margin-top: 14px; font-size: 15px; line-height: 1.65; text-wrap: pretty; }
#formula .ingredient-panel p + p { margin-top: 12px; }
#formula .ingredient-panel a {
  margin-top: 14px; min-height: 36px; font-size: 13px;
  text-decoration-thickness: 1px; text-underline-offset: 5px;
}
#formula .ingredient-panel a::after {
  content: ""; width: 15px; height: 15px; margin-left: 10px;
  background: currentColor; mask: var(--icon-arrow) center / contain no-repeat;
}
/* Standards as pills: one evenly spaced row when the column allows, a 2x2 grid when it doesn't. */
#formula .formula-copy { container-type: inline-size; }
#formula .formula-standards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  margin: 0; padding: 22px 0 0; border-bottom: 0;
  font-size: 12px; font-weight: 500; letter-spacing: 0.005em;
}
#formula .formula-standards li {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 0 12px; white-space: nowrap;
  background: rgb(255 255 255 / 0.55); border: 1px solid rgb(48 62 48 / 0.14); border-radius: 999px;
}
#formula .formula-standards li::before { margin: 0; color: var(--gold); font-size: 0.9em; }
@container (min-width: 500px) {
  #formula .formula-standards { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; }
  #formula .formula-standards li { flex: 1 1 auto; min-height: 32px; padding: 0 10px; }
}

/* Separate learning about the formula from choosing a quantity. */
#formula .formula-purchase {
  grid-column: 1 / -1; display: grid;
  grid-template-columns: minmax(190px, 0.75fr) minmax(0, 2fr);
  gap: 32px; padding: clamp(24px, 3vw, 42px);
  background: var(--yellow-light); border-radius: 12px;
}
#formula .purchase-intro { padding-top: 8px; }
/* Focus lands here after a shop link so screen readers announce it; no ring needed. */
#formula #packTitle:focus { outline: none; }
#formula .purchase-subhead { margin-top: 10px; max-width: 20ch; font-size: 15px; line-height: 1.45; color: var(--muted); text-wrap: balance; }
#formula .purchase-intro h3 {
  max-width: 9ch; font-family: var(--display); font-size: clamp(32px, 3vw, 44px);
  line-height: 1.05; letter-spacing: -0.04em;
}
#formula .run-meter {
  max-width: 24ch; margin-top: 22px; font-size: 13px; line-height: 1.6;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
#formula #purchaseForm { min-width: 0; }
#formula .pack-picker { margin: 0; gap: 12px; }
#formula .pack-option > span, #formula .pack-option input:checked + span {
  position: relative; height: 100%; grid-template-columns: 1fr auto; gap: 6px;
  padding: 18px 16px 16px; border: 1px solid rgb(48 62 48 / 0.18);
  border-radius: 8px; background: var(--cream);
  transition: background-color 150ms, border-color 150ms;
}
#formula .pack-option > span::after {
  content: ""; position: absolute; top: 14px; right: 14px;
  width: 16px; height: 16px; border: 1px solid rgb(48 62 48 / 0.4); border-radius: 50%;
}
#formula .pack-option input:checked + span {
  background: var(--butter); border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest);
}
#formula .pack-option input:checked + span::after {
  background: var(--forest); border-color: var(--forest); box-shadow: inset 0 0 0 4px var(--butter);
}
#formula .pack-preview {
  grid-column: 1 / -1; width: 100%; height: 124px;
  object-fit: contain; mix-blend-mode: multiply; margin: 8px 0 10px;
}
#formula .pack-option strong { font-size: 17px; font-weight: 600; }
#formula [data-pack-price] { align-self: center; font-size: 17px; font-variant-numeric: tabular-nums; }
#formula .pack-option .pack-detail { font-size: 12px; color: var(--muted); }
#formula .purchase-button {
  margin-top: 16px; min-height: 56px; border: 1px solid var(--forest);
  border-radius: 8px; background: var(--forest); color: var(--cream); justify-content: center;
}
#formula .purchase-button::after { margin-left: auto; }
#formula .purchase-button #purchaseLabel { flex: 1; text-align: center; }
#formula .notify-trigger { grid-column: 2; }
@media (hover: hover) and (pointer: fine) {
  #formula .gallery-controls button:hover { opacity: 1; }
  #formula .gallery-arrow:hover { background: rgb(251 249 243 / 0.97); }
  #formula .pack-option:hover > span { border-color: var(--forest); }
  #formula .purchase-button:hover { background: #44533e; }
}
@media (max-width: 1050px) and (min-width: 761px) {
  #formula { column-gap: 32px; align-items: start; }
  #formula .ingredient-tabs { gap: 10px; }
  #formula .ingredient-tabs button { font-size: 18px; }
  #formula .ingredient-panel { min-height: 360px; }
  #formula .formula-purchase { grid-template-columns: minmax(160px, 0.65fr) minmax(0, 2fr); gap: 24px; }
  #formula .pack-option > span, #formula .pack-option input:checked + span { padding: 16px 10px; }
  #formula .pack-option strong, #formula [data-pack-price] { font-size: 15px; }
}
@media (max-width: 760px) {
  #formula { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  #formula .formula-copy { grid-row: 1; }
  #formula .formula-photo { grid-row: 2; }
  #formula h2 { font-size: clamp(36px, 8.8vw, 52px); }
  #formula .formula-copy > p { font-size: 16px; margin-top: 18px; }
  #formula .ingredient-tabs { margin-top: 28px; gap: 12px; }
  #formula .ingredient-tabs button { font-size: clamp(16px, 4.35vw, 20px); }
  #formula .ingredient-panel { padding-block: 24px; min-height: 344px; }
  #formula .ingredient-panel h3 { font-size: 27px; }
  #formula .gallery-stage { border-radius: 14px; }
  #formula .gallery-arrow { width: 40px; height: 40px; margin-top: -20px; }
  #formula .gallery-prev { left: 10px; }
  #formula .gallery-next { right: 10px; }
  #formula .purchase-subhead { max-width: none; margin-top: 8px; font-size: 14px; }
  #formula .gallery-controls button { width: 58px; height: 58px; }
  #formula .formula-purchase { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 18px; }
  #formula .purchase-intro { padding: 0; }
  #formula .purchase-intro h3 { max-width: none; font-size: 34px; }
  #formula .run-meter { max-width: 30ch; margin-top: 12px; font-size: 12px; }
  #formula .pack-picker { grid-template-columns: 1fr; gap: 10px; }
  #formula .pack-option > span, #formula .pack-option input:checked + span {
    grid-template-columns: 66px minmax(0, 1fr) auto; grid-template-rows: 1fr 1fr;
    gap: 2px 14px; padding: 12px 40px 12px 10px; min-height: 90px;
  }
  #formula .pack-preview { grid-column: 1; grid-row: 1 / 3; width: 66px; height: 64px; margin: 0; }
  #formula .pack-option strong { align-self: end; font-size: 17px; }
  #formula [data-pack-price] { grid-column: 3; grid-row: 1 / 3; font-size: 17px; }
  #formula .pack-option .pack-detail { grid-column: 2; align-self: start; font-size: 11px; white-space: nowrap; }
  #formula .pack-option > span::after { right: 12px; top: calc(50% - 8px); }
  #formula .notify-trigger { grid-column: 1; }
}
@media (max-width: 380px) {
  #formula .ingredient-tabs { gap: 10px; }
  #formula .ingredient-panel { min-height: 410px; }
  #formula .formula-purchase { padding-inline: 12px; }
  #formula .pack-option > span, #formula .pack-option input:checked + span { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 2px 8px; }
  #formula .pack-preview { width: 48px; }
  #formula .pack-option strong, #formula [data-pack-price] { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  #formula .gallery-controls button, #formula .gallery-arrow, #formula .ingredient-tabs button::after,
  #formula .pack-option > span { transition: none; }
}

/* Hand-off from the ingredient story to the product page. */
#formula .formula-details { margin-top: 26px; gap: 12px; padding-inline: 24px; }
#formula .formula-details::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: currentColor; -webkit-mask: var(--icon-arrow) center / contain no-repeat; mask: var(--icon-arrow) center / contain no-repeat;
  transition: translate 200ms;
}
#formula .formula-details:hover::after { translate: 3px 0; }
@media (max-width: 760px) { #formula .formula-details { display: flex; width: 100%; } }