/* Veloura's cart (cart.js): the bag in each header, the drawer, the note when something goes in. Its own colours, the
   brand's (espresso on porcelain, the pressed-rose accent), so it reads the same on every page and in every theme. */
.vc, .vc-note, .vc-fly {
  --vc-ground: #faf9f6; --vc-paper: #fff; --vc-oat: #f0ebe2; --vc-ink: #2e221b; --vc-ink-2: #54463c; --vc-muted: #74665a;
  --vc-line: #e3ddd2; --vc-rose: #9a3f45; --vc-ease: cubic-bezier(.16, 1, .3, 1);
  --vc-display: "Cormorant Garamond", "Cormorant", Georgia, serif; --vc-body: "Jost", "Futura", "Avenir Next", "Helvetica Neue", sans-serif;
}
.vc-i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* the bag: any link or button with [data-cart] (the page sets its size and colour, and can hide it: these rules weigh nothing) */
:where([data-cart]) { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; color: inherit; text-decoration: none; background: none; border: 0; padding: 0 6px; cursor: pointer; font: inherit; }
[data-cart] .vc-count { position: absolute; top: 4px; left: 50%; margin-left: 4px; box-sizing: border-box; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--vc-rose, #9a3f45); color: #fff;
  font: 500 10px/17px "Jost", system-ui, sans-serif; letter-spacing: 0; text-align: center; box-shadow: 0 0 0 2px var(--vc-ring, transparent); }
[data-cart] .vc-count[hidden] { display: none; }
[data-cart].vc-bump .vc-i { animation: vc-bump .6s var(--vc-ease, ease) both; }
[data-cart].vc-bump .vc-count { animation: vc-pop .6s var(--vc-ease, ease) both; }
@keyframes vc-bump { 30% { transform: scale(1.22) rotate(-8deg); } 60% { transform: scale(.94) rotate(4deg); } }
@keyframes vc-pop { 30% { transform: scale(1.45); } }

/* a picture flying into the bag */
.vc-fly { position: fixed; z-index: 520; object-fit: cover; border-radius: 12px; pointer-events: none; box-shadow: 0 14px 34px rgba(46, 34, 27, .35); background: var(--vc-oat); will-change: transform, opacity; }

/* while it's open the page stays still, and on the new homepage its own cursor gives way to the ordinary one */
html.vc-lock { overflow: hidden; }
html.vc-lock .cursor { opacity: 0 !important; }
.has-cursor .vc, .has-cursor .vc-note { cursor: auto; }
.has-cursor .vc a, .has-cursor .vc button, .has-cursor .vc-note a, .has-cursor .vc-note button { cursor: pointer; }

/* ---------- the drawer ---------- */
.vc { position: fixed; inset: 0; z-index: 500; font: 400 15px/1.5 var(--vc-body); color: var(--vc-ink); -webkit-font-smoothing: antialiased; }
.vc[hidden] { display: none; }
.vc__veil { position: absolute; inset: 0; background: rgba(28, 21, 17, .46); opacity: 0; transition: opacity .45s var(--vc-ease); }
.vc.on .vc__veil { opacity: 1; }
.vc__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); display: grid; grid-template-rows: auto 1fr auto; background: var(--vc-ground);
  box-shadow: -24px 0 60px rgba(28, 21, 17, .22); transform: translateX(104%); transition: transform .5s var(--vc-ease); outline: none; overscroll-behavior: contain; }
.vc.on .vc__panel { transform: none; }
.vc__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 14px 26px; border-bottom: 1px solid var(--vc-line); }
.vc__head h2 { margin: 0; font: 500 26px/1.1 var(--vc-display); letter-spacing: .005em; }
.vc__n { color: var(--vc-muted); font-size: .8em; }
.vc__x, .vc-note__x { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; transition: background .2s; }
.vc__x:hover, .vc-note__x:hover { background: var(--vc-oat); }
.vc__body { overflow-y: auto; overscroll-behavior: contain; padding: 6px 26px 18px; -webkit-overflow-scrolling: touch; }

