/*
 * Mashin Irani — Mobile Header Spacing Polish (CR-003).
 * UI polish only. Every rule is inside a mobile media query, so desktop is pixel-identical.
 * Header height, style, colours, typography, icon/svg sizes and the logo are all preserved; only the
 * tap-area (button box) size and the spacing between elements change. Uses the global --mi-* tokens.
 */

/*
 * Remove the stray global button border ( [type=button],[type=submit],button { border:1px solid #c36 } )
 * that leaks onto the <button> icons — the hamburger, and the search button in the tablet range — so
 * they match the borderless <a> icons (cart). Scoped to <=1080px, where those buttons are visible on
 * mobile; the desktop header (> 1080px) is left exactly as-is.
 */
@media (max-width: 1080px){
  .site-header .hdr .utils .icon-btn,
  .site-header .hdr .cta-hdr .btn{ border: 0; }
}

@media (max-width: 640px){
  /* Breathing room around the logo and between the icon cluster (premium-app spacing). */
  .site-header .hdr{ gap: var(--mi-space-4, 16px); }
  .site-header .hdr .utils{ gap: var(--mi-space-3, 12px); }

  /* Touch targets >= 48x48. Only the button box grows; the icon/svg sizes are unchanged. */
  .site-header .hdr .icon-btn{ width: 48px; height: 48px; }
  .site-header .hdr .cta-hdr .btn{ width: 48px; height: 48px; }
  .site-header .hdr .utils .avatar{ width: 48px; height: 48px; }

  /*
   * On phones the wallet pill is a non-interactive icon-only span (its balance is already hidden at
   * <=640), so it adds crowding without value and, with proper 48px targets, would overflow the
   * densest (logged-in) header at 320px. Hide it here; the wallet balance stays available in the
   * account dashboard and the mobile drawer.
   */
  .site-header .hdr .utils .wallet-pill{ display: none; }
}

/*
 * CR-005 — Mobile header: fill the full width with even, edge-to-edge spacing, and move the
 * hamburger to sit right after the logo (first item on the right).
 *
 * Root cause of the old center-bunching: .container.hdr is a flex CHILD of the flex .site-header,
 * so it shrink-wrapped to its content (~264px) and .container's margin-inline:auto centred it —
 * leaving a dead ~55px gutter on each side. Make it grow to fill, drop the auto-centring, and
 * space-between its items so they reach both edges.
 */
@media (max-width: 1080px){
  .site-header .hdr{
    flex: 1 1 auto;
    max-width: none;
    margin-inline: 0;
    justify-content: space-between;
  }

  /*
   * The theme pushes .utils to the far edge with margin-inline-start:auto (its desktop grouping).
   * With the nav hidden on mobile that leaves a big hole, so neutralise it — space-between then
   * spreads the logo / gift / utils groups evenly across the full width.
   */
  .site-header .hdr .utils{ margin-inline-start: 0; margin-inline-end: 0; }

  /*
   * The account now lives inside the drawer (prominent, at the top), so remove it from the header.
   * The .logged-in wrapper carries an inline style="display:flex", which only !important can beat.
   */
  .site-header .hdr .utils .logged-in,
  .site-header .hdr .utils .login-link{ display: none !important; }
}

@media (max-width: 640px){
  /*
   * Flatten .utils so its children join the header's own flex row, then order everyone so the RTL
   * sequence is  logo → hamburger → gift → cart  (order ascending = right→left in RTL). At ≤640 the
   * search button, its finder dropdown and the account are all hidden, so only cart + hamburger
   * remain from .utils — no finder-positioning side effects.
   */
  .site-header .hdr .utils{ display: contents; }
  .site-header .hdr .brand-lockup{ order: 1; }
  .site-header .hdr .menu-toggle { order: 2; }
  .site-header .hdr .cta-hdr     { order: 3; }
  .site-header .hdr .utils > a.icon-btn{ order: 4; } /* cart */
}