/*
 * thebamboostudio-v1 theme — layout & components
 *
 * Layout strategy (Jenzo-inspired):
 *   - Top utility bar (thin, neutral)
 *   - Main header (logo left, search center, account/wishlist/cart right)
 *   - Sticky primary nav with mega-menu
 *   - Hero carousel on home
 *   - Sectioned product grids with hover-revealed action buttons
 *   - Multi-column dark footer
 *
 * Every selector is namespaced under .thebamboostudio-v1 so future themes can coexist.
 */

body.thebamboostudio-v1 {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-bg);
}

.thebamboostudio-v1 h1, .thebamboostudio-v1 h2, .thebamboostudio-v1 h3, .thebamboostudio-v1 h4, .thebamboostudio-v1 h5 {
  font-family: var(--font-display);
  color: var(--color-heading);
  font-weight: 500;
  line-height: var(--line-height-tight);
}

.thebamboostudio-v1 a { color: var(--color-link); text-decoration: none; transition: color var(--t-fast) var(--ease-out); }
.thebamboostudio-v1 a:hover { color: var(--color-link-hover); }
/* Click feedback: underline text links while pressed; button-styled links excluded. */
.thebamboostudio-v1 a:active:not(.bb-btn):not(.bb-qadd-link) { text-decoration: underline; }

/* =================================================================
 *  Layout container
 * ================================================================= */
.thebamboostudio-v1 .container,
.thebamboostudio-v1 .container-fluid {
  max-width: var(--container-max);
}

/* =================================================================
 *  Sticky nav
 * ================================================================= */
.thebamboostudio-v1 .bb-nav {
  position: sticky;
  top: 0;
  z-index: 150;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.thebamboostudio-v1 .bb-nav-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-3);
  position: relative;
}
.thebamboostudio-v1 .bb-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  margin-right: auto;
}
.thebamboostudio-v1 .bb-brand img { width: 40px; height: 40px; border-radius: 50%; }
.thebamboostudio-v1 .bb-brand span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--color-heading);
  line-height: 1.1;
}
.thebamboostudio-v1 .bb-nav-links { display: flex; gap: var(--space-5); font-size: var(--fs-sm); font-weight: 600; }
.thebamboostudio-v1 .bb-nav-links a { text-decoration: none; color: var(--color-text); opacity: .82; }
.thebamboostudio-v1 .bb-nav-links a:hover { opacity: 1; color: var(--color-text); }

.thebamboostudio-v1 .bb-nav-search { position: relative; }
.thebamboostudio-v1 .bb-search-panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 280px;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  z-index: 60;
}
.thebamboostudio-v1 .bb-search-panel form { display: flex; gap: var(--space-2); }
.thebamboostudio-v1 .bb-search-panel input.form-control { border-radius: var(--radius-pill); }
.thebamboostudio-v1 .bb-search-panel button {
  border: 0; border-radius: 50%; width: 38px; height: 38px; flex-shrink: 0;
  background: var(--brand-primary); color: #fff;
}

.thebamboostudio-v1 #cart { margin-bottom: 0; }
/* Tighter than .bb-nav-row's own gap (--space-5): the icon cluster
   (search, cart, account) reads better closer together than the row's
   other groups (brand, nav-links). margin-left pulls it in from
   .bb-nav-search too, since that gap also comes from the shared row gap. */
.thebamboostudio-v1 .bb-nav-actions { display: flex; align-items: center; gap: var(--space-4); margin-left: calc(var(--space-4) - var(--space-5)); }
.thebamboostudio-v1 .bb-icon-btn {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  color: var(--color-text);
  display: flex; align-items: center; justify-content: center;
}
.thebamboostudio-v1 .bb-icon-btn svg { width: 19px; height: 19px; }
.thebamboostudio-v1 .bb-icon-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

