/* ===================================================================
   NAVBAR
   -------------------------------------------------------------------
   Owns the visual design of the site header. Loaded after the brand
   layer so it settles conflicts with the older component CSS without
   needing !important on every declaration.

   The mobile slide-out panel behaviour still lives in
   mobile-optimization.css - this file only restyles it.
   =================================================================== */

:root {
  --nav-bg: #4a2231;
  --nav-bg-scrolled: #3f1d2b;
  --nav-ink: #f7e9ee;
  --nav-ink-dim: #d9bcc7;
  --nav-accent: #e8829f;
  --nav-height: 84px;
  --nav-height-scrolled: 68px;
  --nav-border: 1px;
  /* Total space the fixed bar occupies. Everything that has to clear the
     navbar - body padding, the mobile panel, sticky sidebars - derives from
     this, so the header can be resized in one place without leaving a gap. */
  --nav-total: calc(var(--nav-height) + var(--nav-border));
  /* The same figure once the bar has condensed. Anything pinned directly
     against the header needs this too, or it stays where the full-height
     header used to end and a strip of the page shows through the gap. */
  --nav-total-scrolled: calc(var(--nav-height-scrolled) + var(--nav-border));
}

/* -------------------------------------------------------------------
   Fixed-navbar offset
   The older CSS hardcoded 90px of body padding against a navbar that is
   now 85px, which left a white strip under the header on every page.
   ------------------------------------------------------------------- */
body {
  padding-top: var(--nav-total) !important;
}

/* Sticky elements that must sit below the fixed bar */
.image-gallery-container.sticky-top,
.filters-sidebar,
.jp-filters-sticky,
.cart-summary-sticky {
  top: calc(var(--nav-total) + 1rem) !important;
}

/* -------------------------------------------------------------------
   Bar
   ------------------------------------------------------------------- */
.navbar {
  background-color: var(--nav-bg) !important;
  border-bottom: 1px solid rgba(232, 130, 159, 0.22);
  box-shadow: none;
  padding-top: 0;
  padding-bottom: 0;
  min-height: var(--nav-height);
  transition: min-height 0.25s ease, background-color 0.25s ease,
              box-shadow 0.25s ease;
}

/* Condense and lift once the page scrolls */
.navbar.is-scrolled {
  min-height: var(--nav-height-scrolled);
  background-color: var(--nav-bg-scrolled) !important;
  box-shadow: 0 6px 24px rgba(74, 34, 49, 0.28);
}

.navbar > .container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: inherit;
}

/* -------------------------------------------------------------------
   Brand
   ------------------------------------------------------------------- */
.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.35rem 0;
  margin-right: 0.5rem;
  border: 0;
  color: var(--nav-ink) !important;
  letter-spacing: normal;
  transition: color 0.2s ease;
}

.navbar-brand:hover {
  color: #ffffff !important;
  transform: none;             /* the old rule slid the whole brand sideways */
}

.navbar-brand img {
  height: 46px;
  width: auto;
  filter: none;
  transition: transform 0.25s ease;
}

.navbar-brand:hover img {
  transform: scale(1.04);      /* replaces the old -5deg rotate */
}

.navbar.is-scrolled .navbar-brand img {
  height: 38px;
}

.navbar-brand-text {
  /* Shown at every width. It used to be hidden below 768px, which left the
     phone header as a bare icon between a cart and a hamburger - no shop
     name anywhere above the fold. There is room for it: the cart and
     toggler take ~110px of a 390px screen. */
  display: inline;
  line-height: 1;
  /* Sized so "Stamp and Bake" fits whole on a 390px screen next to the cart
     and the hamburger; narrower phones truncate with an ellipsis rather than
     wrapping the header onto a second row. */
  font-size: 0.98rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}

@media (min-width: 768px) {
  .navbar-brand-text {
    font-size: inherit;
    max-width: none;
  }
}

/* -------------------------------------------------------------------
   Links
   ------------------------------------------------------------------- */
.navbar .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  position: relative;
  padding: 0.55rem 0.9rem !important;
  margin: 0 0.12rem;
  border-radius: 999px;
  color: var(--nav-ink) !important;
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
  background: rgba(232, 130, 159, 0.16);
  color: #ffffff !important;
}

/* Current section - the old navbar had no active state at all */
.navbar .nav-link.is-active {
  color: #ffffff !important;
  background: rgba(232, 130, 159, 0.2);
}

.navbar .nav-link.is-active::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  border-radius: 3px;
  background: var(--nav-accent);
}

/* Kill the old sliding underline - the pill and marker replace it */
.navbar .nav-link:not(.dropdown-toggle)::after {
  display: none;
}