.vc-lines { list-style: none; margin: 0; padding: 0; }
.vc-line { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--vc-line); }
.vc-line__img { width: 76px; height: 95px; border-radius: 8px; overflow: hidden; background: var(--vc-oat); }
.vc-line__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-line__name { display: block; font: 500 19px/1.2 var(--vc-display); }
.vc-line__name a { color: inherit; text-decoration: none; }
.vc-line__name a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.vc-line__meta { display: block; margin-top: 3px; color: var(--vc-muted); font-size: 12px; letter-spacing: .04em; }
.vc-line__price { font: 500 18px/1.2 var(--vc-display); white-space: nowrap; }
.vc-line__row { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.vc-say { margin: 6px 0 0; color: var(--vc-ink-2); font-size: 12.5px; line-height: 1.45; }
.vc-say--gone { color: var(--vc-rose); }
.vc-line.is-gone .vc-line__img, .vc-line.is-gone .vc-line__name, .vc-line.is-gone .vc-line__price { opacity: .45; }
.vc-line.is-gone .vc-line__price { text-decoration: line-through; }
.vc-qty { display: inline-flex; align-items: center; border: 1px solid var(--vc-line); border-radius: 999px; background: var(--vc-paper); }
.vc-qty button { width: 34px; height: 34px; border: 0; background: none; color: inherit; font: 400 17px/1 var(--vc-body); cursor: pointer; border-radius: 50%; }
.vc-qty button:disabled { opacity: .3; cursor: default; }
.vc-qty span { min-width: 18px; text-align: center; font-size: 14px; }
.vc-link { border: 0; background: none; padding: 6px 0; color: var(--vc-muted); font: 400 12.5px/1 var(--vc-body); letter-spacing: .04em; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vc-link:hover { color: var(--vc-ink); }

.vc-more { margin-top: 22px; }
.vc-more h3 { margin: 0 0 10px; font: 500 11px/1 var(--vc-body); letter-spacing: .18em; text-transform: uppercase; color: var(--vc-muted); }
.vc-more ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vc-more li { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; background: var(--vc-paper); border: 1px solid var(--vc-line); }
.vc-more img { width: 46px; height: 56px; border-radius: 6px; object-fit: cover; background: var(--vc-oat); }
.vc-more b { display: block; font: 500 16px/1.15 var(--vc-display); }
.vc-more i { font-style: normal; color: var(--vc-muted); font-size: 12.5px; }
.vc-add { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--vc-ink); background: none; color: var(--vc-ink); font: 300 20px/1 var(--vc-body); cursor: pointer; transition: background .2s, color .2s; }
.vc-add:hover { background: var(--vc-ink); color: var(--vc-ground); }

.vc__foot { padding: 16px 26px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--vc-line); background: var(--vc-paper); }
.vc-sum > div { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
.vc-sum > div:first-child { font: 500 20px/1.3 var(--vc-display); }
.vc-sub { color: var(--vc-muted); font-size: 13px; }
.vc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border: 1px solid var(--vc-ink); border-radius: 999px;
  background: var(--vc-ink); color: var(--vc-ground); font: 500 12px/1 var(--vc-body); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s; white-space: nowrap; }
.vc-btn:hover { background: var(--vc-rose); border-color: var(--vc-rose); }
.vc-btn--line { background: none; color: var(--vc-ink); }
.vc-btn--line:hover { background: var(--vc-ink); color: var(--vc-ground); border-color: var(--vc-ink); }
.vc-btn--big { display: flex; width: 100%; margin-top: 14px; min-height: 54px; font-size: 12.5px; }
.vc-btn.is-off { opacity: .4; pointer-events: none; }
.vc-cont { display: block; margin: 12px auto 0; }
.vc-trust { margin: 10px 0 0; text-align: center; color: var(--vc-muted); font-size: 11.5px; letter-spacing: .04em; }

.vc-empty { padding: 48px 4px; text-align: center; color: var(--vc-ink-2); }
.vc-empty__h { margin: 0 0 8px; font: 400 30px/1.15 var(--vc-display); color: var(--vc-ink); }
.vc-empty p { margin: 0 auto; max-width: 30ch; font-size: 14px; }
.vc-empty__go { display: grid; gap: 10px; margin: 26px auto 0; max-width: 260px; }

/* ---------- the note that something went in ---------- */
.vc-note { position: fixed; z-index: 510; top: 76px; right: 18px; width: min(360px, calc(100vw - 32px)); display: grid; grid-template-columns: 56px 1fr 44px; gap: 4px 12px; align-items: center;
  padding: 12px 6px 14px 12px; border-radius: 16px; background: var(--vc-ground); color: var(--vc-ink); box-shadow: 0 22px 60px rgba(28, 21, 17, .28), 0 0 0 1px rgba(46, 34, 27, .06);
  font: 400 14px/1.4 var(--vc-body); opacity: 0; transform: translateY(-10px) scale(.98); transition: opacity .35s var(--vc-ease), transform .45s var(--vc-ease); }
.vc-note[hidden] { display: none; }
.vc-note.on { opacity: 1; transform: none; }
.vc-note__img { width: 56px; height: 68px; border-radius: 8px; object-fit: cover; background: var(--vc-oat); }
.vc-note__txt b { display: block; font: 500 18px/1.2 var(--vc-display); }
.vc-note__txt span { display: block; color: var(--vc-muted); font-size: 12.5px; }
.vc-note__go { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 6px 0 0; }
.vc-note__go .vc-btn { min-height: 42px; padding: 0 12px; font-size: 11px; }

@media (max-width: 560px) {
  .vc__head { padding-left: 20px; }
  .vc__body, .vc__foot { padding-left: 20px; padding-right: 20px; }
  .vc-note { top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); right: 16px; transform: translateY(16px); }
}
@media (prefers-reduced-motion: reduce) {
  .vc__panel, .vc__veil, .vc-note { transition-duration: .01s; }
  [data-cart].vc-bump .vc-i, [data-cart].vc-bump .vc-count { animation: none; }
}