/* Basket button, drawer and toast. Uses the page's colour tokens. */
.cart-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: 1px solid var(--line); border-radius: 50%; color: var(--bone); cursor: pointer; }
.cart-btn:hover { border-color: var(--rose); color: var(--rose); }
.cart-btn svg { width: 20px; height: 20px; }
.cart-count { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--blood); color: var(--bone); font: 600 .66rem/19px var(--label); text-align: center; font-variant-numeric: tabular-nums; }

.cart-back { position: fixed; inset: 0; z-index: 30; background: rgba(5,3,4,.65); backdrop-filter: blur(3px); }
.cart { position: fixed; z-index: 31; top: 0; right: 0; bottom: 0; width: min(420px, 100%); display: flex; flex-direction: column; background: var(--velvet); border-left: 1px solid var(--line); box-shadow: -30px 0 60px -20px rgba(0,0,0,.8); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html.cart-open { overflow: hidden; }
.cart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 22px 16px; border-bottom: 1px solid var(--line); }
.cart-head h2 { margin: 0; font: 400 2rem/1 var(--display); }
.cart-head h2 em { color: var(--rose); }
.cart-x { background: none; border: 0; color: var(--ash); font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 4px 8px; }
.cart-x:hover { color: var(--bone); }
.cart-items { flex: 1; overflow-y: auto; padding: 8px 22px; }
.cart-empty { color: var(--ash); text-align: center; margin-top: 48px; line-height: 2; }
.cart-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cart-row img { width: 54px; height: auto; border: 1px solid var(--line); }
.cart-t { font: italic 400 1.15rem/1.2 var(--display); color: var(--bone); }
.cart-f { font: 400 .72rem var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--ash); margin-top: 4px; }
.cart-p { font: italic 400 1.1rem var(--display); color: var(--bone); font-variant-numeric: tabular-nums; }
.qty { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.qty button[data-q] { width: 28px; height: 28px; border: 1px solid var(--line); background: var(--ink); color: var(--bone); cursor: pointer; font-size: 1rem; line-height: 1; border-radius: 2px; }
.qty button[data-q]:hover { border-color: var(--rose); }
.qty span { min-width: 18px; text-align: center; font: 600 .85rem var(--label); font-variant-numeric: tabular-nums; }
.cart-rm { background: none; border: 0; color: var(--ash); font: 400 .7rem var(--label); letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; margin-left: 6px; }
.cart-rm:hover { color: var(--rose); }
.cart-foot { padding: 18px 22px 22px; border-top: 1px solid var(--line); background: var(--ink); }
.cart-line { display: flex; justify-content: space-between; font: 600 .78rem var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--ash); }
.cart-line span:last-child { font: italic 400 1.5rem var(--display); letter-spacing: 0; text-transform: none; color: var(--bone); font-variant-numeric: tabular-nums; }
.cart-note { font-size: .9rem; color: var(--ash); margin: 10px 0 16px; line-height: 1.5; }
.cart-go { width: 100%; text-align: center; }
.cart-go:disabled { opacity: .45; cursor: not-allowed; }
.cart-msg { margin: 12px 0 0; color: var(--rose); font-style: italic; font-size: .92rem; }

.cart-toast { position: fixed; z-index: 25; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 18px; background: var(--velvet); border: 1px solid var(--blood); box-shadow: 0 20px 40px -10px rgba(0,0,0,.8); color: var(--bone); font-size: .95rem; }
.cart-toast button { background: none; border: 0; color: var(--rose); font: 600 .72rem var(--label); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; padding: 0; }

@media (prefers-reduced-motion: no-preference) {
  .cart:not([hidden]) { animation: cart-in .35s ease both; }
  .cart-toast:not([hidden]) { animation: toast-in .3s ease both; }
  @keyframes cart-in { from { transform: translateX(40px); opacity: .001; } to { transform: none; opacity: 1; } }
  @keyframes toast-in { from { transform: translate(-50%, 12px); opacity: .001; } to { transform: translate(-50%, 0); opacity: 1; } }
}

.currency-wrap { display: inline-flex; align-items: center; gap: 10px; }
.currency-pick { background: var(--ink); color: var(--bone); border: 1px solid var(--line); padding: 6px 8px; font: 400 .72rem var(--label); letter-spacing: .06em; border-radius: 2px; max-width: 100%; }
.currency-pick:focus { border-color: var(--rose); outline: none; }
.cart-note a { color: var(--rose); }
footer .foot-links a { color: var(--ash); }