/* ============================================================
   Claudify Header — Framer "Prosperous Essentials" recreation
   Background: #F2F2EF  |  Text: #1A1C18  |  Font: Jost / Cormorant Garamond
   ============================================================ */

.bera-site-chrome {
  background: #f2f2ef;
  position: sticky;
  top: 0;
  z-index: 100;
}

.home .bera-site-chrome,
.bera-about-page .bera-site-chrome {
  background: transparent;
  position: sticky;
  top: 0;
  width: 100%;
}

.bera-announcement {
  align-items: center;
  background: #000;
  color: #f2f2ef;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  height: 38px;
  justify-content: center;
  overflow: hidden;
  padding: 0 max(12px, calc((100vw - 420px) / 2));
  position: relative;
}

.bera-announcement__viewport {
  display: grid;
  min-width: 0;
  place-items: center;
}

.bera-announcement__item {
  color: inherit;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 400;
  grid-area: 1 / 1;
  letter-spacing: 0.12em !important;
  line-height: 1.4;
  margin: 0;
  max-width: 100%;
  opacity: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease;
  visibility: hidden;
  white-space: nowrap;
}

.bera-announcement__item.is-active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.bera-announcement__control {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  padding: 0;
  width: 32px;
}

.bera-announcement__control svg {
  fill: none;
  height: 12px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
  width: 12px;
}

.bera-announcement__control:focus-visible {
  outline-color: #f2f2ef;
}

/* ---- Section shell: transparent — hero is pulled up behind it ---- */
.section-header {
  background: transparent !important;
  background-color: transparent !important;
  padding: 12px 16px;
  position: sticky;
  top: 0;
  /* Use !important to beat Dawn's .section-header.shopify-section-group-header-group { z-index: 3 }
     which has higher specificity (0,2,0) vs our (0,1,0). Without this the header sits at z-index 3
     and the nature section's positioned children (also z-index 3, later in DOM) paint over it. */
  z-index: 100 !important;
}

/* Same fix with higher specificity for belt-and-suspenders */
.section-header.shopify-section-group-header-group {
  z-index: 100 !important;
}

/* iOS status-bar clearance is handled by the VIEWPORT, not per-element insets: the theme's
   viewport meta deliberately omits `viewport-fit=cover`, so iOS/Android lay the page out
   BELOW the status bar / notch. A plain `top: 0` sticky header is then always clear of the
   status bar and never cut off on scroll — with NO dependency on env(safe-area-inset-top),
   which was the prior bug (Chrome iOS reports env() as 0 while its toolbar collapses on
   scroll, dropping the stuck header under the status bar). */