/* Caret */
.navbar .dropdown-toggle::after {
  margin-left: 0.15rem;
  border-top-width: 0.3em;
  border-right-width: 0.3em;
  border-left-width: 0.3em;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.navbar .nav-item.dropdown:hover .dropdown-toggle::after {
  transform: translateY(1px);
}

/* -------------------------------------------------------------------
   Right-hand actions
   ------------------------------------------------------------------- */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-account {
  border: 1px solid rgba(247, 233, 238, 0.28);
}

.nav-account:hover {
  border-color: rgba(232, 130, 159, 0.6);
}

/* -------------------------------------------------------------------
   Cart button + count badge
   The badge is what the add-to-cart JS targets via `.cart-count`.
   ------------------------------------------------------------------- */
.nav-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  background: var(--nav-accent);
  color: #4a2231;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.nav-cart:hover,
.nav-cart:focus-visible {
  background: #f2a0b7;
  color: #4a2231;
  transform: translateY(-1px);
}

.nav-cart.is-active {
  box-shadow: 0 0 0 3px rgba(232, 130, 159, 0.3);
}

.nav-cart i {
  font-size: 1.05rem;
}

.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #4a2231;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cart-count.is-empty {
  display: none;
}

/* Mobile cart sits next to the burger. It measured 41x43, just under the
   44px minimum touch target - and it is the one control on the phone header
   that takes money, so it is worth the two pixels. */
.nav-cart--mobile {
  margin-left: auto;
  margin-right: 0.5rem;
  padding: 0.5rem 0.75rem;
  min-width: 44px;
  min-height: 44px;
}

.nav-cart--mobile .cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 1.15rem;
  height: 1.15rem;
  font-size: 0.7rem;
  border: 2px solid var(--nav-bg);
}

/* -------------------------------------------------------------------
   Dropdowns
   ------------------------------------------------------------------- */
.navbar .dropdown-menu {
  border: 1px solid #f3d9e2 !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 40px rgba(74, 34, 49, 0.18) !important;
  padding: 0.4rem !important;
  min-width: 232px;
  overflow: hidden;
}

.navbar .dropdown-item {
  border-radius: 9px !important;
  padding: 0.62rem 0.8rem !important;
  font-weight: 500;
  color: #5e3040 !important;
  gap: 0.6rem;
}

.navbar .dropdown-item::before {
  width: 3px;
  border-radius: 0 3px 3px 0;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus-visible {
  background: #fdf4f7 !important;
  color: #4a2231 !important;
  transform: none;             /* the old rule nudged items sideways on hover */
  box-shadow: none;
}

.navbar .dropdown-item i {
  color: var(--nav-accent);
  font-size: 0.95rem;
  margin-right: 0;
}

.navbar .dropdown-item:hover i {
  transform: none;
}

.navbar .dropdown-divider {
  margin: 0.35rem 0.4rem !important;
  border-color: #f3d9e2 !important;
  opacity: 1;
}

/* -------------------------------------------------------------------
   Toggler
   ------------------------------------------------------------------- */
.navbar-toggler {
  border: 1px solid rgba(247, 233, 238, 0.35);
  border-radius: 12px;
  background: rgba(232, 130, 159, 0.12);
}

.navbar-toggler:hover {
  background: rgba(232, 130, 159, 0.24);
  border-color: rgba(232, 130, 159, 0.55);
}

.navbar-toggler:focus-visible {
  outline: 3px solid var(--nav-accent);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------
   Mobile panel restyle - the slide-out mechanics stay in
   mobile-optimization.css, this only updates its look.
   ------------------------------------------------------------------- */
/* -------------------------------------------------------------------
   Mobile drawer: backdrop and scroll lock
   -------------------------------------------------------------------
   base.html already adds .navbar-open to <body> when the panel opens, and
   listens for a click outside it - but nothing was ever styled for that
   class, so the drawer slid out over a fully lit, still-scrollable page.
   Two things were missing: something to dim the page behind, and something
   to stop that page scrolling under the drawer.
   ------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  body.navbar-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(46, 20, 30, 0.55);
    /* Under the panel (9998) and the header, over everything else. */
    z-index: 9990;
    opacity: 0;
    animation: navBackdropIn 0.2s ease forwards;
    /* The click still reaches document, which is where base.html closes
       the menu from - the backdrop only needs to be visible. */
  }

  @keyframes navBackdropIn {
    to { opacity: 1; }
  }

  /* The page behind must not scroll while the drawer is open. The scroll
     position is preserved by base.html, which pins the body and puts it
     back afterwards - without that, closing the menu returns you to the
     top of the page. */
  body.navbar-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }

  /* The floating currency pill sits at z-index 9999, which put it on top of
     the open drawer. Out of the way while the menu is open. */
  body.navbar-open .currency-selector-fixed {
    opacity: 0;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.navbar-open::before { animation: none; opacity: 1; }
}

