/* Home only. Shared patterns live in site.css. */

/* 44px tap area without moving the underline */
.link-arrow { position: relative; }
.link-arrow::before { content: ""; position: absolute; inset: -10px -6px; }

/* hero: live store strip + "All locations" */
.hero__strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; }
.hstore { border-radius: var(--r); }
.hero__all {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; padding: 0 24px; min-height: 52px;
  border: 1px solid rgba(37, 228, 145, 0.55); border-radius: var(--r); background: rgba(3, 23, 14, 0.55); backdrop-filter: blur(10px);
  color: var(--neon); font: 600 0.98rem var(--font-body); text-decoration: none; white-space: nowrap;
  transition: background 0.2s, color 0.2s, transform 0.25s var(--ease);
}
.hero__all:hover { background: var(--neon); color: var(--forest); transform: translateY(-2px); }

/* department tiles: blurbs always visible once there is room, deeper scrim for legibility */
.tile::after { background: linear-gradient(0deg, rgba(5, 22, 14, 0.94) 0%, rgba(5, 22, 14, 0.74) 36%, rgba(5, 22, 14, 0.16) 66%, rgba(5, 22, 14, 0) 82%); }
@media (min-width: 721px) { .tile__text em { max-height: 4.5em; opacity: 1; margin-top: 6px; } }

/* this week's drops */
.tag-age { margin-left: 4px; padding: 2px 6px; border-radius: 6px; background: var(--red); color: #fff; font: 700 0.66rem var(--font-body); letter-spacing: 0.06em; vertical-align: 3px; }
.drops__note { gap: 6px 18px; }
.drops__note span { color: rgba(255, 255, 255, 0.72); }
.drops__note .link-arrow { align-self: auto; }

/* family */
.family__media .a { aspect-ratio: 5 / 4; }
.family__media .a img { object-position: 30% 50%; }
.family__media .b img { object-position: 82% 50%; }
.fact { border-radius: var(--r); }

/* also inside the store */
.also-sec { padding-top: 0; }
.alsocard .btn { align-self: flex-start; }
.alsocard .eyebrow { color: var(--neon); opacity: 1; }
.alsocard:not(.alsocard--sister)::after { background: linear-gradient(0deg, rgba(5, 22, 14, 0.94) 0%, rgba(5, 22, 14, 0.8) 46%, rgba(5, 22, 14, 0.5) 100%); }
.alsocard--sister {
  background-color: var(--forest); border: 1px solid rgba(37, 228, 145, 0.28);
  background-image: radial-gradient(70% 90% at 100% 0%, rgba(37, 228, 145, 0.2), transparent 62%), linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
}
.alsocard--sister::after { display: none; }
.alsocard--sister:hover { border-color: var(--neon); }

@media (max-width: 960px) {
  .hero__strip { grid-template-columns: minmax(0, 1fr); }
  .hstore { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hstore .status { margin-left: 0; }
  .family__media .a { aspect-ratio: 16 / 10; }
}
@media (max-width: 720px) {
  .hero .hero__in { padding-top: 72px; }
  .hero__all { min-height: 48px; justify-content: space-between; }
  .hstore { flex-direction: row; align-items: center; gap: 14px; }
  .hstore .status { margin-left: auto; }
  .tile::after { background: linear-gradient(0deg, rgba(5, 22, 14, 0.95) 0%, rgba(5, 22, 14, 0.82) 50%, rgba(5, 22, 14, 0.32) 80%, rgba(5, 22, 14, 0) 100%); }
  .tile__text small { font-size: 0.66rem; letter-spacing: 0.1em; }
  .tile--1 .tile__text strong { font-size: 1.7rem; }
  .drop__body { flex-direction: row; align-items: center; justify-content: space-between; padding: 14px; }
  .drops__note { flex-direction: column; align-items: flex-start; }
  .alsocard:not(.alsocard--sister)::after { background: linear-gradient(0deg, rgba(5, 22, 14, 0.95) 0%, rgba(5, 22, 14, 0.86) 65%, rgba(5, 22, 14, 0.7) 100%); }
  .facts { gap: 0; }
  .fact { padding: 14px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
  .fact:last-child { border-bottom: 1px solid var(--line); }
}

/* ---------- hero v3: the canopy photo sits in the top of the hero, clear of the headline ----------
   The photo (real Wixom layout re-branded BP) has its canopy at ~45% of the image height. We pin that band near the top
   of the hero (--canopy-y), fade the bottom of the photo into the dark green, and start the copy below the canopy. */
.page-home .hero {
  --hero-img-h: clamp(520px, 62vw, 920px);
  --canopy-y: 205px;
  min-height: 0;
}
.page-home .hero__bg img {
  inset: auto; left: 0; top: calc(var(--canopy-y) - 0.455 * var(--hero-img-h));
  width: 100%; height: var(--hero-img-h);
  object-fit: cover; object-position: 50% 50%; transform: none; animation: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 58%, transparent 100%);
}
.page-home .hero::after {
  background: linear-gradient(180deg, rgba(3, 23, 14, 0.18) 0%, rgba(3, 23, 14, 0) 22%, rgba(3, 23, 14, 0.5) 38%, rgba(3, 23, 14, 0.9) 55%, #03170e 72%);
}
.page-home .hero .hero__in { padding-top: clamp(320px, 24.5vw, 360px); }
.page-home .hero__copy { text-shadow: 0 2px 28px rgba(3, 23, 14, 0.55); }

@media (max-width: 960px) {
  .page-home .hero .hero__in { padding-top: clamp(320px, 40vw, 370px); }
}
@media (max-width: 720px) {
  .page-home .hero { --hero-img-h: 125vw; --canopy-y: 190px; }
  .page-home .hero .hero__in { padding-top: clamp(300px, 38vw + 166px, 450px); }
  .page-home .hero::after {
    background: linear-gradient(180deg, rgba(3, 23, 14, 0.15) 0%, rgba(3, 23, 14, 0) 24%, rgba(3, 23, 14, 0.55) 40%, rgba(3, 23, 14, 0.92) 54%, #03170e 68%);
  }
}

/* store chips now carry a brand badge: give them the full width, and put "All locations" on its own line */
.page-home .hero__strip { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.page-home .hero__all { justify-self: end; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--neon); gap: 10px; }
.page-home .hero__all:hover { background: none; color: #fff; transform: none; }
.page-home .hstore { flex-wrap: wrap; row-gap: 8px; }
.page-home .hstore .status { margin-left: auto; }
.page-home .hstore .bmark--lg { height: 44px; min-width: 60px; }
.page-home .hstore .bmark--lg img { height: 29px; }