.section-header sticky-header,
.section-header .header-wrapper,
.section-header [class*="color-"],
.shopify-section-header-sticky,
.shopify-section-header-sticky .header-wrapper,
.shopify-section-header-sticky sticky-header {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ---- Floating card ---- */
.claudify-header {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgb(242, 242, 239);
  border-radius: 12px;
  padding: 22px 32px;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  box-shadow: 0 4px 24px rgba(26, 28, 24, 0.08), 0 1px 6px rgba(26, 28, 24, 0.04);
}

/* ---- Three columns ---- */
.claudify-header__left {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.claudify-header__center {
  flex: 0 0 auto;
}

.claudify-header__right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* ---- Logo ---- */
.claudify-header__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: rgb(26, 28, 24);
}

.claudify-header__logo-img {
  display: block;
  width: 100px;
  height: auto;
  max-width: none;
}

/* ---- Desktop nav list ---- */
.claudify-nav__list {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.claudify-nav__item {
  position: relative;
}

/* Nav links */
.claudify-nav__link,
.claudify-nav__link--parent {
  display: inline-flex;
  align-items: center;
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  color: rgb(26, 28, 24);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity 0.15s;
}

.claudify-nav__link:hover,
.claudify-nav__link--parent:hover {
  opacity: 1;
}

/* ---- Desktop dropdown panel — matches the search/cart popups: white card,
   12px radius, soft shadow, with rounded hover pills inside ---- */
.claudify-nav__dropdown {
  position: absolute;
  /* Drop the panel below the header bottom (+16px), just like the search window —
     the nav item is centred in the header, so its top is header-height/2 above the
     centre; half the height + the item's half-height (~14px) + 16px clears it. */
  top: calc(var(--header-height, 92px) / 2 + 30px);
  left: -12px;
  min-width: 196px;
  background: rgb(255, 255, 255);
  border-radius: 12px;
  padding: 8px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  z-index: 20;
  box-shadow: 0 8px 48px rgba(26, 28, 24, 0.16);
}

/* No hover "bridge" pseudo-element here, on purpose. A bridge has to reach UP to the
   "Shop" trigger (centred in the header), so it unavoidably overlaps the OTHER nav
   links (Home / Our Story / Contact / FAQ) and — sitting in the panel's z-index:20
   stacking context — blocked their clicks while the menu was open. Instead, hover
   continuity from "Shop" down to the panel is handled by a JS hover-intent close-delay
   (the .is-open class, set in header.liquid): the menu stays open for ~250ms after the
   cursor leaves, which is enough to cross the gap to the panel — and NOTHING ever
   overlaps the nav links, so they are always clickable. */
.claudify-nav__item--dropdown:hover .claudify-nav__dropdown,
.claudify-nav__item--dropdown:focus-within .claudify-nav__dropdown,
.claudify-nav__item--dropdown.is-open .claudify-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

/* ============================================================
   Shop mega-menu — collection links column + up to two product
   cards. Store fonts only (Cormorant Garamond + Jost). Reuses
   .claudify-nav__dropdown positioning/reveal.
   ============================================================ */
/* The Shop item holds the mega-menu. Make that item static so the mega anchors to
   the header CARD (.claudify-header) instead of the item — its left edge then lines
   up with the header's left edge, not with whatever nav item sits above it. */
.claudify-nav__item--dropdown:has(> .claudify-nav__dropdown--mega) {
  position: static;
}

.claudify-nav__dropdown--mega {
  top: calc(100% + 16px);               /* drop 16px below the header card */
  left: 0;                              /* left edge flush with the header's left edge */
  right: auto;
  min-width: 0;
  width: 856px;                         /* Figma width (desktop) */
  max-width: 100%;                      /* never wider than the header card */
  padding: 0;
}

.claudify-megamenu {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 48px;                            /* Figma: gap between menu + products */
  padding: 32px;                        /* Figma: dropdown padding */
}

/* ---- Left: links ---- */
.claudify-megamenu__menu {
  display: flex;
  align-items: flex-start;
  padding: 16px 16px 16px 32px;         /* Figma: menu padding */
}

.claudify-megamenu__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;                            /* Figma: heading ↔ nav gap */
  width: 160px;
}

.claudify-megamenu__heading {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  color: rgb(26, 28, 24);
  font-synthesis: none;
}

.claudify-megamenu__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;                            /* Figma: nav link gap */
  width: 160px;
}

.claudify-megamenu__link {
  display: block;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.3;
  color: rgba(26, 28, 24, 0.78);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.12s ease;
}

.claudify-megamenu__link:hover,
.claudify-megamenu__link[aria-current="page"] {
  color: rgb(26, 28, 24);
}

/* ---- Right: product cards ---- */
.claudify-megamenu__products {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;                            /* Figma: gap between cards */
}

.claudify-megamenu__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 260px;
  background: rgb(232, 232, 225);       /* one uniform card colour behind image AND text */
  border-radius: 16px;
  overflow: hidden;
  padding: 16px 16px 20px;              /* product + text float on the single card colour */
  box-sizing: border-box;
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.claudify-megamenu__card:hover {
  transform: translateY(-2px);
}

.claudify-megamenu__img {
  width: 100%;
  height: 196px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.claudify-megamenu__img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;                  /* product sits ON the card colour, not over it */
  display: block;
}

.claudify-megamenu__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.claudify-megamenu__card-title {
  font-family: 'Cormorant Garamond', 'CG Fallback', Georgia, serif;
  font-weight: 500;
  font-size: 16px; /* eased down from 18px — read a touch large in the Shop mega cards */
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  color: rgb(26, 28, 24);
  font-synthesis-weight: none;
}

.claudify-megamenu__card-price {
  font-family: 'Jost', 'Jost Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  color: rgba(26, 28, 24, 0.82);
  font-synthesis-weight: none;
}

