/* ============================================================================
   Lucky Cat brand menu
   ----------------------------------------------------------------------------
   Shared by every page. Hovering the Lucky Cat lockup drops the other products
   plus the build-to-order route.

   The lockup stays a real link to the home page; the chevron beside it is a
   separate button. That way a mouse gets hover, a keyboard gets focus, and a
   finger gets a tap target that doesn't navigate away before the menu opens.
   ========================================================================= */

.brandnav { position: relative; display: flex; align-items: center; gap: 2px; }

.brandnav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  /* flex-shrink would squash it inside a tight header (PitchPilot's does). */
  flex: 0 0 auto;
  width: 30px; height: 30px; padding: 0; margin-left: 2px;
  position: relative;
  background: transparent; border: 0; border-radius: 7px; cursor: pointer;
  color: currentColor; opacity: .55;
  transition: opacity .15s ease, background-color .15s ease;
}
/* A finger needs 44px; the chevron should still read as 30. The hit area grows
   past the drawn button instead of the button growing. */
@media (hover: none) {
  .brandnav-toggle::after { content: ""; position: absolute; inset: -7px; }
}
.brandnav-toggle:hover { opacity: 1; background: rgba(0,0,0,.06); }
.brandnav-toggle svg { width: 13px; height: 13px; transition: rotate .2s ease; }
.brandnav[data-open="true"] .brandnav-toggle svg { rotate: 180deg; }
@media (prefers-reduced-motion: reduce) { .brandnav-toggle svg { transition: none; } }

.brandnav-menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 200;
  min-width: 270px; padding: 8px;
  background: #fff; color: #1a1206;
  border: 1px solid #e4dcd2; border-radius: 14px;
  box-shadow: 0 22px 44px -20px rgba(26,18,6,.4), 0 2px 6px rgba(26,18,6,.06);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.brandnav:hover .brandnav-menu,
.brandnav:focus-within .brandnav-menu,
.brandnav[data-open="true"] .brandnav-menu {
  opacity: 1; visibility: visible; transform: none;
}
/* Touch has no hover: only the explicit toggle opens it there, so a tap on the
   lockup still goes to the home page. */
@media (hover: none) {
  .brandnav:hover .brandnav-menu { opacity: 0; visibility: hidden; transform: translateY(-6px); }
  .brandnav[data-open="true"] .brandnav-menu { opacity: 1; visibility: visible; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .brandnav-menu { transition: none; } }

.brandnav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 9px; min-height: 44px;
  color: #1a1206; text-decoration: none;
  transition: background-color .13s ease;
}
.brandnav-item:hover { background: #f4f1ec; }
.brandnav-item[aria-current="page"] { background: #f4f1ec; }
.brandnav-item img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.brandnav-mark {
  width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
  display: grid; place-items: center;
  font-weight: 800; font-size: 12px; letter-spacing: -0.04em; color: #fff;
}
.brandnav-name { font-weight: 700; font-size: 0.92rem; line-height: 1.15; letter-spacing: -0.015em; }
.brandnav-for  { display: block; font-weight: 400; font-size: 0.78rem; color: #7a6a52; margin-top: 2px; letter-spacing: 0; }
.brandnav-sep  { height: 1px; background: #e4dcd2; margin: 7px 6px; border: 0; }
.brandnav-item.is-build .brandnav-mark { background: #f4f1ec; color: #7a6a52; border: 1px dashed #cfc4b4; }
/* Holds the column for a product whose name is its only mark. */
.brandnav-mark.is-empty { background: none; }

/* Each product's name in its own face, matching the cards. */
.bn-ownly, .bn-tillr { font-family: Nunito, system-ui, sans-serif; font-weight: 900; }
/* Nock's wordmark spec: Archivo 700, and tracking opens to 0 below 24px. */
.bn-nock  { font-family: Archivo, system-ui, sans-serif; font-weight: 700; letter-spacing: 0; }
.bn-pp    { font-family: Poppins, system-ui, sans-serif; font-weight: 700; }