/*
 * Chariclo & Cherryclo — shared header sizing for mobile.
 *
 * The header markup is identical on every page, but the icons rendered larger away from
 * the homepage. Cause: the icons are text glyphs sized in rem, and the homepage scales
 * its root font size down on narrow screens (`clamp(14px, 2vw, 18px)`) while the other
 * pages leave it at the browser default 16px. Same rule, two different results — the
 * cart icon looked right only because it is an SVG with fixed pixel dimensions.
 *
 * SAFETY, two deliberate choices:
 *   1. Everything sits inside `@media (max-width: 768px)`, the homepage's own mobile
 *      breakpoint. Desktop is untouched, so the homepage's fluid type still scales the
 *      icons up on a wide screen as it always did.
 *   2. This file is NOT linked on index.html. The homepage is the reference; the values
 *      below are simply what it already renders, so linking it there would be a no-op
 *      at best and a source of drift at worst.
 *
 * CSS only — no markup, no JavaScript. To remove: delete the <link> from the page head.
 */

@media (max-width: 768px) {

  nav,
  nav.scrolled { padding: 12px 16px; }

  .nav-logo-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
  }

  .nav-icons { gap: 20px; }

  /* 14px is the homepage's rendered size at this width: its root drops to 14px and the
     buttons are set in 1rem. */
  .nav-icons button {
    font-size: 14px;
    padding: 4px;
  }

  .hamburger-btn {
    font-size: 19.5px;
    padding: 4px 8px;
    gap: 5px;
    width: 32px;
  }

  .hamburger-btn span {
    width: 24px;
    height: 2px;
    border-radius: 1px;
  }

  .wishlist-count,
  .cart-count {
    font-size: 7px;
    width: 15px;
    height: 15px;
  }
}