.thebamboostudio-v1 .bb-cart-widget { position: relative; }
.thebamboostudio-v1 .bb-cart-badge {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: var(--radius-pill); background: var(--brand-accent); color: #fff;
  font-size: .62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1;
}
.thebamboostudio-v1 .bb-cart-widget .dropdown-menu.bb-cart-dropdown {
  min-width: 340px; padding: var(--space-3); border-radius: var(--radius-md);
  border-color: var(--color-border); box-shadow: var(--shadow-lg); margin-top: var(--space-2);
}
.thebamboostudio-v1 .bb-cart-list { list-style: none; padding: 0; margin: 0; max-height: 280px; overflow-y: auto; }
.thebamboostudio-v1 .bb-cart-item {
  display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-3); align-items: center;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border);
}
.thebamboostudio-v1 .bb-cart-item:last-child { border-bottom: 0; }
.thebamboostudio-v1 .bb-cart-thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); }
.thebamboostudio-v1 .bb-cart-name { font-size: var(--fs-sm); color: var(--color-text-strong); display: block; line-height: 1.3; }
.thebamboostudio-v1 .bb-cart-name:hover { color: var(--brand-primary); }
.thebamboostudio-v1 .bb-cart-qty { font-size: var(--fs-xs); color: var(--color-text-muted); }
.thebamboostudio-v1 .bb-cart-remove button { background: transparent; border: 0; color: var(--color-text-muted); cursor: pointer; padding: 4px; }
.thebamboostudio-v1 .bb-cart-remove button:hover { color: var(--color-danger); }
.thebamboostudio-v1 .bb-cart-totals { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); margin-top: var(--space-2); }
.thebamboostudio-v1 .bb-cart-total-row { display: flex; justify-content: space-between; padding: 2px 0; font-size: var(--fs-sm); }
.thebamboostudio-v1 .bb-cart-total-row:last-child { font-weight: 700; color: var(--brand-primary); font-size: var(--fs-md); }
.thebamboostudio-v1 .bb-cart-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.thebamboostudio-v1 .bb-cart-empty { text-align: center; padding: var(--space-5) var(--space-3); color: var(--color-text-muted); }
.thebamboostudio-v1 .bb-cart-empty i { font-size: 32px; margin-bottom: var(--space-3); color: var(--color-border-strong); }
.thebamboostudio-v1 .bb-cart-empty p { margin: 0 0 var(--space-3); }

/* Shared pill buttons (nav, footer, floating bar) */
.thebamboostudio-v1 .bb-btn {
  display: inline-flex; align-items: center; gap: var(--space-2); border-radius: var(--radius-pill);
  padding: .8rem 1.6rem; font-weight: 600; font-size: var(--fs-sm); text-decoration: none;
  border: 1.5px solid transparent; transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
  white-space: nowrap;
}
.thebamboostudio-v1 .bb-btn:active { transform: translateY(1px); }
.thebamboostudio-v1 .bb-btn-filled { background: var(--brand-primary); color: var(--color-bg); box-shadow: var(--shadow-md); }
.thebamboostudio-v1 .bb-btn-filled:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); color: var(--color-bg); }
.thebamboostudio-v1 .bb-btn-outline { background: transparent; border-color: var(--color-text); color: var(--color-text); }
.thebamboostudio-v1 .bb-btn-outline:hover { background: var(--color-text); color: var(--color-bg); }
.thebamboostudio-v1 .bb-btn-sm { padding: .55rem 1.1rem; font-size: var(--fs-xs); }

/* =================================================================
 *  Section titles (Jenzo-style: underline accent)
 * ================================================================= */
.thebamboostudio-v1 .section {
  padding: var(--space-8) 0;
}
.thebamboostudio-v1 .section-title {
  text-align: center;
  margin-bottom: var(--space-6);
}
.thebamboostudio-v1 .section-title .eyebrow {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: var(--space-2);
  font-weight: 600;
}
.thebamboostudio-v1 .section-title h2 {
  font-size: var(--fs-3xl);
  margin: 0 0 var(--space-3);
}
.thebamboostudio-v1 .section-title .accent-rule {
  width: 80px;
  height: 2px;
  background: var(--brand-primary);
  margin: 0 auto var(--space-3);
}
.thebamboostudio-v1 .section-title p {
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto;
  font-size: var(--fs-md);
}

/* =================================================================
 *  Organic section dividers — a small hand-drawn wave, echoing the
 *  blob/leaf motifs used in the hero and story art. Sits inside each
 *  section's own top/bottom padding (no extra height added), so it
 *  doesn't disturb the section-spacing rhythm.
 * ================================================================= */
