/* ===========================================================================
   The cart — a drawer over the page, and the button in the header that opens
   it. Loaded on every page, so everything here is namespaced under .cart or
   .cart-button and nothing sets a bare element rule.
   =========================================================================== */

/* --- the button in the header -------------------------------------------- */

.cart-button {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  /* Clears the last nav link by the same 25px the links use between
     themselves, so it reads as part of the same row. */
  margin-left: 25px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-2);
  font-family: var(--font-family-2);
  font-size: var(--font-size-7);
  cursor: pointer;
}
.cart-button:hover { color: var(--color-5); }

@media (max-width: 700px) {
  /* The nav is gone at this width, so the cart takes over pushing itself to
     the right-hand end of the header. */
  .cart-button { margin-left: auto; }

  /* And the Menu button gives up doing the same, or the free space is split
     between the two and they end up at opposite ends of the row. Raised to a
     two-part selector so it beats the margin-left:auto in global.css. */
  header .toggle-mobile-menu { margin-left: 14px; }

  /* With the menu open the header is a full-height column, where an auto left
     margin does nothing useful. */
  header.mobile-menu .cart-button { margin-left: 0; }
}

/* No cart in the header: buying happens on the store, and the drawer still
   opens on its own when something is added. Folded into the Menu button,
   that button keeps the row's end to itself. */
header .cart-button { display: none !important; }
@media (max-width: 1100px) {
  header .toggle-mobile-menu { margin-left: auto; }
}

/* A count of nothing is hidden entirely rather than shown as a zero, which
   reads as a cart with something wrong with it. */
.cart-button__count {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 9px;
  background: var(--color-5);
  color: var(--color-1);
  font-family: var(--font-family-2);
  font-size: var(--font-size-4);
  line-height: 1.5;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- the drawer ----------------------------------------------------------- */

.cart__scrim {
  position: fixed;
  inset: 0;
  background: rgba(11, 21, 30, 0.6);
  z-index: 90;
}

.cart__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  z-index: 91;
  display: flex;
  flex-direction: column;
  background: var(--color-1);
  border-left: 1px solid var(--color-3);
  color: var(--color-2);
}

/* [hidden] has to win over the display above, and a two-class selector would
   otherwise lose to it. */
.cart .cart__panel[hidden],
.cart .cart__scrim[hidden] { display: none; }

.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px var(--page-gutter);
  border-bottom: 1px solid var(--color-3);
}
.cart__title {
  margin: 0;
  font-family: var(--font-family-1);
  font-size: var(--font-size-2);
  font-weight: normal;
}
.cart__close {
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--color-7);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.cart__close:hover { color: var(--color-2); }

/* The list is the only part that scrolls, so the subtotal and the checkout
   button stay on screen however much is in the cart. */
.cart__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px var(--page-gutter);
}

.cart__empty {
  padding: 30px 0;
  color: var(--color-7);
  font-family: var(--font-family-2);
}

.cart__items { list-style: none; margin: 0; padding: 0; }

.cart__item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-3);
}
.cart__item:last-child { border-bottom: 0; }

.cart__thumb { margin: 0; }
/* The painting's own proportions, as everywhere else on the site — a square
   crop takes the sky off a tall one and the ends off a wide one, which is the
   one thing a picture of a painting must not do. Bounded on both axes instead,
   so a portrait is as tall as a landscape is wide and the rows stay even. */
.cart__thumb img {
  max-width: 64px;
  max-height: 64px;
  width: auto;
  height: auto;
  display: block;
  /* Held to the left edge of its 64px column so the names below start on the
     same line whatever shape the painting is. */
  margin-right: auto;
}

.cart__info { min-width: 0; }
.cart__name {
  margin: 0 0 2px;
  font-family: var(--font-family-1);
  line-height: 1.3;
}
/* Only lines that recorded where they came from become links, so the
   underline is what tells the two apart. */
.cart__namelink {
  color: inherit;
  text-decoration: none;
}
.cart__namelink:hover { color: var(--color-5); text-decoration: underline; }
.cart__thumblink { display: block; }
.cart__thumblink:hover { opacity: 0.85; }
.cart__variant,
.cart__gone {
  margin: 0;
  font-family: var(--font-family-2);
  font-size: var(--font-size-4);
  color: var(--color-7);
}
.cart__gone { color: var(--color-5); }

.cart__qty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.cart__step {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--color-3);
  border-radius: 3px;
  background: none;
  color: var(--color-2);
  line-height: 1;
  cursor: pointer;
}
.cart__step:hover { border-color: var(--color-7); }
.cart__count {
  min-width: 16px;
  text-align: center;
  font-family: var(--font-family-2);
  font-variant-numeric: tabular-nums;
}
.cart__remove {
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-7);
  font-family: var(--font-family-2);
  font-size: var(--font-size-4);
  text-decoration: underline;
  cursor: pointer;
}
.cart__remove:hover { color: var(--color-2); }

.cart__price {
  margin: 0;
  font-family: var(--font-family-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cart__foot {
  flex: 0 0 auto;
  padding: 18px var(--page-gutter) 22px;
  border-top: 1px solid var(--color-3);
}
.cart .cart__foot[hidden] { display: none; }

.cart__line {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-family-1);
  font-size: var(--font-size-2);
}
.cart__note {
  margin: 6px 0 0;
  font-family: var(--font-family-2);
  font-size: var(--font-size-4);
  color: var(--color-7);
}

/* Deliberately the same object as .b-button, but this file loads everywhere
   and blocks.css does not, so it cannot borrow the class. */
.cart__checkout {
  display: block;
  margin-top: 16px;
  padding: 14px 30px;
  border: 1px solid var(--color-2);
  border-radius: 4px;
  color: var(--color-2);
  font-family: var(--font-family-1);
  font-size: var(--font-size-2);
  text-align: center;
  text-decoration: none;
}
.cart__checkout:hover { background: var(--color-2); color: var(--color-1); }

/* Announced, not shown — the drawer already shows what happened. */
.cart__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Anything in flight makes the whole panel unclickable rather than each button
   tracking its own state, since every change replaces the entire list.

   Unclickable, and nothing else. Fading it while the request was away meant
   that removing a line dipped the entire cart — the other lines, the total,
   the checkout button — for as long as Shopify took to answer, which read as
   the whole thing flickering rather than as one line going. The list is
   replaced the moment the answer lands; until then the honest thing to show is
   what is still true. */
.cart.is-busy .cart__panel { pointer-events: none; }