/**
 * Small fixes on top of the compiled css/style.css (not built from scss).
 */

/* Commerce 3 loads commerce_cart.theme.css after style.css, so its
 * `.cart-block--contents { background: white; color: black; width: 225px }`
 * won over the theme (same specificity) and the cart dropdown showed white
 * text on white. Higher specificity restores the theme colours. */
.cart--cart-block .cart-block--contents {
  color: white;
  background: #305B54;
}

/* Cart pill only as wide as icon + "x item(s)" (commerce_cart.layout.css
 * makes the link display: block). The block shrink-wraps the pill and is
 * the anchor for the dropdown, which lines up with the pill's right edge. */
.cart--cart-block {
  position: relative;
  display: inline-block;
}
.cart--cart-block .cart-block--summary a.cart-block--link__expand {
  display: inline-block;
}
.cart--cart-block .cart-block--contents,
.cart--cart-block .cart-block--contents.is-outside-horizontal {
  left: auto;
  right: 0;
  width: 360px;
  max-width: calc(100vw - 24px);
  margin-top: -7px;
  border-radius: 16px;
  text-align: left;
}
/* Below lg the header is centred: centre the dropdown under the pill. */
@media (max-width: 991.98px) {
  .cart--cart-block .cart-block--contents,
  .cart--cart-block .cart-block--contents.is-outside-horizontal {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}