/* Highest Vitality — shared cart drawer.
   Loaded on every page alongside cart.js, and deliberately linked AFTER
   each page's inline <style>. The drawer's base rules are duplicated
   inline on all 13 pages in slightly different formatting, so rather
   than editing every one, the light theme is applied here and wins on
   source order at equal specificity.

   Colours are literal rather than var()-driven on purpose: --line and
   --sienna-deep carry opposite meanings between the light pages (shop,
   booking) and the dark ones (about, index), so page variables would
   render invisible borders on half the site. */

/* ---- nav badge ---- */
/* cart.js hides the badge whenever the cart is empty. Spelled out here
   because a page whose inline <style> gives .cart-count a display value
   would otherwise override the hidden attribute's UA default. */
.cart-count[hidden] { display: none; }

/* ---- off-white drawer, matching the booking page ground (--parchment) ---- */
.cart-drawer {
  background: #f5efe2;
  border-left: 1px solid rgba(18, 22, 15, 0.12);
  box-shadow: -30px 0 60px -30px rgba(0, 0, 0, 0.35);
}

.cart-drawer-head { border-bottom: 1px solid rgba(18, 22, 15, 0.12); }
.cart-drawer-head h3 { color: #12160f; }

.cart-close { color: rgba(18, 22, 15, 0.5); }
.cart-close:hover { color: #12160f; }

.cart-drawer-body { color: #3a3f33; }

.cart-drawer-foot { border-top: 1px solid rgba(18, 22, 15, 0.12); }

/* ---- line items ---- */
.cart-line {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(18, 22, 15, 0.12);
}

.cart-line img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  flex: none;
}

.cart-line-info { flex: 1; min-width: 0; }

.cart-line-name {
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 4px;
  color: #12160f;
}

.cart-line-meta {
  font-size: 13px;
  color: #5c6152;
}

/* ---- quantity stepper ---- */
.cart-qty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.cart-qty-btn {
  font-family: inherit;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: #12160f;
  background: transparent;
  border: 1px solid rgba(18, 22, 15, 0.22);
  border-radius: 2px;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.cart-qty-btn:hover:not(:disabled) {
  background: rgba(18, 22, 15, 0.06);
  border-color: rgba(18, 22, 15, 0.45);
}

.cart-qty-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.cart-qty-val {
  min-width: 18px;
  text-align: center;
  font-size: 14px;
  color: #12160f;
  font-variant-numeric: tabular-nums;
}

/* pushed to the far end of the quantity row */
.cart-qty .cart-line-remove { margin-left: auto; }

.cart-line-remove {
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
  color: #5c6152;
  text-decoration: underline;
  transition: color .2s ease;
}

.cart-line-remove:hover { color: #7c4029; }

/* ---- subtotal ---- */
.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 16px;
  font-size: 14px;
  color: #3a3f33;
}

.cart-total strong {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 19px;
  color: #7c4029;
}

/* ---- touch sizing ----
   24px steppers are comfortable with a mouse and fiddly with a thumb.
   Apple's guidance is a 44pt minimum target; 38px plus the surrounding
   row padding gets close without making the drawer feel chunky. */
@media (max-width: 700px) {
  .cart-qty { gap: 10px; margin-top: 12px; }

  .cart-qty-btn {
    width: 38px;
    height: 38px;
    font-size: 17px;
  }

  .cart-qty-val {
    min-width: 24px;
    font-size: 15px;
  }

  /* give the text link a real tap area rather than 12px of glyph */
  .cart-line-remove {
    padding: 10px 2px;
    font-size: 13px;
  }

  .cart-line img { width: 64px; height: 64px; }
}