/*
 * thebamboostudio-v1 theme — homepage top-of-page CSS Grid shell.
 *
 * Weekly Drop's module (extension/bamboo/catalog/view/template/module/
 * weeklydrop.twig, unmodified) renders its hero quick-add chips and its
 * full menu grid as one combined block assigned to {{ content_top }}.
 * display:contents on the two wrapper levels between that block and this
 * grid container exposes its inner pieces (.bb-quickadd-row, .bb-menu-head,
 * .bb-menu-grid) as independently-positionable grid items, without moving
 * anything in the DOM or touching the module's own markup.
 *
 * IMPORTANT: the module instance MUST live in {{ content_top }} (NOT in
 * {{ home_after }} or any other slot). If you move it elsewhere, the
 * .bb-content-after-hero wrapper is no longer inside this grid, and CSS
 * Grid's auto-placement algorithm will dump the whole block into the first
 * available cell — which is the "chips" row — recreating the bug where the
 * menu appears between the hero CTAs and philosophy.
 */
.thebamboostudio-v1 .bb-home-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "eyebrow    art"
    "h1         art"
    "lede       art"
    "ctas       art"
    "chips      art"
    "story      story"
    "process    process"
    "menu-head  menu-head"
    "menu-grid  menu-grid";
  column-gap: clamp(2rem, 4vw, 3.5rem);
  row-gap: 0;
  align-items: start;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
  padding-block: clamp(2.4rem, 5vw, 4rem) 0;
}

.thebamboostudio-v1 .bb-hero-eyebrow { grid-area: eyebrow; }
.thebamboostudio-v1 .bb-hero-h1 { grid-area: h1; }
.thebamboostudio-v1 .bb-hero-lede { grid-area: lede; }
.thebamboostudio-v1 .bb-hero-ctas { grid-area: ctas; }
.thebamboostudio-v1 .bb-hero-art { grid-area: art; margin-top: 150px; }

/* Flatten the two wrapper levels between {{ content_top }} and this grid. */
.thebamboostudio-v1 .bb-content-top-slot,
.thebamboostudio-v1 .bb-content-top-slot .bb-weeklydrop {
  display: contents;
}