/* Tablet (750–989px): keep the SAME two-column layout as desktop (Shop heading +
   links in a vertical column on the left, product on the right) but show a SINGLE
   product card, so the panel fits the narrower header card with balanced spacing
   instead of clipping a 2nd card. width:auto hugs the one-card layout.
   NOTE: this block must come AFTER the base .claudify-megamenu rules above, or the
   later base rules win the cascade (media queries don't add specificity). */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .claudify-nav__dropdown--mega {
    width: 532px;                       /* 32 + links(160) + gap(48) + card(260) + 32 — symmetric insets */
    max-width: calc(100vw - 24px);
  }
  .claudify-megamenu {
    align-items: center;                /* vertically centre the links against the taller card */
  }
  .claudify-megamenu__menu {
    padding: 0;                         /* drop the desktop inset so the left padding equals the right (32px) */
  }
  .claudify-megamenu__products .claudify-megamenu__card:nth-child(n + 2) {
    display: none;
  }
}

/* ---- Icon buttons (32×32) ---- */
.claudify-icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgb(26, 28, 24);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 6px;
  transition: background 0.15s;
  flex-shrink: 0;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none !important;
}

.claudify-icon-btn:focus,
.claudify-icon-btn:active,
.claudify-icon-btn:focus-within {
  box-shadow: none !important;
  background: none;
}

/* Hover only on devices that truly support hover (not touch screens) */
@media (hover: hover) {
  .claudify-icon-btn:hover {
    background: rgb(232, 232, 225);
  }
}

