/* The header's cart button, compact.
   ==========================================================================
   The prototype styled this as a .cta-btn — the same wide pill as Sales
   Request, reading "Cart ( 1 )". Its own README records that the site's nav
   already overruns its box by about 70px at 1440px, and that is what the pill
   collided with: it sat on top of Videos, the last nav item.

   So the label goes and the count becomes a badge on the icon. That takes the
   control from roughly 110px to 34px, which is less than the nav was already
   overrunning by, so the collision cannot come back at this width.

   Tokens are read with a fallback because this stylesheet loads alongside the
   site's own CSS — a different page stylesheet on every page — and the custom
   properties come from whichever of those got there first.

   Shared with the Odoo site, which serves this file from hbe_product. The
   only difference is the note on the breakpoint below: there the cart is in
   every page's header, here it is in the four shop screens' headers. */

.cart-btn.cart-mini {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* A fixed square, and flex:none so a tight header shrinks the nav rather
     than squashing the button into an ellipse. */
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  margin: 0 6px 0 2px;
  /* On the utility bar's blue, not the header's cream: the button is drawn
     in the bar's own foreground colour the way Contact Us beside it is,
     rather than as a white chip stuck onto the blue. */
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  text-decoration: none;
  transition: border-color .12s, background .12s;
}

.cart-btn.cart-mini:hover,
.cart-btn.cart-mini:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.cart-btn.cart-mini svg {
  width: 18px;
  height: 18px;
  /* The pill's rules sized the icon against a text label that is gone. */
  margin: 0;
}

/* The count. A circle on the corner of the icon rather than a figure beside
   it: it has to be readable at a glance without taking a word's worth of
   width. min-width plus padding so 1 stays round and 12 stays legible. */
.cart-btn.cart-mini .cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  /* The site's own blue would disappear into the bar it sits on. Magenta is
     the site's other brand colour and the one it already uses on this bar
     for the "Us" in Contact Us. */
  background: var(--magenta, #eb008b);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
  letter-spacing: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  /* No ring: on the utility bar there is no pale ground to separate it
     from, and a cream ring would read as a sticker on the blue. */
}

/* An empty cart gets no badge. The page is served with 0 in it and shop.js
   paints the real figure on load, so this is also what stops a 0 flashing
   before the cart has been read. */
.cart-btn.cart-mini[data-count="0"] .cart-count,
.cart-btn.cart-mini:not([data-count]) .cart-count {
  display: none;
}

/* One nav rule, for the widest windows only.
   ==========================================================================
   The page is capped at --maxw (1400px), so above about 1440px a wider
   window buys the header nothing — the wrap stops growing. The site's nav
   keeps its loosest spacing until 1680px, which is fine for ten items in
   that box and one too many for eleven: at 1700px the last item runs into
   the Sales Request button.

   So the 1680px step is taken from 1681px up instead. It is the site's own
   next value, not a new one, and it only ever applies where extra window
   width is already doing nothing for the row.

   Unscoped, because this stylesheet is on every page now and so is the Shop
   item that needs the room. */
@media (min-width: 1681px) {
  /* header.site is a longer selector than the site's own `nav.main > a`,
     and it has to be: every page keeps its CSS in a <style> block in the
     body, which lands after this file's <link> in the head, so an
     equal-specificity rule here would lose on source order alone. */
  header.site nav.main > a,
  header.site nav.main .has-mega > a {
    padding: 0 12px;
  }
}

/* Nothing else here touches the nav.
   ==========================================================================
   Earlier versions did, in two heavier ways, and both were wrong.

   The first hid the nav below 1360px and handed it to the hamburger, so
   these four pages dropped their menus at widths where every other page on
   the site still showed them. The second tried to buy the space back by
   stepping the nav's own size ladder down harder, which is re-tuning a
   layout this file does not own: below 1520px the site runs the nav as one
   line of flex:none, nowrap items sized by a ladder written for exactly ten
   of them, so extra width does not compress, it spills out of the nav's box
   and lands on whatever is beside it.

   Neither is needed now. The cart is in the utility bar, a row up, and the
   nav carries its ten items plus Shop with the site's own ladder untouched. */

@media (max-width: 860px) {
  .cart-btn.cart-mini {
    width: 30px;
    height: 30px;
    margin: 0 6px 0 2px;
  }
  .cart-btn.cart-mini svg { width: 16px; height: 16px; }
  .cart-btn.cart-mini .cart-count {
    min-width: 15px;
    height: 15px;
    line-height: 15px;
    font-size: 9px;
    top: -4px;
    right: -4px;
  }
}