/**
 * Mobile header cart link.
 *
 * On mobile the desktop cart (.site-tools) is display:none, so there is no way
 * to reach the cart. This adds a cart icon next to the hamburger (.menu-toggle),
 * shown only below the large-tablet breakpoint (1024px) where the hamburger is
 * visible and .site-tools is hidden.
 *
 * The icon is a CSS mask of a stripped-down cart SVG (data URI) painted with
 * `background-color: currentColor`, so it inherits the header colour and flips
 * white -> black on `body.isBlack`, exactly like the hamburger does.
 *
 * Markup is emitted by ThemeStuff\Storefront\Header::addMobileCartLink().
 */

.mobile-cart-link {
  display: flex;
  align-items: center;
  justify-content: center;
  order: 1;          /* sit just left of the hamburger (.main-navigation, order 1-2) */
  margin: -3px 0 -3px auto; /* see notes below */
  width: 24px;
  height: 24px;
  padding: 0;
  color: #fff;
  background-color: currentColor;

  /*
   * margin-left: auto  -> keeps the icon glued to the hamburger on the right.
   *   The logo only has flex-grow:1 below 600px; from 600px it is flex-grow:0,
   *   so without this the wrapper's `justify-content: space-between` would
   *   space three items out and park the cart in the centre on tablet widths.
   *
   * margin-top/bottom: -3px  -> the header is transparent and the homepage
   *   pulls .site-content up by a fixed -57px to sit behind it; that value is
   *   the old header height (logo/hamburger ~18px + 19px*2 padding + 1px). A
   *   24px icon would make the header ~8px taller and reveal a white strip at
   *   the very top. The negative margins shrink the icon's margin-box back to
   *   18px (matching the logo/hamburger) so header height is unchanged, while
   *   the icon still renders at its full 24px.
   */
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M8%2016L16.7201%2015.2733C19.4486%2015.046%2020.0611%2014.45%2020.3635%2011.7289L21%206%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%206H22%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2220%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2220%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2020L15%2020%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M2%202H2.966C3.91068%202%204.73414%202.62459%204.96326%203.51493L7.93852%2015.0765C8.08887%2015.6608%207.9602%2016.2797%207.58824%2016.7616L6.63213%2018%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M8%2016L16.7201%2015.2733C19.4486%2015.046%2020.0611%2014.45%2020.3635%2011.7289L21%206%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%206H22%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2220%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2220%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2020L15%2020%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M2%202H2.966C3.91068%202%204.73414%202.62459%204.96326%203.51493L7.93852%2015.0765C8.08887%2015.6608%207.9602%2016.2797%207.58824%2016.7616L6.63213%2018%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

.mobile-cart-link:hover {
  opacity: .8;
}

/* small-tablet+ (>=600px): wrapper flex-gap becomes `normal` (0), so add our
   own spacing between the cart icon and the hamburger. */
@media (min-width: 600px) {
  .mobile-cart-link {
    margin-right: 24px;
  }
}

/* large-tablet+ (>=1024px): the full cart returns in .site-tools, hide this. */
@media (min-width: 1024px) {
  .mobile-cart-link {
    display: none;
  }
}

/* Match the hamburger's colour flip on dark-on-light (isBlack) pages. */
body.isBlack .mobile-cart-link {
  color: #000;
}