.claudify-icon-btn svg,
.claudify-icon-btn .svg-wrapper svg {
  fill: none;
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.claudify-icon-btn .svg-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.claudify-icon-btn account-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Cart count bubble ---- */
.claudify-cart-btn {
  position: relative;
}

.bera-cart-count {
  position: absolute;
  top: 1px;
  right: 1px;
  transform: translate(35%, -35%);
  background: rgb(60, 68, 51);
  color: #fff;
  border-radius: 50%;
  min-width: 15px;
  height: 15px;
  padding: 0 2px;
  font-family: 'Jost', sans-serif;
  font-size: 9px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

.bera-cart-count[hidden] {
  display: none;
}

/* ---- Hamburger: in right column, hidden on desktop + tablet ---- */
.claudify-header__hamburger {
  display: none;
}

/* Hamburger shows ≡ by default, X only when menu is open */
.claudify-hamburger-icon,
.claudify-hamburger-icon svg { display: flex; width: 22px; height: 22px; }

.claudify-close-icon,
.claudify-close-icon svg { display: none !important; width: 22px; height: 22px; }

.claudify-header__hamburger.is-open .claudify-hamburger-icon,
.claudify-header__hamburger.is-open .claudify-hamburger-icon svg { display: none !important; }

.claudify-header__hamburger.is-open .claudify-close-icon,
.claudify-header__hamburger.is-open .claudify-close-icon svg { display: flex !important; }

/* ---- Tablet (750px–989px): full nav visible, tighter spacing ---- */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .bera-announcement {
    height: 44px;
  }

  .section-header {
    padding: 8px 12px;
  }

  .claudify-header {
    padding: 20px 24px;
  }

  .claudify-header__logo-img {
    width: 60px;
  }

  .claudify-nav__list {
    gap: 14px;
  }

  .claudify-nav__link,
  .claudify-nav__link--parent {
    font-size: 14px;
  }
}

/* ---- Mobile (<750px): logo left, icons right, hamburger in right ---- */
@media screen and (max-width: 749px) {
  .bera-announcement {
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    height: 44px;
    padding: 0 8px;
  }

  .bera-announcement__item {
    font-size: 12px;
    letter-spacing: 0.08em !important;
  }

  .bera-announcement__control {
    height: 28px;
    width: 28px;
  }

  .section-header {
    padding: 6px 10px;
  }

  .claudify-header {
    padding: 14px 16px;
    gap: 8px;
  }

  /* Hide left nav column entirely */
  .claudify-header__left {
    display: none;
  }

  /* Logo moves to left — center expands to fill the space */
  .claudify-header__center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .claudify-header__logo-img {
    width: 60px;
  }

  /* Icons stay right — 6px gap = 20px visual between icon edges (premium brand range) */
  .claudify-header__right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* Uniform touch target for all icon buttons on mobile */
  .claudify-icon-btn {
    width: 36px;
    height: 36px;
  }

  /* Show hamburger on mobile */
  .claudify-header__hamburger {
    display: inline-flex;
  }
}

@media screen and (max-width: 390px) {
  .bera-announcement__item {
    font-size: clamp(10px, 3vw, 12px);
    letter-spacing: 0 !important;
  }
}

.bera-search-dialog {
  background: transparent;
  border: 0;
  height: auto;
  inset: var(--bera-search-top, 216px) 0 0;
  margin: 0;
  max-height: none;
  max-width: none;
  padding: 0;
  position: fixed;
  width: 100%;
  z-index: 600;
}

.bera-search-dialog::backdrop {
  background: transparent;
  backdrop-filter: none;
}

.bera-search-toggle__search,
.bera-search-toggle__close {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.bera-search-toggle__close,
.claudify-icon-btn--search.is-open .bera-search-toggle__search {
  display: none;
}

.claudify-icon-btn--search.is-open .bera-search-toggle__close {
  display: inline-flex;
}

.bera-search-dialog__surface {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 48px rgba(26, 28, 24, 0.16);
  display: flex;
  flex-direction: column;
  height: var(--bera-search-height, 468px);
  margin: 0;
  max-height: var(--bera-search-available-height, calc(100dvh - var(--bera-search-top, 216px) - 32px));
  max-width: calc(100vw - 96px);
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: var(--bera-search-right, 48px);
  top: 16px;
  width: 400px;
}

.bera-search-form {
  display: block;
  flex: 0 0 auto;
  margin: 0;
}

.bera-search-dialog__input-section {
  padding: 24px 24px 16px;
}

.bera-search-dialog__input-field {
  align-items: center;
  background: #f2f2ef;
  border: 1px solid transparent;
  border-radius: 10px;
  display: flex;
  gap: 10px;
  min-height: 50px;
  padding: 11px 16px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.bera-search-dialog__input-field:focus-within {
  border-color: var(--bera-field-focus-color);
  box-shadow: var(--bera-field-focus-shadow);
}

.bera-search-dialog__search-icon {
  align-items: center;
  color: #8b8d87;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
}

.bera-search-dialog__search-icon svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 20px;
}

.bera-search-form .bera-search-dialog__input {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #1a1c18;
  flex: 1 1 auto;
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  min-height: 0;
  min-width: 0;
  outline: 0;
  padding: 0;
}

.bera-search-dialog__input::placeholder {
  color: #a2a39f;
  opacity: 1;
}

.bera-search-dialog__input::-webkit-search-cancel-button,
.bera-search-dialog__input::-webkit-search-decoration {
  appearance: none;
  display: none;
}

.bera-search-dialog__clear {
  align-items: center;
  appearance: none;
  background: rgba(26, 28, 24, 0.1);
  border: 0;
  border-radius: 50%;
  color: #1a1c18;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 20px;
  height: 20px;
  justify-content: center;
  padding: 0;
  width: 20px;
}

.bera-search-dialog__clear[hidden],
.bera-search-dialog__footer[hidden] {
  display: none;
}

.bera-search-dialog__clear svg {
  fill: none;
  height: 10px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.5;
  width: 10px;
}

.bera-search-dialog__results {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding-top: 8px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.bera-search-result {
  align-items: center;
  color: #1a1c18;
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  min-height: 76px;
  padding: 10px 24px;
  text-decoration: none;
  transition: background 100ms ease;
}

.bera-search-result:hover {
  background: #f8f8f6;
}

.bera-search-result:focus-visible {
  outline-offset: -3px;
}

.bera-search-result__thumb {
  align-items: center;
  aspect-ratio: 1;
  background: #e8e8e1;
  border-radius: 8px;
  display: flex;
  flex: 0 0 56px;
  justify-content: center;
  overflow: hidden;
  width: 56px;
}

.bera-search-result__thumb img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.bera-search-result__title {
  display: -webkit-box;
  flex: 1;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.bera-search-dialog__message {
  color: #666962;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  margin: 24px;
  text-align: center;
}

.bera-search-dialog__footer {
  border-top: 1px solid #e8e8e8;
  flex: 0 0 auto;
  min-height: 56px;
  padding: 14px 24px;
}

.bera-search-dialog__see-all {
  align-items: center;
  color: #1a1c18;
  display: inline-flex;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 400;
  gap: 8px;
  line-height: 1.8;
  text-decoration: none;
}

.bera-search-dialog__see-all svg {
  fill: none;
  height: 16px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  width: 16px;
}

.section-header.search-open {
  opacity: 1 !important;
  top: 0 !important;
  transform: none !important;
  transition: none !important;
  visibility: visible !important;
  z-index: 650 !important;
}

.section-header.search-open .claudify-header {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.bera-site-chrome.search-open {
  z-index: 650 !important;
}

.claudify-icon-btn--search.is-open {
  background: transparent !important;
}

@media screen and (min-width: 750px) {
  html.has-open-search {
    overflow: hidden;
    scrollbar-gutter: stable;
  }

  .bera-search-dialog__input-field {
    border: 0;
    min-height: 46px;
    padding: 12px 16px;
  }

  .bera-search-dialog__input-field:focus-within {
    box-shadow: none;
  }

  .bera-search-dialog__search-icon svg {
    height: 18px;
    width: 18px;
  }

  .bera-search-form .bera-search-dialog__input {
    font-size: 15px;
    line-height: 22px;
  }

  .bera-search-dialog__footer {
    line-height: 1.8;
    min-height: 0;
  }

  .bera-search-dialog__see-all svg {
    height: 13px;
    width: 13px;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .bera-search-dialog__surface {
    max-width: calc(100vw - 48px);
    width: 360px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .bera-search-dialog[open] .bera-search-dialog__surface {
    animation: bera-search-enter 180ms ease;
  }
}

@keyframes bera-search-enter {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@media screen and (max-width: 749px) {
  .bera-search-dialog {
    height: auto;
    inset: var(--bera-search-top, 144px) 0 0;
    position: fixed;
    width: 100%;
    z-index: 600;
  }

  .bera-search-dialog::backdrop {
    background: transparent;
    backdrop-filter: none;
  }

  .bera-search-dialog__surface {
    border-radius: 16px;
    height: min(468px, var(--bera-search-available-height, calc(100dvh - var(--bera-search-top, 144px) - 24px)));
    left: 12px;
    margin: 0;
    max-height: var(--bera-search-available-height, calc(100dvh - var(--bera-search-top, 144px) - 24px));
    max-width: none;
    padding: 0;
    position: absolute;
    right: 12px;
    top: 12px;
    width: auto;
  }

  .bera-search-dialog__input-section {
    flex: 0 0 87px;
    padding: 24px 24px 16px;
  }

  .bera-search-dialog__input-field {
    min-height: 47px;
    padding: 12px 16px;
  }

  .bera-search-dialog__search-icon svg {
    height: 18px;
    width: 18px;
  }

  .bera-search-dialog__results {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    padding-top: 8px;
  }

  .bera-search-result {
    min-height: 76px;
    padding: 10px 24px;
  }

  .bera-search-dialog__message {
    margin: 24px;
  }

  .bera-search-dialog__footer {
    min-height: 56px;
    padding: 14px 24px;
  }
}

/* Match Shopify: the announcement scrolls away while the header remains sticky. */
.home .bera-site-chrome {
  display: contents;
}

.bera-site-chrome .section-header {
  position: relative;
  top: auto;
}

.home .bera-site-chrome .section-header {
  position: sticky;
  top: 0;
}

/* ---- Sticky header shadow ---- */
.shopify-section-header-sticky .claudify-header {
  box-shadow: 0 2px 20px rgba(26, 28, 24, 0.07);
}

/* Dawn hides the sticky header by changing its `top` value
   (.shopify-section-header-hidden { top: calc(-1 * var(--header-height)) }).
   We align our animation to transition `top` — NOT `transform` — so there
   is no double-move and no hero layout shift on scroll. */
.shopify-section-header-sticky.animate {
  transition: top 0.3s cubic-bezier(0.3, 0, 0, 1);
}

.section-header.menu-open {
  top: 0 !important;
  z-index: 650 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
}

.section-header.menu-open .claudify-header {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* The drawer is a sibling of the site chrome. Raise the complete chrome while
   the menu is open so Safari cannot paint the drawer or its scrim over the
   announcement/header stacking context. */
.bera-site-chrome.menu-open {
  z-index: 650 !important;
}

/* ============================================================
   Mobile Menu — drops down below header as a separate card
   Matches Framer: white bg, radius 12px, padding 12px 24px
   ============================================================ */

.claudify-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none; /* container never blocks clicks — children handle it */
  visibility: hidden;
  isolation: isolate;
  touch-action: none;
}

.claudify-mobile-menu.is-open,
.claudify-mobile-menu.is-closing {
  visibility: visible;
  /* pointer-events stays none — only scrim + panel are clickable */
}

/* Scrim — only intercepts clicks when visible (no visual backdrop) */
.claudify-mobile-menu__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
  border: none;
  padding: 0;
  display: block;
  pointer-events: none;
  touch-action: none;
}

.claudify-mobile-menu.is-open .claudify-mobile-menu__overlay {
  pointer-events: auto;
}

/* Panel drops down from below the sticky header — top/max-height set by JS */
.claudify-mobile-menu__panel {
  position: absolute;
  top: 120px; /* fallback overridden by JS on open */
  left: 10px;
  right: 10px;
  width: auto;
  max-height: calc(100vh - 140px);
  background: #fff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, -16px, 0);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 0, 0, 1);
  box-shadow: 0 8px 32px rgba(26, 28, 24, 0.12);
  pointer-events: none;
  backface-visibility: hidden;
  contain: paint;
  will-change: opacity, transform;
}

.claudify-mobile-menu.is-open .claudify-mobile-menu__panel {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

/* Nav area — panel horizontal padding: 24px */
.claudify-mobile-menu__nav {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 4px 24px max(12px, calc(12px + env(safe-area-inset-bottom, 0px)));
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* Nav list */
.claudify-mobile-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Divider between each top-level item */
.claudify-mobile-nav__item {
  border-bottom: 1px solid rgb(232, 232, 232);
}

.claudify-mobile-nav__item:last-child {
  border-bottom: none;
}

/* Plain link — Framer: 15px, 130% lh, padding 16px 0 */
.claudify-mobile-nav__link {
  display: flex;
  align-items: center;
  padding: 16px 0;
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  color: rgb(26, 28, 24);
  text-decoration: none;
}

/* Expandable summary — same as link */
.claudify-mobile-nav__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  color: rgb(26, 28, 24);
  cursor: pointer;
  list-style: none;
}

.claudify-mobile-nav__summary::-webkit-details-marker,
.claudify-mobile-nav__summary::marker {
  display: none;
}

/* Filled arrow at the right edge — rotates up when the submenu is open */
.claudify-mobile-nav__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 12px;
  color: rgba(26, 28, 24, 0.55);
}

.claudify-mobile-nav__caret svg {
  display: block;
  width: 11px;
  height: 11px;
}

details[open] > .claudify-mobile-nav__summary .claudify-mobile-nav__caret {
  transform: rotate(180deg);
}

/* Subnav — Framer: 14px, 140% lh, padding 10px 0 */
.claudify-mobile-nav__subnav {
  list-style: none;
  padding: 0 0 6px 0;
  margin: 0;
  background: none;
}

.claudify-mobile-nav__subnav li {
  border-bottom: none;
}

.claudify-mobile-nav__subnav-link {
  display: block;
  padding: 10px 0 10px 10px;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(26, 28, 24, 0.78);
  text-decoration: none;
  transition: color 0.1s;
}

.claudify-mobile-nav__subnav-link:hover {
  color: rgb(26, 28, 24);
}

/* ============================================================
   Landscape phones — menu panel needs more height since
   100vh is only ~390px on a rotated phone
   ============================================================ */
@media screen and (max-width: 749px) and (orientation: landscape) {
  .claudify-mobile-menu__panel {
    /* JS measures the actual header bottom; these are no-script fallbacks. */
    max-height: calc(100vh - 80px);
    max-height: calc(100svh - 80px);
    overflow-y: auto !important; /* panel itself scrolls if nav overflows */
  }

  .claudify-mobile-menu__nav {
    /* Remove any implicit height cap on the inner nav */
    max-height: none !important;
  }
}