/* Luxe Cheesecake — one phone header for every page.
   Loaded after the page stylesheet on index, order and checkout. Below 768px the
   header is: logo (16px in) · Back link on inner pages · then, right-aligned and
   always in this order, language (only where the page translates) · a round
   cart button with a count badge · the hamburger (homepage only). Every button
   is the same 40px disc. Desktop headers are untouched. */

/* The phone menu's language row exists on every translating page for parity, but
   inner pages show the language pill in the header at every width, so the row never
   appears there. (The homepage hides its own row in its stylesheet.) */
.site-header--inner .nav-language-item { display: none !important; }

@media (max-width: 768px) {
  header { padding: 0; }
  header .navbar {
    display: flex; align-items: center; justify-content: flex-start; gap: 0.6rem;
    padding: 0.55rem 1rem; width: 100%;
  }
  .logo-container { justify-self: auto; }
  .logo-container img { height: 44px; }

  /* the Back link on inner pages sits right after the logo */
  .nav-back-link { font-family: var(--font-ui); font-size: 0.95rem; color: var(--text-muted); text-decoration: none; padding: 0.4rem 0; white-space: nowrap; }
  .nav-back-link:hover { color: var(--accent); }

  /* the right cluster */
  .nav-icons { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; justify-self: auto; margin-top: 0; }
  .nav-icons .icon.search,
  .nav-icons .icon-link[aria-label="Instagram"],
  .nav-icons .icon-link[aria-label="WhatsApp"] { display: none; }
  .opening-hours-panel { display: none !important; }

  /* one disc for cart and menu */
  .nav-icons .icon-link[aria-label="Buy"],
  #cartButton,
  #checkoutCartButton,
  .menu-toggle {
    position: relative; width: 40px; height: 40px; padding: 0; margin: 0; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; gap: 0;
    border: 1px solid var(--accent-border-soft); border-radius: 50%; background: transparent; color: var(--text-light);
    font-size: 0; line-height: 0;
  }
  .nav-icons .icon-link[aria-label="Buy"] svg, #cartButton svg, #checkoutCartButton svg { width: 20px; height: 20px; stroke-width: 2; }
  .nav-icons .icon-link[aria-label="Buy"]:hover, #cartButton:hover, #checkoutCartButton:hover { border-color: var(--accent); color: var(--accent); }
  .cart-indicator {
    position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
    border-radius: 9px; background: var(--accent); color: var(--primary-bg);
    font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600; line-height: 18px; text-align: center;
  }
  .cart-indicator.is-empty { display: none; }

  /* language on pages that translate: a quiet text button, same height as the discs */
  .nav-icons > .language-switcher { display: flex; }
  .nav-icons > .language-switcher select { height: 40px; padding: 0 1.7rem 0 2.2rem; font-size: 0.85rem; }
  .nav-icons > .language-switcher::before { left: 0.85rem; width: 15px; height: 15px; }
  .nav-icons > .language-switcher::after { right: 0.7rem; }

  /* homepage: the language select sits in the header, so the menu sheet does not repeat it */
  .nav-language-item { display: none !important; }

  /* hamburger (homepage): the three bars inside the disc */
  .menu-toggle { flex-direction: column; gap: 5px; cursor: pointer; }
  .menu-toggle span { display: block; width: 16px; height: 2px; margin: 0; border-radius: 1px; background: var(--text-light); transition: transform 0.25s ease, opacity 0.2s ease; }
  .menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle.open span:nth-child(2) { opacity: 0; }
  .menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* inner pages: the nav is just the Back link, laid out inline */
  .site-header--inner nav { position: static; width: auto; flex: 0 0 auto; grid-column: auto; justify-self: auto; }
  .site-header--inner nav ul { display: flex !important; position: static; flex-direction: row; justify-content: flex-start; align-items: center; gap: 0; margin: 0; background: none; box-shadow: none; padding: 0; width: auto; max-width: none; border-radius: 0; font-size: 1rem; transform: none; }
  .site-header--inner nav ul li { width: auto; text-align: left; margin: 0; }
  .site-header--inner nav ul .nav-language-item { display: none !important; }
  .site-header--inner .menu-toggle { display: none !important; }
}

/* Inner pages (order, checkout): the Back link sits left in the nav column on every width
   and is a full 44px tap target. */
.site-header--inner nav ul { justify-self: start; }
.nav-back-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.5rem 0 0; font-family: var(--font-ui); font-size: 1rem; color: var(--text-light); }
.nav-back-link:hover { color: var(--accent); }