.thebamboostudio-v1 .bb-story,
.thebamboostudio-v1 .bb-process,
.thebamboostudio-v1 .bb-menu-head,
.thebamboostudio-v1 .bb-testimonials-section {
  position: relative;
}
.thebamboostudio-v1 #name::before,
.thebamboostudio-v1 .bb-story::before,
.thebamboostudio-v1 .bb-process::before,
.thebamboostudio-v1 .bb-menu-head::before,
.thebamboostudio-v1 .bb-testimonials-section::before {
  content: '';
  position: absolute;
  top: calc((var(--bb-divider-pad) - 14px) / 2);
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14' viewBox='0 0 40 14'%3E%3Cpath d='M0 7 C10 -2 10 16 20 7 C30 -2 30 16 40 7' fill='none' stroke='%237c8f6a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 40px 14px;
  opacity: 0.45;
  pointer-events: none;
}
/* Menu page: the gap to "This week's menu" is owned by .bb-page-head's own
   bottom padding (see menu-page.css), not the next section's top — so this
   divider sits inside that padding via ::after instead of a ::before on
   the following section. */
.thebamboostudio-v1 .bb-menu-page .bb-page-head::after {
  content: '';
  position: absolute;
  bottom: 12px; /* biased toward the section below, so most of the padding
    reads as breathing room above the divider, away from the pill row */
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14' viewBox='0 0 40 14'%3E%3Cpath d='M0 7 C10 -2 10 16 20 7 C30 -2 30 16 40 7' fill='none' stroke='%237c8f6a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 40px 14px;
  opacity: 0.45;
  pointer-events: none;
}

/* =================================================================
 *  Product card (Jenzo-style: hover reveal action bar)
 * ================================================================= */