.thebamboostudio-v1 .bb-quickadd-row { grid-area: chips; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.thebamboostudio-v1 .bb-story { grid-area: story; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.thebamboostudio-v1 .bb-process { grid-area: process; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.thebamboostudio-v1 .bb-menu-head { grid-area: menu-head; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.thebamboostudio-v1 .bb-menu-grid { grid-area: menu-grid; margin-top: clamp(1.5rem, 3vw, 2.5rem); }

#top-menu-anchor { grid-area: menu-head; align-self: start; }

@media (max-width: 900px) {
  .thebamboostudio-v1 .bb-home-top {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "h1"
      "lede"
      "ctas"
      "art"
      "chips"
      "story"
      "process"
      "menu-head"
      "menu-grid";
  }
  /* Small breathing room between CTAs and art on mobile. */
  .thebamboostudio-v1 .bb-hero-art { margin-top: 1.5rem; }
}
/* ============ Shared helpers (used by hero + story) ============ */
.thebamboostudio-v1 .bb-eyebrow {
  font-family: var(--font-eyebrow);
  font-size: .9rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-primary-light);
  font-weight: 700;
}
.thebamboostudio-v1 .bb-visually-hidden {
  position: absolute;
  left: -9999px;
}
.thebamboostudio-v1 .bb-organic { position: relative; }
.thebamboostudio-v1 .bb-organic .bb-echo {
  position: absolute;
  inset: 0;
  transform: translate(7%, 9%);
}
.thebamboostudio-v1 .bb-organic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: drop-shadow(0 10px 16px rgba(74, 63, 45, 0.18));
}
.thebamboostudio-v1 .blob-a { clip-path: url(#blobA); }
.thebamboostudio-v1 .blob-b { clip-path: url(#blobB); }
.thebamboostudio-v1 .blob-c { clip-path: url(#blobC); }

/* ============ Hero ============ */
.thebamboostudio-v1 .bb-hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 3.4vw + 2rem, 5.2rem);
  font-weight: 600;
  margin-block: clamp(0.35rem, 0.7vw, 0.6rem) 1rem;
  letter-spacing: -.02em;
  line-height: .98;
  color: var(--color-heading);
}
.thebamboostudio-v1 .bb-hero-h1 em {
  font-style: italic;
  color: var(--brand-accent);
}
.thebamboostudio-v1 .bb-hero-lede {
  max-width: 60ch;
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin: 0 0 0.5rem;
}
.thebamboostudio-v1 .bb-hero-ctas {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: 0;
}

.thebamboostudio-v1 .bb-quickadd-row { display: flex; gap: 1.4rem; margin-top: 2rem; }
.thebamboostudio-v1 .bb-quickadd { display: flex; flex-direction: column; align-items: center; gap: .15rem; width: 112px; }
.thebamboostudio-v1 .bb-photo-wrap { position: relative; width: 108px; height: 108px; }
.thebamboostudio-v1 .bb-photo-wrap .bb-echo { opacity: .55; }
/*
 * Weekly Drop's own Twig (unmodified) renders a plain <img> here with no
 * blob or echo markup — reproduce the mock's full organic-photo treatment
 * (clipped photo + a second, offset, colored "echo" shape behind it, not
 * just a clip) entirely in CSS: ::before stands in for the missing .echo
 * div, since a pseudo-element needs no markup change.
 */
.thebamboostudio-v1 .bb-photo-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: translate(7%, 9%);
}
.thebamboostudio-v1 .bb-photo-wrap img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: drop-shadow(0 8px 14px rgba(74, 63, 45, 0.12));
}
.thebamboostudio-v1 .bb-quickadd:nth-of-type(odd) .bb-photo-wrap::before { background: var(--color-blush); opacity: .55; clip-path: url(#blobB); }
.thebamboostudio-v1 .bb-quickadd:nth-of-type(odd) .bb-photo-wrap img { clip-path: url(#blobB); }
.thebamboostudio-v1 .bb-quickadd:nth-of-type(even) .bb-photo-wrap::before { background: var(--brand-primary-light); opacity: .55; clip-path: url(#blobC); }
.thebamboostudio-v1 .bb-quickadd:nth-of-type(even) .bb-photo-wrap img { clip-path: url(#blobC); }
.thebamboostudio-v1 .bb-qadd,
.thebamboostudio-v1 .bb-qadd-link {
  position: absolute;
  right: -4px;
  bottom: 2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--color-bg);
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 3;
  text-decoration: none;
}
/*
 * "Just added" feedback: a brief glow pulse instead of the + permanently
 * swapping to a checkmark, so the button stays tappable for a second
 * unit and the confirmation lives in the pulse + the toast (below)
 * rather than a lingering state change. Applies to any quick-add button
 * (.bb-qadd, .bb-qadd-link, .bb-ticket-add) via the shared class JS adds.
 */
@keyframes bb-just-added-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 14px color-mix(in srgb, var(--brand-accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-accent) 0%, transparent); }
}
.thebamboostudio-v1 .bb-just-added { animation: bb-just-added-pulse .6s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .thebamboostudio-v1 .bb-just-added { animation: none; }
}

/* Toast confirmation banner, shared by every quick-add button on the page. */
.thebamboostudio-v1 .bb-toast {
  position: fixed;
  top: calc(88px + env(safe-area-inset-top, 0px));
  left: 50%;
  z-index: 500;
  transform: translate(-50%, -10px);
  background: var(--brand-primary);
  color: var(--color-bg);
  padding: .7rem 1.4rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  font-size: .88rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  white-space: nowrap;
}
.thebamboostudio-v1 .bb-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 480px) {
  .thebamboostudio-v1 .bb-toast { white-space: normal; text-align: center; width: max-content; max-width: calc(100vw - 2.5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .thebamboostudio-v1 .bb-toast { transition: opacity .25s ease; }
}
.thebamboostudio-v1 .bb-qname { font-size: .82rem; font-weight: 700; color: var(--color-text-muted); text-align: center; text-decoration: none; }
.thebamboostudio-v1 a.bb-qname:hover { color: var(--color-heading); }
/* Tighten the chip's stacked meta so the rating row sits right under the
   name and the price sits flush under the rating, instead of inheriting the
   menu-grid's larger gaps. */
.thebamboostudio-v1 .bb-quickadd .bb-menu-rating { margin-top: .15rem; gap: .25rem; }
.thebamboostudio-v1 .bb-quickadd .bb-menu-rating .bb-stars-row { font-size: .9rem; }
.thebamboostudio-v1 .bb-quickadd .bb-menu-reviews { font-size: .72rem; }
.thebamboostudio-v1 .bb-qprice { font-family: var(--font-eyebrow); font-weight: 600; font-size: .85rem; color: var(--color-heading); margin-top: .15rem; }
.thebamboostudio-v1 .bb-badge-stamp {
  position: absolute;
  top: -9px;
  right: -8px;
  background: var(--color-paper);
  border: 1.5px solid var(--brand-accent);
  color: var(--brand-accent);
  z-index: 3;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 6px;
  padding: .2rem .42rem;
  transform: rotate(-3deg);
}
.thebamboostudio-v1 .bb-badge-stamp.out { border-color: var(--color-text-muted); color: var(--color-text-muted); }

.thebamboostudio-v1 .bb-hero-art { position: relative; }
.thebamboostudio-v1 .bb-blob-backdrop { position: relative; aspect-ratio: 1/0.92; }
.thebamboostudio-v1 .bb-blob-backdrop svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.thebamboostudio-v1 .bb-hero-photo { position: absolute; width: 84%; aspect-ratio: 1/0.98; left: 8%; top: 12%; z-index: 2; }
.thebamboostudio-v1 .bb-hero-photo .bb-echo { background: var(--brand-warm); opacity: .3; }

/*
 * Floating "ticket" card from the mock, layered over the hero photo.
 * Populated by theme.js from the first quick-add chip's already-real
 * data (name, stock, product id) rather than duplicating Weekly Drop's
 * markup; starts [hidden] until that JS confirms there's a chip to
 * mirror. The star rating is decorative (no fabricated review count —
 * unlike Testimonials, there's no real per-product review data wired
 * up here), matching this project's practice of not inventing numbers.
 */
.thebamboostudio-v1 .bb-ticket {
  position: absolute;
  top: -14%;
  right: -1%;
  width: min(210px, 56%);
  background: var(--color-paper);
  border-radius: 14px;
  padding: .9rem 1rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  z-index: 4;
}
.thebamboostudio-v1 .bb-ticket-stars { color: var(--brand-warm); font-size: .78rem; letter-spacing: .05em; }
.thebamboostudio-v1 .bb-ticket-note { color: var(--color-text-muted); font-weight: 400; }
.thebamboostudio-v1 .bb-ticket-name { display: block; margin-top: .15rem; font-family: var(--font-display); font-size: 1.05rem; color: var(--color-heading); }
.thebamboostudio-v1 .bb-ticket-name a { color: inherit; text-decoration: none; }
.thebamboostudio-v1 .bb-ticket-row { display: flex; align-items: center; justify-content: flex-start; margin-top: .2rem; padding-left: 0; }
/* Keep the price flush with the stars/name's left edge; add breathing room
   only when the stock badge has real text to sit beside. */
.thebamboostudio-v1 .bb-ticket-row .bb-menu-price { margin-top: 0; margin-left: .35rem; }
.thebamboostudio-v1 .bb-ticket-row .bb-ticket-stock:empty + .bb-menu-price { margin-left: 0; }
.thebamboostudio-v1 .bb-ticket-stock { font-family: var(--font-eyebrow); font-weight: 600; font-size: .85rem; color: var(--color-text); }
.thebamboostudio-v1 .bb-ticket-add {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--color-bg);
  border: none;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thebamboostudio-v1 .bb-ticket-add[aria-pressed="true"] { background: var(--brand-accent); }
@media (max-width: 900px) { .thebamboostudio-v1 .bb-ticket { top: -4%; } }

.thebamboostudio-v1 .bb-leaf-fringe-wrap { position: absolute; right: -6%; top: 8%; width: 26%; pointer-events: none; z-index: 1; }
.thebamboostudio-v1 .bb-leaf-fringe { width: 100%; opacity: .9; }
@media (max-width: 900px) { .thebamboostudio-v1 .bb-leaf-fringe-wrap { display: none; } }