/* US landing-page additions to the ported V1 Shopify homepage style. */

.us-site-notice {
  background: var(--pack-black);
  color: var(--paper-2);
  border-bottom: 2px solid var(--ink);
  padding: .65rem 1rem;
  text-align: center;
}

.us-site-notice p { margin: 0; font-size: .78rem; }
.us-site-notice strong { color: var(--acc); }
.us-site-notice a { color: inherit; font-weight: 800; text-underline-offset: 3px; }
.us-site-notice a:hover { color: var(--acc); }

.vye-age-gate[hidden] { display: none; }
.vye-age-gate {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(10, 20, 22, .94);
}
.vye-age-gate__panel {
  width: min(100%, 32rem);
  padding: clamp(2rem, 6vw, 4rem);
  background: var(--pack-black);
  color: var(--paper-2);
  border: 2px solid var(--paper-2);
  text-align: center;
}
.vye-age-gate__logo { width: clamp(6rem, 25vw, 9rem); height: auto; margin: 0 auto 2rem; }
.vye-age-gate__eyebrow { color: var(--spearmint); margin: 0 0 1rem; }
.vye-age-gate h1 { font-size: clamp(2.4rem, 8vw, 4rem); margin: 0 0 1rem; }
.vye-age-gate__panel > p:not(.vye-age-gate__eyebrow) { color: #97A3A4; margin: 0 auto 2rem; max-width: 28ch; }
.vye-age-gate__actions { display: grid; gap: .75rem; }
.vye-age-gate .btn { justify-content: center; width: 100%; }
.vye-age-gate .btn--ghost { color: var(--paper-2); border-color: var(--paper-2); }

.vye-site { min-height: 100vh; background: var(--paper); color: var(--ink); }
.vye-site main { display: block; }
.vye-site .nav { position: sticky; top: 0; }
.vye-site .nav__in { min-height: 4.9rem; }
.vye-site .hero { scroll-margin-top: 5rem; }
.vye-site .flavours .sec-head { margin-bottom: 2rem; }
.vye-site .flav__pick { text-align: left; }

.waitlist { border-top: 2px solid var(--ink); }
.waitlist__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 1fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
}
.waitlist__inner h2 { font-size: clamp(3rem, 7vw, 5.5rem); margin: .45rem 0 1rem; }
.waitlist__inner > div > p:last-child { max-width: 38ch; color: var(--ink-60); margin: 0; }
.waitlist__form { display: grid; gap: .8rem; }
.waitlist__form input {
  width: 100%;
  min-height: 3.4rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: 600 1rem/1 var(--body);
  padding: .9rem 1rem;
}
.waitlist__form input::placeholder { color: var(--ink-60); opacity: 1; }
.waitlist__form input:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; }
.waitlist__form .btn { justify-content: center; min-height: 3.4rem; }
.waitlist__form .btn:disabled { cursor: wait; opacity: .7; transform: none; }
.waitlist__status { margin: .25rem 0 0; font-size: .86rem; font-weight: 700; }
.waitlist__status--success { color: var(--acc-deep); }
.waitlist__status--error { color: #9b1c1c; }
.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; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.tile--review-mixedberry { background: #723996; color: #F9F2FF; }

/* V1 flavour-specific hero tab colours: solid, full-contrast companions. */
html[data-flavour="mint"],
html[data-flavour="spearmint"] { --hero-tab: #1E7B76; --hero-tab-on: #F6F3EC; }
html[data-flavour="citrus"],
html[data-flavour="lemonlime"] { --hero-tab: #607200; --hero-tab-on: #F6F3EC; }
html[data-flavour="berry"],
html[data-flavour="mixedberry"] { --hero-tab: #723996; --hero-tab-on: #F9F2FF; }
html[data-flavour="unflavoured"],
html[data-flavour="unflavored"] { --hero-tab: #3F3D3F; --hero-tab-on: #F6F3EC; }

/* Stronger two-tone treatment for the photo corner block. */
body.template-index .hero__tab {
  background: var(--hero-tab) !important;
  color: var(--hero-tab-on) !important;
}

/* Four tiles on desktop, two by two on smaller screens. */
body.template-index .rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.template-index .flav { min-width: 0; }
body.template-index .flav:focus-visible {
  outline: 3px solid var(--acc);
  outline-offset: 4px;
}

/* The community section is a fixed four-review grid, not a carousel. */
body.template-index .rev-scroll-hint,
body.template-index .rev-scroll-wrap::after { display: none; }

/* Keep the flavor rail and review grid in balanced mobile arrangements. */
@media (max-width: 860px) {
  body.template-index .rail,
  body.template-index .rev-scroll { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The current UK theme uses one still image in the three-second section. */
body.template-index .steps__media--static img {
  opacity: 1 !important;
  animation: none !important;
}

/* Keep the ingredient count in proportion to its droplet graphic. */
body.template-index .ingredients-scene__number {
  font-size: clamp(4.5rem, 6.5vw, 6.5rem);
}

@media (max-width: 860px) {
  .waitlist__inner { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 560px) {
  body.template-index .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.template-index .rev-scroll { grid-template-columns: 1fr; }
  .us-site-notice p { font-size: .7rem; }
  .vye-site .nav__in { min-height: 4.35rem; }
  .vye-site .brand__logo { height: 2.1rem; }
}