.thebamboostudio-v1 .product-card {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.thebamboostudio-v1 .product-card:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.thebamboostudio-v1 .product-card .image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-bg-soft);
}
.thebamboostudio-v1 .product-card .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.thebamboostudio-v1 .product-card:hover .image img { transform: scale(1.04); }
.thebamboostudio-v1 .product-card .badges {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  z-index: 2;
}
.thebamboostudio-v1 .product-card .badge-sale,
.thebamboostudio-v1 .product-card .badge-new {
  display: inline-block;
  padding: 4px 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  border-radius: var(--radius-sm);
}
.thebamboostudio-v1 .product-card .badge-sale { background: var(--color-sale); }
.thebamboostudio-v1 .product-card .badge-new { background: var(--color-new); }
.thebamboostudio-v1 .product-card .quick-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  gap: 0;
  padding: var(--space-2) 0;
  transform: translateY(100%);
  transition: transform var(--t-base) var(--ease-out);
  border-top: 1px solid var(--color-border);
}
.thebamboostudio-v1 .product-card:hover .quick-actions { transform: translateY(0); }
.thebamboostudio-v1 .product-card .quick-actions button,
.thebamboostudio-v1 .product-card .quick-actions a {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--color-text);
  padding: var(--space-2);
  cursor: pointer;
  font-size: var(--fs-md);
  border-right: 1px solid var(--color-border);
  text-align: center;
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.thebamboostudio-v1 .product-card .quick-actions button:last-child,
.thebamboostudio-v1 .product-card .quick-actions a:last-child { border-right: 0; }
.thebamboostudio-v1 .product-card .quick-actions button:hover,
.thebamboostudio-v1 .product-card .quick-actions a:hover { color: var(--brand-primary); }
.thebamboostudio-v1 .product-card .content {
  padding: var(--space-4);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.thebamboostudio-v1 .product-card .name {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-strong);
  margin: 0 0 var(--space-2);
  line-height: 1.4;
}
.thebamboostudio-v1 .product-card .name a {
  color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.thebamboostudio-v1 .product-card .name a:hover { color: var(--brand-primary); }
.thebamboostudio-v1 .product-card .price {
  margin-top: auto;
  font-size: var(--fs-md);
}
.thebamboostudio-v1 .product-card .price-new { color: var(--brand-primary); font-weight: 600; }
.thebamboostudio-v1 .product-card .price-old {
  color: var(--color-price-old);
  text-decoration: line-through;
  font-size: var(--fs-sm);
  margin-left: var(--space-2);
}
.thebamboostudio-v1 .product-card .rating {
  margin-top: var(--space-2);
  color: var(--color-rating);
  font-size: var(--fs-xs);
}
.thebamboostudio-v1 .product-card .rating .empty { color: var(--color-border-strong); }

/* =================================================================
 *  Footer
 * ================================================================= */
.thebamboostudio-v1 .bb-footer {
  /* OC's stock stylesheet.css sets the bare `footer` element to
     position:absolute; bottom:-1px (a sticky-footer trick sized for
     short pages). It was always applying here too, just invisibly,
     since every page was short enough not to reveal the overlap —
     the homepage-composition plan's much taller layout made it land
     mid-page over the signup band. Reset back to normal flow. */
  position: static;
  background: var(--color-bg-soft);
  padding: var(--space-8) 0 0;
  margin-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.thebamboostudio-v1 .bb-foot-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr auto;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
}
@media (max-width: 820px) {
  .thebamboostudio-v1 .bb-foot-grid { grid-template-columns: 1fr 1fr; }
}
.thebamboostudio-v1 .bb-foot-brand { display: flex; align-items: center; gap: var(--space-2); }
.thebamboostudio-v1 .bb-foot-brand img { width: 36px; height: 36px; border-radius: 50%; }
.thebamboostudio-v1 .bb-foot-brand span { font-family: var(--font-display); font-weight: 600; color: var(--color-heading); }
.thebamboostudio-v1 .bb-foot-tag { color: var(--color-text-muted); font-size: var(--fs-sm); margin-top: var(--space-2); max-width: 22ch; }
.thebamboostudio-v1 .bb-foot-newsletter-title {
  margin: var(--space-4) 0 0; max-width: 320px;
  font-size: var(--fs-sm); color: var(--color-text-muted);
}
.thebamboostudio-v1 .bb-foot-newsletter { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); max-width: 320px; }
.thebamboostudio-v1 .bb-foot-newsletter input { border-radius: var(--radius-pill); border-color: var(--color-border); }
.thebamboostudio-v1 .bb-foot-newsletter button {
  border: 0; border-radius: var(--radius-pill); align-self: flex-start;
  padding: var(--space-2) var(--space-4); min-height: 42px;
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--brand-primary); color: #fff; font-size: var(--fs-sm);
}
.thebamboostudio-v1 .bb-foot-col h4 {
  font-family: var(--font-eyebrow); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-primary-light); margin-bottom: var(--space-3);
}
.thebamboostudio-v1 .bb-foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.thebamboostudio-v1 .bb-foot-col a { text-decoration: none; color: var(--color-text-muted); font-size: var(--fs-sm); }
.thebamboostudio-v1 .bb-foot-col a:hover { color: var(--color-text); }
.thebamboostudio-v1 .bb-back-top {
  width: 40px; height: 40px; border-radius: 50%; background: var(--brand-primary); color: var(--color-bg);
  border: 0; align-self: start; display: flex; align-items: center; justify-content: center;
}
.thebamboostudio-v1 .bb-back-top svg { width: 18px; height: 18px; }
.thebamboostudio-v1 .bb-foot-bottom {
  /* padding-block only — this element also carries Bootstrap's .container
     class for its horizontal inset; a plain `padding` shorthand here would
     zero that out. Invisible on desktop (the container's own auto side-
     margins fake the gap once viewport > --container-max) but exposed at
     full-bleed mobile widths. */
  border-top: 1px solid var(--color-border); padding-block: var(--space-4); display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-xs); color: var(--color-text-muted);
}



/* =================================================================
 *  Responsive
 * ================================================================= */
@media (max-width: 760px) {
  .thebamboostudio-v1 .bb-nav-links,
  .thebamboostudio-v1 .bb-nav-order { display: none; }
  .thebamboostudio-v1 .bb-nav-row { gap: var(--space-2); }
  .thebamboostudio-v1 .bb-nav-actions { gap: var(--space-2); margin-left: 0; }
}