@media (max-width: 991.98px) {
  /* Keep the header on one line. Bootstrap's navbar container wraps by
     default, so restoring the brand name pushed the hamburger onto a second
     row - a two-storey header sitting over the hero. Nothing here is
     optional at phone width, so nothing is allowed to wrap; the brand name
     truncates instead, which needs min-width:0 on the flex items to work. */
  .navbar > .container {
    flex-wrap: nowrap;
  }

  .navbar-brand {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
  }

  .navbar-brand img {
    flex: 0 0 auto;
  }

  /* Redefining the variable keeps the navbar, the body offset and the
     slide-out panel in step at this breakpoint. The scrolled height is
     redefined for the same reason: it was written straight into the rule
     below, so --nav-total-scrolled reported the desktop 69px here instead of
     65px, and anything deriving from it sat 4px too low. */
  :root {
    --nav-height: 72px;
    --nav-height-scrolled: 64px;
  }

  .navbar {
    min-height: var(--nav-height);
  }

  .navbar.is-scrolled {
    min-height: var(--nav-height-scrolled);
  }

  /* The panel was pinned to a hardcoded 100px, which left it floating
     below the header once the navbar shrank. */
  .navbar-collapse {
    top: var(--nav-total) !important;
    height: calc(100vh - var(--nav-total)) !important;
    background: var(--nav-bg) !important;
    border-left: 1px solid rgba(232, 130, 159, 0.35) !important;
    box-shadow: -12px 0 32px rgba(74, 34, 49, 0.35) !important;
  }

  .navbar .nav-link {
    border-radius: 0;
    margin: 0;
    font-size: 1rem;
  }

  .navbar .nav-link.is-active {
    background: rgba(232, 130, 159, 0.18);
    border-left: 3px solid var(--nav-accent);
  }

  .navbar .nav-link.is-active::before {
    display: none;
  }

  /* The old markup used .d-flex here, which mobile-optimization.css targets
     for layout. This block restores that behaviour for .nav-actions. */
  .nav-actions {
    display: block;
    width: 100%;
    padding: 0;
  }

  .nav-actions .navbar-nav {
    width: 100%;
    padding: 0 !important;
    align-items: stretch;
  }

  .nav-actions .nav-item {
    width: 100%;
  }

  /* The account pill is a desktop treatment - in the stacked mobile list it
     reads as a stray button, so flatten it back to a plain row. */
  .nav-account {
    border: 0;
    border-radius: 0;
    width: 100%;
    justify-content: flex-start;
  }

  .navbar .dropdown-menu {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: rgba(0, 0, 0, 0.14) !important;
  }

  .navbar .dropdown-item {
    color: var(--nav-ink) !important;
    border-radius: 0 !important;
  }

  .navbar .dropdown-item:hover {
    background: rgba(232, 130, 159, 0.2) !important;
    color: #ffffff !important;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .navbar,
  .navbar-brand img,
  .nav-cart,
  .navbar .nav-link {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Nested submenu in the Shop dropdown

   Bootstrap 5 dropped multi-level dropdowns, so the "Cookie Cutter
   Collections" flyout is hand-rolled. Three existing rules fight it and all
   three have to be beaten explicitly:

     1. `.navbar .dropdown-menu { overflow: hidden }` (above) clips any child
        positioned at left:100%, so the flyout is invisible without an
        override on the menu that actually contains a submenu.
     2. base-layout.css sets `display: none !important` on every
        `.dropdown-menu` at >=992px. The flyout IS a .dropdown-menu, so an
        un-!important rule here silently loses and the submenu never opens.
     3. base-layout.css opens menus with `.nav-item.dropdown:hover
        .dropdown-menu` - a DESCENDANT selector, so hovering "Shop" also
        forces the nested flyout open, stacked inline inside the parent.

   Hence the !important and the deliberately long selectors below.
   --------------------------------------------------------------------------- */
.navbar .dropdown-submenu {
  position: relative;
}

/* (1) let the flyout escape the parent menu's rounded clip */
#productsDropdown + .dropdown-menu {
  overflow: visible !important;
}

.navbar .dropdown-item-has-submenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .submenu-caret {
  margin-left: auto;
  font-size: 0.75rem;
  opacity: 0.55;
}

@media (min-width: 992px) {
  /* (2)+(3) keep it shut even while the parent menu is open... */
  .navbar .nav-item.dropdown .dropdown-submenu > .submenu {
    display: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 100%;
    margin-top: -0.4rem;
    margin-left: 0.15rem;
  }

  /* ...and open it only for the submenu actually being pointed at */
  .navbar .nav-item.dropdown .dropdown-submenu:hover > .submenu,
  .navbar .nav-item.dropdown .dropdown-submenu:focus-within > .submenu {
    display: block !important;
  }
}

@media (max-width: 991.98px) {
  /* The mobile navbar is a stacked panel, so a flyout has nowhere to go:
     render the ranges inline and indent them under their parent instead. */
  .navbar .nav-item.dropdown .dropdown-submenu > .submenu {
    display: block !important;
    position: static !important;
    float: none;
    margin: 0.15rem 0 0.35rem 0.85rem !important;
    padding-left: 0.5rem !important;
    border: 0 !important;
    border-left: 2px solid #f3d9e2 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    min-width: 0;
  }

  .navbar .submenu-caret {
    transform: rotate(90deg);
  }
}