/* devines chat & offers — uses the theme's tokens (black/white, Sofia Sans). The one bold element is the
   hang-tag that carries every offer; everything around it stays quiet. */
:root {
  --dvc-ink: var(--dv-black, #000);
  --dvc-paper: var(--dv-white, #fff);
  --dvc-grey: var(--dv-grey, #707070);
  --dvc-line: var(--dv-line, #e8e8e8);
  --dvc-soft: #f5f5f3;
  --dvc-error: #b3261e;
  --dvc-head: var(--dv-font-head, "Sofia Sans Extra Condensed", sans-serif);
  --dvc-sub: var(--dv-font-sub, "Sofia Sans Condensed", sans-serif);
  --dvc-body: var(--dv-font-body, "Sofia Sans", system-ui, sans-serif);
  --dvc-top: calc(var(--dv-header-h, 68px) + var(--dv-announce-h, 27px));
}
html.dvc-locked { overflow: hidden; }

/* ---------- buttons, fields ---------- */
.dvc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35em; min-height: 48px; padding: 0 22px;
  background: var(--dvc-ink); color: var(--dvc-paper); border: 1.5px solid var(--dvc-ink); border-radius: 0; cursor: pointer;
  font: 700 15px/1 var(--dvc-sub); letter-spacing: .06em; text-decoration: none; white-space: nowrap;
}
.dvc-btn:hover { background: #262626; }
.dvc-btn:disabled { background: #d9d9d9; border-color: #d9d9d9; color: #7a7a7a; cursor: not-allowed; }
.dvc-btn--ghost { background: transparent; color: var(--dvc-ink); }
.dvc-btn--ghost:hover { background: var(--dvc-ink); color: var(--dvc-paper); }
.dvc-btn--block { display: flex; width: 100%; }
.dvc-btn .dv-money { color: inherit; }
.dvc-link { background: none; border: 0; padding: 0; color: var(--dvc-ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dvc-link:disabled { color: var(--dvc-grey); text-decoration: none; cursor: default; }
.dvc-btn:focus-visible, .dvc-link:focus-visible, .dvc-x:focus-visible, .dvc-item:focus-visible, .dvc-tab:focus-visible,
.dvc-compose__send:focus-visible { outline: 2px solid var(--dvc-ink); outline-offset: 3px; }
.dvc-label { display: block; margin: 0 0 6px; font: 600 14px/1.2 var(--dvc-body); }
.dvc-form input[type=email], .dvc-textarea {
  width: 100%; box-sizing: border-box; border: 1.5px solid var(--dvc-ink); border-radius: 0; background: var(--dvc-paper);
  padding: 13px 14px; font: 16px/1.4 var(--dvc-body); color: var(--dvc-ink);
}
.dvc-form input:focus, .dvc-textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(0,0,0,.14); }
.dvc-textarea { resize: vertical; min-height: 52px; }
.dvc-form { display: grid; gap: 14px; }
.dvc-error { margin: 0; color: var(--dvc-error); font-size: 14px; }
.dvc-error:empty { display: none; }
.dvc-fine { margin: 0; color: var(--dvc-grey); font-size: 13px; line-height: 1.45; }
.dvc-fine a { color: inherit; }
.dvc-title { margin: 0; font: 700 30px/1.05 var(--dvc-head); letter-spacing: .005em; }
.dvc-sub { margin: 0; color: #3a3a3a; font-size: 15px; line-height: 1.5; }

/* ---------- layers (pop-up, side panel) ---------- */
.dvc-layer { position: fixed; inset: 0; z-index: 1000; display: flex; }   /* above the site header and announcement bar */
.dvc-layer--center { align-items: center; justify-content: center; padding: 16px; }
.dvc-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .2s; }
.dvc-layer.is-open .dvc-scrim { opacity: 1; }
.dvc-card { position: relative; background: var(--dvc-paper); color: var(--dvc-ink); font-family: var(--dvc-body); }
.dvc-card { width: 100%; max-width: 440px; padding: 24px 28px 28px; border: 1.5px solid var(--dvc-ink); box-sizing: border-box;
  transform: translateY(10px); opacity: 0; transition: transform .2s ease, opacity .2s ease; max-height: calc(100dvh - 32px); overflow: auto; }
.dvc-layer.is-open .dvc-card { transform: none; opacity: 1; }
.dvc-card__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.dvc-x { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; margin: -6px -10px -6px 0;
  background: none; border: 1.5px solid transparent; color: var(--dvc-ink); cursor: pointer; }
@media (hover: hover) { .dvc-x:hover { border-color: var(--dvc-ink); } }   /* phones: no box left behind after a tap */

.dvc-steps { display: flex; align-items: center; gap: 12px; flex: 1; }
.dvc-steps__bar { position: relative; flex: 1; max-width: 160px; height: 3px; background: var(--dvc-line); }
.dvc-steps__bar i { position: absolute; inset: 0 auto 0 0; background: var(--dvc-ink); transition: width .3s ease; }
.dvc-steps__txt { color: var(--dvc-grey); font-size: 13px; }

.dvc-piece { display: flex; gap: 12px; align-items: center; padding: 10px; margin: 0 0 20px; background: var(--dvc-soft); }
.dvc-piece__img { width: 56px; height: 56px; object-fit: cover; flex: none; }
.dvc-piece__txt { display: grid; gap: 2px; min-width: 0; }
.dvc-piece__lead { color: var(--dvc-grey); font-size: 12px; }
.dvc-piece__title { font: 700 17px/1.15 var(--dvc-sub); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dvc-piece__meta { font-size: 13px; color: #3a3a3a; white-space: pre; }

.dvc-code { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.dvc-code__box { width: 100%; aspect-ratio: 1 / 1.15; box-sizing: border-box; border: 1.5px solid var(--dvc-ink); border-radius: 0;
  text-align: center; font: 700 28px/1 var(--dvc-head); background: var(--dvc-paper); padding: 0; color: var(--dvc-ink); }
.dvc-code__box:focus { outline: none; box-shadow: inset 0 -4px 0 var(--dvc-ink); }

/* the conversation in a window on product pages: grows out of the button that opened it */
.dvc-layer--window { align-items: center; justify-content: center; padding: 3vh 16px; }
.dvc-window { position: relative; display: flex; flex-direction: column; width: min(780px, 100%); height: min(840px, 94dvh);
  background: var(--dvc-paper); color: var(--dvc-ink); font-family: var(--dvc-body); border: 1.5px solid var(--dvc-ink); overflow: hidden;
  opacity: 0; transform: scale(.9); transition: transform .34s cubic-bezier(.2,.85,.25,1), opacity .2s ease; }
.dvc-layer.is-open .dvc-window { opacity: 1; transform: none; }
.dvc-window .dvc-shell { height: 100%; min-height: 0; grid-template-columns: 1fr; border-top: 0; }
.dvc-window .dvc-thread { display: flex; }
.dvc-window .dvc-app__loading { margin: auto; }
.dvc-th__all { font-size: 13px; color: var(--dvc-ink); }
.dvc-th__hint { margin: auto; max-width: 340px; text-align: center; color: #3a3a3a; display: grid; gap: 6px; }
.dvc-th__hint p { margin: 0; }
.dvc-th__hint-title { font: 700 26px/1.05 var(--dvc-head); color: var(--dvc-ink); }
@media (max-width: 749px) {
  .dvc-layer--window { padding: 0; }
  .dvc-window { width: 100%; height: 100%; border: 0; }   /* the layer follows the visible area above the keyboard */
}

@media (max-width: 749px) {
  .dvc-card { padding: 20px 18px 22px; }
  .dvc-layer--center { align-items: flex-end; padding: 0; }
  .dvc-layer--center .dvc-card { max-width: none; border-width: 1.5px 0 0; max-height: 100%; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  /* keyboard open: keep only what's needed so the field and its button stay above the keyboard */
  .dvc-layer.is-kb .dvc-login .dvc-piece, .dvc-layer.is-kb .dvc-login .dvc-sub:not(:has(button)) { display: none; }
  .dvc-layer.is-kb .dvc-card { padding-top: 12px; padding-bottom: 12px; }
  .dvc-layer.is-kb .dvc-card__top { margin-bottom: 10px; }
  .dvc-layer.is-kb .dvc-title { font-size: 24px; }
  .dvc-layer.is-kb .dvc-form { gap: 10px; }
}

/* ---------- hang-tag: how every offer appears ---------- */
.dvc-tag {
  position: relative; display: inline-grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 14px; row-gap: 2px;
  padding: 12px 18px 12px 34px; background: var(--dvc-paper); color: var(--dvc-ink);
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%);
  filter: drop-shadow(0 0 0 var(--dvc-ink));
  box-shadow: inset 0 0 0 1.5px var(--dvc-ink);
}
.dvc-tag::before { /* outline along the pointed edge (clip-path cuts the inset shadow there) */
  content: ""; position: absolute; inset: 0; background: var(--dvc-ink);
  clip-path: polygon(16px 0, 17.5px 0, 1.6px 50%, 17.5px 100%, 16px 100%, 0 50%); }
.dvc-tag__hole { position: absolute; left: 13px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--dvc-ink); background: var(--dvc-paper); }
.dvc-tag__label { grid-column: 1 / -1; font-size: 12px; color: var(--dvc-grey); }
.dvc-tag__price { font: 700 32px/1 var(--dvc-head); letter-spacing: .01em; }
.dvc-tag__status { font-size: 12px; color: var(--dvc-grey); }
.dvc-tag--solid { background: var(--dvc-ink); color: var(--dvc-paper); }
.dvc-tag--solid .dvc-tag__label, .dvc-tag--solid .dvc-tag__status { color: #bdbdbd; }
.dvc-tag--solid .dvc-tag__hole { background: var(--dvc-paper); box-shadow: none; }
.dvc-tag--void .dvc-tag__price { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--dvc-grey); }

/* ---------- chat page ---------- */
.dvc-page { background: var(--dvc-paper); color: var(--dvc-ink); font-family: var(--dvc-body); }
.dvc-app__loading { padding: 40px var(--dv-page-margin, 16px); color: var(--dvc-grey); margin: 0; }

.dvc-intro { max-width: 760px; margin: 0 auto; padding: clamp(40px, 8vw, 96px) var(--dv-page-margin, 16px) 96px; }
.dvc-intro__title { margin: 0 0 16px; font: 700 clamp(44px, 7vw, 76px)/.95 var(--dvc-head); letter-spacing: -.005em; max-width: 12ch; }
.dvc-intro__lead { margin: 0 0 40px; font-size: 18px; line-height: 1.55; max-width: 52ch; color: #2b2b2b; }
.dvc-how { list-style: none; counter-reset: how; margin: 0 0 40px; padding: 0; border-top: 1.5px solid var(--dvc-ink); }
.dvc-how li { counter-increment: how; display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 8px;
  padding: 18px 0; border-bottom: 1px solid var(--dvc-line); }
.dvc-how li::before { content: counter(how); grid-row: 1 / 3; font: 700 34px/1 var(--dvc-head); }
.dvc-how strong { font: 700 20px/1.2 var(--dvc-sub); }
.dvc-how span { color: #3a3a3a; }

.dvc-shell { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; height: calc(100dvh - var(--dvc-top)); min-height: 520px; border-top: 1px solid var(--dvc-line); }
.dvc-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--dvc-line); }
.dvc-list__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 22px 20px 4px; }
.dvc-list__title { margin: 0; font: 700 34px/1 var(--dvc-head); }
.dvc-list__acts { display: flex; gap: 16px; font-size: 14px; }
.dvc-list__who { margin: 0; padding: 0 20px 14px; color: var(--dvc-grey); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid var(--dvc-line); }
.dvc-list__items { overflow-y: auto; flex: 1; }
.dvc-item { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 12px 20px; text-align: left;
  background: var(--dvc-paper); border: 0; border-bottom: 1px solid var(--dvc-line); color: var(--dvc-ink); font: inherit; cursor: pointer; }
.dvc-item:hover { background: var(--dvc-soft); }
.dvc-item.is-active { background: var(--dvc-soft); box-shadow: inset 3px 0 0 var(--dvc-ink); }
.dvc-item__img, .dvc-item__ph { width: 48px; height: 48px; object-fit: cover; }
.dvc-item__ph { display: inline-flex; align-items: center; justify-content: center; background: var(--dvc-ink); color: var(--dvc-paper); }
.dvc-item__txt { display: grid; gap: 3px; min-width: 0; }
.dvc-item__txt strong { font: 700 16px/1.15 var(--dvc-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dvc-item__txt span { font-size: 13px; color: var(--dvc-grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dvc-item.is-unread .dvc-item__txt span { color: var(--dvc-ink); font-weight: 600; }
.dvc-item__side { display: grid; justify-items: end; gap: 5px; font-size: 12px; color: var(--dvc-grey); }
.dvc-item__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dvc-ink); }
.dvc-pill { font-size: 11px; padding: 2px 6px; border: 1px solid currentColor; color: var(--dvc-ink); white-space: nowrap; }
.dvc-pill--accepted, .dvc-pill--paid { background: var(--dvc-ink); color: var(--dvc-paper); border-color: var(--dvc-ink); }
.dvc-pill--declined, .dvc-pill--expired { color: var(--dvc-grey); }

.dvc-thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--dvc-paper); }
.dvc-thread__empty { margin: auto; max-width: 380px; padding: 32px 20px; text-align: center; display: grid; gap: 12px; justify-items: center; color: #3a3a3a; }
.dvc-thread__empty p { margin: 0; }
.dvc-thread__empty-title { font: 700 30px/1 var(--dvc-head); color: var(--dvc-ink); }
.dvc-th__head { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--dvc-line); }
.dvc-th__back { display: none; background: none; border: 0; padding: 6px; margin-left: -8px; cursor: pointer; color: var(--dvc-ink); }
.dvc-th__img img { width: 56px; height: 56px; object-fit: cover; display: block; }
.dvc-th__info { display: grid; gap: 2px; min-width: 0; flex: 1; }
.dvc-th__title { font: 700 19px/1.15 var(--dvc-sub); color: var(--dvc-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.dvc-th__title:hover { text-decoration: underline; }
.dvc-th__meta { font-size: 13px; color: #3a3a3a; white-space: pre; }
.dvc-th__sub { font-size: 13px; color: var(--dvc-ink); font-weight: 600; }

.dvc-th__msgs { flex: 1; overflow-y: auto; padding: 20px 22px 8px; display: flex; flex-direction: column; gap: 6px; overscroll-behavior: contain; }
.dvc-day { align-self: center; margin: 14px 0 6px; font-size: 12px; color: var(--dvc-grey); }
.dvc-msg { display: flex; flex-direction: column; gap: 4px; max-width: min(78%, 520px); }
.dvc-msg--buyer { align-self: flex-end; align-items: flex-end; }
.dvc-msg--staff { align-self: flex-start; align-items: flex-start; }
.dvc-msg--event { align-self: center; align-items: center; max-width: 100%; margin: 8px 0; }
.dvc-bubble { margin: 0; padding: 10px 14px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.dvc-msg--buyer .dvc-bubble { background: var(--dvc-ink); color: var(--dvc-paper); }
.dvc-msg--staff .dvc-bubble { background: var(--dvc-soft); color: var(--dvc-ink); }
.dvc-msg__time { font-size: 11px; color: var(--dvc-grey); }
.dvc-msg.is-pending { opacity: .55; }
.dvc-msg.is-failed .dvc-bubble { outline: 1.5px solid var(--dvc-error); }
.dvc-event { margin: 0; font-size: 13px; color: var(--dvc-grey); text-align: center; max-width: 40ch; }

.dvc-compose { display: flex; align-items: flex-end; gap: 10px; padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--dvc-line); background: var(--dvc-paper); flex-wrap: wrap; }
.dvc-th__flash { flex-basis: 100%; }
.dvc-compose__input { flex: 1; min-width: 0; resize: none; border: 1.5px solid var(--dvc-ink); border-radius: 0; padding: 11px 13px; font: 16px/1.35 var(--dvc-body); max-height: 160px; }
.dvc-compose__input:focus { outline: none; box-shadow: 0 0 0 3px rgba(0,0,0,.14); }
.dvc-compose__send { flex: none; height: 46px; border: 1.5px solid var(--dvc-ink); background: var(--dvc-ink); color: var(--dvc-paper); cursor: pointer; }
.dvc-compose__send { width: 46px; display: inline-flex; align-items: center; justify-content: center; }

/* orders */
.dvc-orders-card { max-width: 560px; }
.dvc-orders__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dvc-orders__head .dvc-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* back chevron: only on an order's details (hidden on the list), no box around it, never over the title */
.dvc-orders__back { margin: 0; width: 32px; border-color: transparent !important; background: none !important; }
.dvc-orders__back[hidden] { display: none !important; }
.dvc-orders { display: grid; gap: 10px; }
.dvc-order { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 12px; text-align: left;
  background: var(--dvc-paper); color: var(--dvc-ink); border: 1px solid var(--dvc-line); font: inherit; cursor: pointer; transition: border-color .15s; }
.dvc-order:hover { border-color: var(--dvc-ink); }
.dvc-order:focus-visible { outline: 2px solid var(--dvc-ink); outline-offset: 2px; }
.dvc-order__img { width: 64px; height: 80px; object-fit: cover; display: block; background: #f2f2f2; }
.dvc-order__info { display: grid; gap: 5px; min-width: 0; }
.dvc-order__name { font-size: 14px; line-height: 1.25; text-transform: uppercase; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dvc-order__meta { font-size: 12px; color: var(--dvc-grey); }
.dvc-order__bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; max-width: 170px; margin-top: 2px; }
.dvc-order__bar i { height: 3px; background: #e2e2e0; }
.dvc-order__bar i.is-done { background: var(--dvc-ink); }
.dvc-order__bar i.is-issue { background: #d97706; }
.dvc-order__status { font-size: 13px; font-weight: 600; }
.dvc-order.is-issue .dvc-order__status { color: #b45309; }
.dvc-order__total { font-size: 14px; white-space: nowrap; align-self: start; }
.dvc-order-detail { margin-top: -6px; }
.dvc-msg--update .dvc-update__label { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--dvc-grey); }
.dvc-msg--update .dvc-bubble { white-space: pre-wrap; }
.dvc-update__link { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--dvc-ink); text-decoration: underline; text-underline-offset: 3px; }

/* badge on header chat icons + rail list */
.dvc-badge { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 9px;
  background: var(--dvc-ink); color: var(--dvc-paper); font: 700 11px/17px var(--dvc-body); text-align: center; box-shadow: 0 0 0 2px var(--dvc-paper); }
.dvc-rail-item { display: flex; gap: 10px; align-items: center; padding: 8px 0; color: inherit; text-decoration: none; }
.dvc-rail-item img, .dvc-rail-item__ph { width: 36px; height: 36px; object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.25); }
.dvc-rail-item__txt { display: grid; min-width: 0; font-size: 12px; }
.dvc-rail-item__txt strong, .dvc-rail-item__txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dvc-rail-item__txt span { opacity: .65; }
.dvc-rail-item.is-unread strong::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-left: 6px; vertical-align: middle; }

/* phones: list, then a full-screen conversation */
@media (max-width: 989px) {
  .dvc-shell { grid-template-columns: 1fr; }
  .dvc-thread { display: none; }
  .dvc-shell.is-thread .dvc-list { display: none; }
  .dvc-shell.is-thread .dvc-thread { display: flex; }
  .dvc-th__back { display: inline-flex; }
  .dvc-th__head { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
  .dvc-th__img img { width: 44px; height: 44px; }
  .dvc-th__msgs { padding: 14px 14px 6px; }
  .dvc-compose { padding-left: 14px; padding-right: 14px; }
  .dvc-msg { max-width: 86%; }
  .dvc-intro > .dvc-btn { width: 100%; }
  .dvc-chat-page .dv-footer, .dvc-chat-page footer.site-footer { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dvc-card, .dvc-window, .dvc-scrim, .dvc-steps__bar i { transition: none; }
}

/* conversation head: MAKE OFFER (white) next to BUY / ACCEPT / PAY (black); close at the far right */
.dvc-th__acts { display: flex; gap: 8px; flex: none; }
.dvc-th__acts .dvc-btn { min-height: 44px; padding: 0 18px; }
.dvc-th__close { margin: 0 -8px 0 4px; flex: none; }
.dvc-th__all { font-size: 13px; color: var(--dvc-grey); width: max-content; }
.dvc-th__all:hover { color: var(--dvc-ink); }
@media (max-width: 989px) {
  .dvc-th__acts { order: 10; flex-basis: 100%; }
  .dvc-th__acts .dvc-btn { flex: 1; padding: 0 10px; }
  .dvc-th__close { order: 5; align-self: flex-start; }
}

/* "Send offer" pop-up */
.dvc-offer { max-width: 480px; padding: 0; }
.dvc-offer__top { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 16px 24px; border-bottom: 1.5px solid var(--dvc-ink); }
.dvc-offer__title { margin: 0; font: 700 26px/1 var(--dvc-head); letter-spacing: .01em; }
.dvc-x--box { margin: 0; border-color: var(--dvc-ink); }
.dvc-x--box:hover { background: var(--dvc-ink); color: var(--dvc-paper); }
.dvc-offer__body { display: grid; gap: 10px; padding: 22px 24px 24px; }
.dvc-offer__piece { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--dvc-line); margin-bottom: 12px; }
.dvc-offer__piece img { width: 72px; height: 72px; object-fit: cover; flex: none; }
.dvc-offer__piece-txt { display: grid; gap: 3px; min-width: 0; }
.dvc-offer__brand { font: 700 15px/1.1 var(--dvc-sub); letter-spacing: .02em; }
.dvc-offer__name { font-size: 14px; color: #3a3a3a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dvc-offer__price { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; font: 700 17px/1 var(--dvc-sub); }
.dvc-offer__incl { font: 400 13px/1 var(--dvc-body); color: var(--dvc-grey); border-bottom: 1px dashed currentColor; padding-bottom: 2px; }
.dvc-offer__field { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--dvc-ink); padding: 0 16px; background: var(--dvc-paper); }
.dvc-offer__field:focus-within { box-shadow: 0 0 0 3px rgba(0,0,0,.14); }
.dvc-offer__field.is-invalid { border-color: var(--dvc-error); box-shadow: 0 0 0 3px rgba(179,38,30,.14); }
.dvc-offer__sym { font: 700 26px/1 var(--dvc-head); }
.dvc-offer__input { flex: 1; min-width: 0; width: 100%; border: 0; padding: 14px 0; background: transparent; font: 700 34px/1 var(--dvc-head); color: var(--dvc-ink); }
.dvc-offer__input:focus { outline: none; }
.dvc-offer__code { font: 700 14px/1 var(--dvc-sub); letter-spacing: .04em; color: var(--dvc-grey); }
.dvc-offer__help { margin: 0; font-size: 13px; color: #3a3a3a; min-height: 1.2em; }
.dvc-offer__help:empty { display: none; }
.dvc-offer__btns { display: grid; grid-template-columns: 2fr 3fr; gap: 10px; margin-top: 12px; }
@media (max-width: 749px) {
  .dvc-offer__top { padding: 12px 14px 12px 18px; }
  .dvc-offer__body { padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); }
  .dvc-layer.is-kb .dvc-offer__piece { display: none; }
}

/* buttons row above the message box: BUY / ACCEPT / PAY (black) first, MAKE OFFER (white) */
.dvc-th__bar { padding: 12px 22px 0; border-top: 1px solid var(--dvc-line); }
.dvc-th__bar[hidden] { display: none; }
.dvc-th__bar .dvc-th__acts { display: grid; grid-template-columns: 1fr; gap: 8px; order: 0; flex-basis: auto; }
.dvc-th__bar .dvc-th__acts.is-pair { grid-template-columns: 1fr 1fr; }
.dvc-th__bar .dvc-btn { width: 100%; min-height: 46px; }
.dvc-th__bar + .dvc-compose { border-top: 0; }
@media (max-width: 989px) { .dvc-th__bar { padding: 10px 14px 0; } }

/* photos */
.dvc-compose__attach { flex: none; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--dvc-ink); background: var(--dvc-paper); color: var(--dvc-ink); cursor: pointer; }
.dvc-compose__attach:hover { background: var(--dvc-ink); color: var(--dvc-paper); }
.dvc-compose__attach:focus-visible { outline: 2px solid var(--dvc-ink); outline-offset: 3px; }
.dvc-photo { display: block; line-height: 0; border: 1px solid var(--dvc-line); }
.dvc-photo img { display: block; width: auto; max-width: min(260px, 70vw); max-height: 340px; object-fit: cover; }
.dvc-msg.is-pending .dvc-photo { opacity: .6; }
.dvc-offer__size { font-size: 13px; color: var(--dvc-grey); }

/* phones: the login is a compact card in the middle of the screen (re-centred above the keyboard when it opens) */
@media (max-width: 749px) {
  .dvc-layer--center.dvc-layer--login { align-items: center; padding: 16px; }
  .dvc-layer--center.dvc-layer--login .dvc-card { max-width: 440px; height: auto; max-height: 100%; border: 1.5px solid var(--dvc-ink);
    padding: 18px 20px 22px; transform: translateY(10px); }
  .dvc-layer--login .dvc-piece { display: none; }
  .dvc-layer--login .dvc-card__top { margin-bottom: 18px; }
  .dvc-layer--login .dvc-title { font-size: 30px; }
  .dvc-layer--login .dvc-form { gap: 12px; }
  .dvc-layer--login .dvc-btn { min-height: 50px; }
  .dvc-layer--login input[type=email] { padding: 14px; }
  .dvc-layer.is-kb.dvc-layer--login .dvc-card__top { margin-bottom: 10px; }
  .dvc-layer.is-kb.dvc-layer--login .dvc-title { font-size: 26px; }
}

/* message box: staged photos sit in a row above it until Send is pressed */
.dvc-compose { flex-direction: column; align-items: stretch; gap: 10px; }
.dvc-compose__row { display: flex; align-items: flex-end; gap: 10px; }
.dvc-compose__send:not(.is-ready) { background: #fff; color: #9a9a9a; border-color: #cfcfcf; }
.dvc-compose__attach:disabled { opacity: .35; cursor: not-allowed; }
.dvc-tray { display: flex; gap: 8px; flex-wrap: wrap; }
.dvc-tray[hidden] { display: none; }
.dvc-tray__item { position: relative; flex: none; width: 68px; height: 68px; border: 1px solid var(--dvc-line); }
.dvc-tray .dvc-tray__item img { width: 68px; height: 68px; max-width: none; object-fit: cover; display: block; }   /* beats the shop's img { height: auto } */
.dvc-tray__x { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; border: 0;
  background: var(--dvc-ink); color: var(--dvc-paper); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.dvc-tray__x:focus-visible { outline: 2px solid var(--dvc-ink); outline-offset: 2px; }

/* ---------- Help center (/pages/help) ---------- */
.dvc-help__shell { display: grid; grid-template-columns: 260px 1fr; height: calc(100dvh - var(--dvc-top)); min-height: 520px; border-top: 1px solid var(--dvc-line); }
.dvc-help__side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--dvc-line); background: var(--dvc-soft); }
.dvc-help__brand { margin: 0; padding: 22px 20px 18px; font: 400 26px/1 var(--dvc-head); border-bottom: 1px solid var(--dvc-line); }
.dvc-help__brand strong { font-weight: 700; }
.dvc-help__nav { display: flex; flex-direction: column; padding: 10px 8px; gap: 2px; flex: 1; overflow-y: auto; }
.dvc-help__item { display: flex; align-items: center; gap: 10px; padding: 12px 12px; color: var(--dvc-ink); text-decoration: none; font: 700 16px/1 var(--dvc-sub); }
.dvc-help__item.is-active { background: var(--dvc-paper); box-shadow: inset 3px 0 0 var(--dvc-ink); }
.dvc-help__group { margin: 18px 12px 6px; padding-top: 14px; border-top: 1px solid var(--dvc-line); font: 700 18px/1 var(--dvc-head); }
.dvc-help__link { padding: 9px 12px; color: #3a3a3a; text-decoration: none; font-size: 15px; }
.dvc-help__link:hover { color: var(--dvc-ink); text-decoration: underline; text-underline-offset: 3px; }
.dvc-help__foot { display: grid; gap: 8px; padding: 14px 12px 16px; border-top: 1px solid var(--dvc-line); }
.dvc-help__foot-link { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid #d4d4d4; background: var(--dvc-paper);
  color: var(--dvc-ink); text-decoration: none; font: 500 14px/1 var(--dvc-body); cursor: pointer; text-align: left; }
.dvc-help__foot-link:hover { border-color: var(--dvc-ink); }
.dvc-help__logout { color: var(--dvc-error); }
.dvc-help__main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.dvc-help__main > .dvc-shell { height: 100%; min-height: 0; border-top: 0; grid-template-columns: 1fr; }
.dvc-help__main .dvc-thread { display: flex; }
.dvc-help__out { margin: auto; max-width: 400px; padding: 32px 20px; display: grid; justify-items: center; gap: 12px; text-align: center; color: #3a3a3a; }
.dvc-help__out p { margin: 0 0 6px; line-height: 1.5; }
.dvc-help__mark { width: 56px; height: 56px; border-radius: 50%; background: var(--dvc-ink); color: var(--dvc-paper); display: inline-flex; align-items: center; justify-content: center; }
.dvc-help__title { margin: 4px 0 0; font: 700 34px/1 var(--dvc-head); color: var(--dvc-ink); }

/* welcome message at the top of a support conversation */
.dvc-welcome { display: grid; grid-template-columns: 36px 1fr; gap: 14px; max-width: 640px; margin: 4px 0 10px; }
.dvc-welcome__mark { width: 36px; height: 36px; border-radius: 50%; background: var(--dvc-ink); color: var(--dvc-paper); display: inline-flex; align-items: center; justify-content: center;
  font: 700 20px/1 var(--dvc-head); }
.dvc-welcome__txt p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; }
.dvc-welcome__who { font-size: 12px !important; color: var(--dvc-grey); margin-bottom: 6px !important; }

/* side rail on product pages: Help center link under Log in / Log out */
.dvc-rail-help { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; min-height: 40px; color: inherit; text-decoration: none;
  border: 1px solid rgba(255,255,255,.25); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.dvc-rail-help:hover { border-color: currentColor; }

@media (max-width: 989px) {
  .dvc-help__shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }   /* the link row must not widen the page */
  .dvc-help__side { min-width: 0; border-right: 0; border-bottom: 1px solid var(--dvc-line); }
  .dvc-help__brand { padding: 12px 14px; font-size: 22px; border-bottom: 0; }
  .dvc-help__nav { flex-direction: row; gap: 6px; padding: 0 14px 10px; overflow-x: auto; flex: none; scrollbar-width: none; }
  .dvc-help__group { display: none; }
  .dvc-help__item, .dvc-help__link { flex: none; white-space: nowrap; padding: 9px 12px; border: 1px solid #d4d4d4; background: var(--dvc-paper); font-size: 14px; }
  .dvc-help__item.is-active { background: var(--dvc-ink); color: var(--dvc-paper); box-shadow: none; border-color: var(--dvc-ink); }
  .dvc-help__foot { display: none; }
  .dvc-help__main .dvc-th__msgs { padding-top: 16px; }
}
.dvc-th__head[hidden], .dvc-th__bar[hidden] { display: none; }

/* ---------- FAQ (/pages/faq) ---------- */
.dvc-faq { overflow-y: auto; }
.dvc-faq__inner { width: 100%; max-width: 760px; margin: 0 auto; padding: 36px 28px 64px; box-sizing: border-box; }
.dvc-faq__title { margin: 0 0 24px; font: 700 clamp(36px, 5vw, 52px)/1 var(--dvc-head); }
.dvc-faq__body h2 { margin: 34px 0 6px; font: 700 22px/1.1 var(--dvc-head); letter-spacing: .01em; }
.dvc-faq__body h2:first-child { margin-top: 0; }
.dvc-faq__body details { border-bottom: 1px solid var(--dvc-line); }
.dvc-faq__body summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0;
  cursor: pointer; font: 600 17px/1.35 var(--dvc-body); }
.dvc-faq__body summary::-webkit-details-marker { display: none; }
.dvc-faq__body summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.dvc-faq__body details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.dvc-faq__body summary:focus-visible { outline: 2px solid var(--dvc-ink); outline-offset: 2px; }
.dvc-faq__body details p { margin: 0 0 18px; max-width: 64ch; color: #333; font-size: 15px; line-height: 1.6; }
.dvc-faq__body a { color: var(--dvc-ink); }
.dvc-faq__more { margin-top: 44px; padding: 24px; background: var(--dvc-soft); display: grid; gap: 8px; justify-items: start; }
.dvc-faq__more p { margin: 0; color: #333; }
.dvc-faq__more-title { font: 700 24px/1.1 var(--dvc-head); color: var(--dvc-ink) !important; }
.dvc-faq__more .dvc-btn { margin-top: 8px; }
.dvc-faq-page .dv-footer, .dvc-faq-page footer.devines-footer { display: block; }
@media (max-width: 989px) {
  .dvc-faq__inner { padding: 22px 16px 48px; }
  .dvc-help-page .dvc-faq { overflow: visible; }
  .dvc-faq-page .dvc-help__shell { height: auto; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .dvc-faq__body summary::after { transition: none; } }

/* ==========================================================================
   Help: concierge sourcing (7 Nov). Every "Can't find it?" link on the site lands here
   (/pages/help?topic=sourcing#sourcing). Black grain panel like the homepage: the promise
   + 3 steps on the left, a short request form on the right that sends into the chat.
   ========================================================================== */
.dv-src { --s-fg: #f2f1ec; --s-mute: #9a9993; --s-line: rgba(255,255,255,.16); --s-line2: rgba(255,255,255,.34);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 56px; margin: 0 0 56px; padding: 48px 48px 44px; color: var(--s-fg);
  scroll-margin-top: calc(var(--dvc-top) + 16px);
  background: url("/wp-content/themes/devines/assets/img/grain/g-30512a94.png"),
    radial-gradient(120% 90% at 20% 0%, #1c1c1b 0%, #0e0e0d 70%); }
.dv-src:target, .dv-src.is-arrived { animation: dv-src-in .7s cubic-bezier(.22,1,.36,1); }
@keyframes dv-src-in { from { box-shadow: 0 0 0 0 rgba(242,241,236,.0); } 30% { box-shadow: 0 0 0 3px rgba(242,241,236,.35); } to { box-shadow: 0 0 0 0 rgba(242,241,236,0); } }
.dv-src__kicker { margin: 0 0 14px; color: var(--s-mute); font: 600 12px/1 var(--dvc-sub); letter-spacing: .2em; text-transform: uppercase; }
.dv-src__t { margin: 0 0 18px; font: 800 clamp(40px, 4.6vw, 64px)/.92 var(--dvc-head); text-transform: uppercase; text-wrap: balance; }
.dv-src__p { margin: 0 0 28px; max-width: 48ch; color: #cfcec8; font-size: 16px; line-height: 1.6; }
.dv-src__steps { list-style: none; margin: 0; padding: 0; counter-reset: s; border-top: 1px solid var(--s-line2); }
.dv-src__steps li { counter-increment: s; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 0; padding: 14px 0; border-bottom: 1px solid var(--s-line); }
.dv-src__steps li::before { content: counter(s); grid-row: 1 / 3; font: 800 30px/1 var(--dvc-head); color: var(--s-fg); }
.dv-src__steps strong { font: 700 13px/1.3 var(--dvc-sub); letter-spacing: .14em; text-transform: uppercase; }
.dv-src__steps span { color: var(--s-mute); font-size: 14.5px; line-height: 1.5; }

/* the form */
.dv-src__form { position: relative; align-self: start; padding: 24px 24px 20px; background: rgba(255,255,255,.04); border: 1px solid var(--s-line2); }
.dv-src__ft { margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px dashed var(--s-line2); font: 800 24px/1 var(--dvc-head); text-transform: uppercase; letter-spacing: .01em; }
.dv-src__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dv-src__f { display: grid; gap: 6px; min-width: 0; }
.dv-src__f--wide { grid-column: 1 / -1; }
.dv-src__f > span { color: var(--s-mute); font: 600 11px/1 var(--dvc-sub); letter-spacing: .14em; text-transform: uppercase; }
.dv-src__f em { font-style: normal; letter-spacing: .04em; text-transform: none; }
.dv-src__f input, .dv-src__f textarea { width: 100%; min-width: 0; padding: 12px 12px; border: 1px solid var(--s-line2); border-radius: 0; background: rgba(0,0,0,.35); color: var(--s-fg);
  font: 400 16px/1.35 var(--dvc-body); outline: 0; transition: border-color .15s ease, background .15s ease; }
.dv-src__f textarea { resize: vertical; min-height: 84px; }
.dv-src__f input::placeholder, .dv-src__f textarea::placeholder { color: #75746f; }
.dv-src__f input:focus, .dv-src__f textarea:focus { border-color: var(--s-fg); background: rgba(0,0,0,.55); box-shadow: 0 0 0 1px var(--s-fg); }
.dv-src__err { margin: 12px 0 0; color: #f0b49a; font-size: 14px; }
.dv-src__err[hidden] { display: none; }
.dv-src__send { width: 100%; min-height: 54px; margin-top: 16px; border: 0; background: var(--s-fg); color: #000; cursor: pointer;
  font: 700 20px/1 var(--dvc-head); letter-spacing: .05em; text-transform: uppercase; transition: background .15s ease; }
.dv-src__send:hover { background: #fff; }
.dv-src__send:disabled { opacity: .6; cursor: default; }
.dv-src__send:focus-visible { outline: 2px solid var(--s-fg); outline-offset: 3px; }
.dv-src__note { margin: 10px 0 0; color: var(--s-mute); font-size: 13px; text-align: center; }
.dv-src__done { position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; gap: 8px; padding: 28px; background: #121211; }
.dv-src__done[hidden] { display: none; }
.dv-src__done-t { margin: 0; font: 800 34px/1 var(--dvc-head); text-transform: uppercase; }
.dv-src__done p { margin: 0; color: #cfcec8; max-width: 38ch; }
.dv-src__done a { margin-top: 8px; color: var(--s-fg); font: 600 12px/1 var(--dvc-sub); letter-spacing: .14em; text-transform: uppercase; text-underline-offset: 4px; }

@media (max-width: 989px) {
  .dv-src { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 36px 28px 30px; }
}
@media (max-width: 749px) {
  .dv-src { margin: 0 -16px 44px; padding: 30px 16px 24px; }
  .dv-src__t { font-size: 40px; }
  .dv-src__p { font-size: 15px; }
  .dv-src__form { padding: 18px 14px 16px; }
  .dv-src__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .dv-src:target, .dv-src.is-arrived { animation: none; } }

/* ==========================================================================
   Help centre (study B, 7 Nov): clonet-style app. Black grain menu on the left, one light pane on
   the right (Find a piece keeps its black sourcing panel). Phones: the menu becomes a row of tabs.
   ========================================================================== */
.dv-hcb { --h-fg: #000; --h-mute: #6b6b6b; --h-line: rgba(0,0,0,.12); --h-line2: rgba(0,0,0,.3); --h-page: #fff; --h-soft: #f3f3f1;
  --k-fg: #f2f1ec; --k-mute: #9a9993; --k-line: rgba(255,255,255,.14); --k-line2: rgba(255,255,255,.32);
  --k-paper: url("/wp-content/themes/devines/assets/img/grain/g-30512a94.png"), radial-gradient(120% 90% at 30% 0%, #1b1b1a 0%, #0e0e0d 70%);
  display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: calc(100dvh - var(--dvc-top)); background: var(--h-page); color: var(--h-fg); }
html[data-mode="dark"] .dv-hcb { --h-fg: #fff; --h-mute: #9a9a9a; --h-line: rgba(255,255,255,.13); --h-line2: rgba(255,255,255,.32); --h-page: #000; --h-soft: #121212; }

/* menu */
.dv-hcb__side { position: sticky; top: var(--dvc-top); align-self: start; height: calc(100dvh - var(--dvc-top)); display: flex; flex-direction: column;
  background: var(--k-paper); color: var(--k-fg); }
.dv-hcb__brand { margin: 0; padding: 24px 22px 18px; border-bottom: 1px solid var(--k-line); font: 800 30px/1 var(--dvc-head); text-transform: uppercase; letter-spacing: .01em; }
.dv-hcb__menu { display: grid; gap: 2px; padding: 12px 10px; overflow-y: auto; }
.dv-hcb__mi { display: flex; align-items: center; gap: 11px; padding: 12px 12px; color: #c4c3bd; text-decoration: none; font: 600 15px/1 var(--dvc-sub); letter-spacing: .02em;
  transition: background .15s ease, color .15s ease; }
.dv-hcb__mi svg { flex: none; opacity: .85; }
.dv-hcb__mi:hover { color: var(--k-fg); background: rgba(255,255,255,.06); }
.dv-hcb__mi.is-on { background: var(--k-fg); color: #000; }
.dv-hcb__mi.is-on svg { opacity: 1; }
.dv-hcb__mi:focus-visible { outline: 2px solid var(--k-fg); outline-offset: 2px; }
.dv-hcb__grp { margin: 16px 12px 6px; padding-top: 14px; border-top: 1px solid var(--k-line); color: var(--k-mute); font: 800 15px/1 var(--dvc-head); text-transform: uppercase; letter-spacing: .04em; }
.dv-hcb__foot { margin-top: auto; padding: 16px 22px 20px; border-top: 1px solid var(--k-line); display: grid; gap: 8px; }
.dv-hcb__reply { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--k-mute); font-size: 12.5px; }
.dv-hcb__reply i { width: 7px; height: 7px; border-radius: 50%; background: #5f9a6b; box-shadow: 0 0 0 3px rgba(95,154,107,.22); }
.dv-hcb__mail { color: var(--k-fg); font-size: 13.5px; text-underline-offset: 3px; }
.dv-hcb__tabs { display: none; }

/* panes */
.dv-hcb__main { min-width: 0; }
.dv-hcb__pane[hidden] { display: none !important; }
.dv-hcb__doc { max-width: 820px; padding: 40px 48px 64px; }
.dv-hcb__doc.dv-ip { margin: 0; color: var(--h-fg); }
.dv-hcb__t { margin: 0 0 10px; font: 800 clamp(40px, 4.4vw, 58px)/.95 var(--dvc-head); text-transform: uppercase; }
.dv-hcb__lead { margin: 0 0 26px; color: var(--h-mute); font-size: 17px; line-height: 1.55; max-width: 52ch; }
.dv-hcb__doc .dv-rte { margin-top: 18px; }
.dv-hcb__prot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1.5px solid var(--h-fg); }
.dv-hcb__prot > div { padding: 18px 24px 20px 0; border-bottom: 1px dashed var(--h-line2); }
.dv-hcb__prot > div:nth-child(odd) { border-right: 1px dashed var(--h-line2); }
.dv-hcb__prot > div:nth-child(even) { padding-left: 24px; padding-right: 0; }
.dv-hcb__prot h3 { margin: 0 0 8px; font: 800 23px/1.05 var(--dvc-head); text-transform: uppercase; letter-spacing: .01em; }
.dv-hcb__prot p { margin: 0; color: var(--h-mute); font-size: 15px; line-height: 1.55; }
.dv-hcb__more { display: flex; flex-wrap: wrap; gap: 22px; margin: 22px 0 0; }
.dv-hcb__more a { color: var(--h-fg); font: 600 12px/1 var(--dvc-sub); letter-spacing: .14em; text-transform: uppercase; text-underline-offset: 4px; }

/* chat pane fills the screen */
.dv-hcb__pane--chat { height: calc(100dvh - var(--dvc-top)); display: flex; flex-direction: column; }
.dv-hcb__app { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dv-hcb__app .dvc-help__main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dv-hcb__app .dvc-help__main > .dvc-shell { flex: 1; height: auto; min-height: 0; border: 0; }
.dv-hcb__app .dvc-app__loading { margin: auto; color: var(--h-mute); }
.dv-hcb .dvc-help__out { margin: auto; max-width: 400px; padding: 32px 22px; display: grid; justify-items: center; gap: 12px; text-align: center; color: var(--h-mute); }
.dv-hcb .dvc-help__shield { color: var(--h-fg); }
.dv-hcb .dvc-help__out p.dvc-help__title { margin: 2px 0 0; font: 800 36px/1 var(--dvc-head); text-transform: uppercase; color: var(--h-fg); }
.dv-hcb .dvc-help__out p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.dv-hcb .dvc-help__out .dvc-btn { min-height: 50px; padding: 0 30px; margin-top: 6px; border-radius: 0; font: 700 18px/1 var(--dvc-head); letter-spacing: .05em; text-transform: uppercase; }
.dv-hcb .dvc-help__out .dvc-help__hint { font-size: 12.5px; }
.dv-hcb .dvc-welcome__mark { background: var(--h-fg); color: var(--h-page); }
.dv-hcb__me { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; padding: 10px 22px; border-top: 1px solid var(--h-line); color: var(--h-mute); font-size: 12.5px; }
.dv-hcb__me span { margin-right: auto; }
.dv-hcb__me a, .dv-hcb__me button { padding: 0; border: 0; background: none; color: var(--h-fg); cursor: pointer; font: 600 11px/1 var(--dvc-sub); letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.dv-hcb__noscript { margin: auto; padding: 24px; }

/* Find a piece: the sourcing panel fills the pane */
.dv-hcb__pane--src { min-height: calc(100dvh - var(--dvc-top)); background: var(--k-paper); }
.dv-hcb__pane--src .dv-src { margin: 0; min-height: 100%; background: none; padding: 48px 48px 56px; }

/* phones + tablets: tabs instead of the menu */
@media (max-width: 899px) {
  .dv-hcb { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .dv-hcb__side { display: none; }
  .dv-hcb__tabs { position: sticky; top: var(--dvc-top); z-index: 5; display: flex; gap: 22px; padding: 0 16px; overflow-x: auto; scrollbar-width: none;
    background: var(--k-paper); }
  .dv-hcb__tabs::-webkit-scrollbar { display: none; }
  .dv-hcb__tabs a { flex: none; padding: 15px 0 13px; border-bottom: 2px solid transparent; color: var(--k-mute); text-decoration: none; font: 600 13px/1 var(--dvc-sub); letter-spacing: .12em; text-transform: uppercase; }
  .dv-hcb__tabs a.is-on { color: var(--k-fg); border-bottom-color: var(--k-fg); }
  .dv-hcb__pane--chat { height: calc(100dvh - var(--dvc-top) - 44px); }
  .dv-hcb__doc { padding: 26px 16px 48px; }
  .dv-hcb__prot { grid-template-columns: minmax(0, 1fr); }
  .dv-hcb__prot > div, .dv-hcb__prot > div:nth-child(even) { padding: 16px 0; border-right: 0; }
  .dv-hcb__pane--src { min-height: 0; }
  .dv-hcb__pane--src .dv-src { padding: 28px 16px 32px; }
  .dv-hcb__me { padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) { .dv-hcb__mi { transition: none; } }

/* Help centre fixes (7 Nov): resource panes keep the readable column + room under the title;
   Find a piece on plain black with the request form on the grainy grey paper */
.dv-hcb .dv-hcb__doc, .dv-hcb .dv-hcb__doc.dv-ip { max-width: 860px; margin: 0; padding: 40px 48px 64px; }
.dv-hcb .dv-hcb__doc > .dv-hcb__t { margin-bottom: 28px; }
.dv-hcb .dv-hcb__doc > .dv-rte { margin-top: 0; }
.dv-hcb .dv-hcb__doc .dv-rte > h2:first-child { margin-top: 0; }
.dv-hcb .dv-hcb__pane--src { background: #000; }
.dv-hcb .dv-hcb__pane--src .dv-src { background: none; }
.dv-hcb .dv-src__form { border: 0; background: var(--k-paper); box-shadow: 0 0 0 1px rgba(255,255,255,.1); }
.dv-hcb .dv-src__done { background: var(--k-paper); }
@media (max-width: 899px) {
  .dv-hcb .dv-hcb__doc, .dv-hcb .dv-hcb__doc.dv-ip { padding: 26px 16px 48px; }
  .dv-hcb .dv-hcb__doc > .dv-hcb__t { margin-bottom: 20px; }
}
/* FAQ / Shipping / Returns use the whole pane on desktop */
@media (min-width: 900px) {
  .dv-hcb .dv-hcb__doc, .dv-hcb .dv-hcb__doc.dv-ip { max-width: none; padding: 44px 56px 72px; }
  .dv-hcb .dv-hcb__doc .dv-rte { max-width: none; font-size: 17px; }
  .dv-hcb .dv-hcb__doc .dv-ip__body--faq details > .dv-ip__drop > * { max-width: 90ch; }
}
/* phones: the tab row scrolls with the page (not stuck under the header) */
@media (max-width: 899px) { .dv-hcb .dv-hcb__tabs { position: static; top: auto; } }
/* desktop: Find a piece fills the whole pane — two equal halves, centred top to bottom */
@media (min-width: 900px) {
  .dv-hcb .dv-hcb__pane--src { display: flex; min-height: calc(100dvh - var(--dvc-top)); }
  .dv-hcb .dv-hcb__pane--src .dv-src { flex: 1; min-height: 0; max-width: none; margin: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 5vw, 88px); padding: 48px clamp(40px, 5vw, 80px); }
  .dv-hcb .dv-src__t { font-size: clamp(48px, 5.4vw, 88px); }
  .dv-hcb .dv-src__p { font-size: 17px; max-width: 52ch; }
  .dv-hcb .dv-src__form { align-self: center; padding: 30px 30px 26px; }
  .dv-hcb .dv-src__steps li { padding: 16px 0; }
}

/* ==========================================================================
   Chat v2 (study A, 7 Nov): matches the Help centre. Black grain conversation list on the left,
   light thread on the right (same in Day and Night mode, so buttons never go white on white).
   Offers print as black receipt slips, order updates as dashed notes. From a product page the
   chat slides in from the right like the bag.
   ========================================================================== */
.dvc-shell, .dvc-window, .dvc-thread { --dvc-ink: #000; --dvc-paper: #fff; --dvc-grey: #6b6b6b; --dvc-line: rgba(0,0,0,.12); --dvc-soft: #f3f3f1; }
.dvc-shell { --k-fg: #f2f1ec; --k-mute: #9a9993; --k-line: rgba(255,255,255,.13); --k-line2: rgba(255,255,255,.3);
  --k-paper: url("/wp-content/themes/devines/assets/img/grain/g-30512a94.png"), radial-gradient(120% 90% at 30% 0%, #1b1b1a 0%, #0e0e0d 70%);
  grid-template-columns: 320px minmax(0, 1fr); border-top: 0; }

/* the list */
.dvc-shell .dvc-list { background: var(--k-paper); color: var(--k-fg); border-right: 0; }
.dvc-shell .dvc-list__head { padding: 24px 20px 4px; align-items: center; }
.dvc-shell .dvc-list__title { font: 800 32px/1 var(--dvc-head); text-transform: uppercase; letter-spacing: .01em; color: var(--k-fg); }
.dvc-shell .dvc-list__acts { gap: 14px; }
.dvc-shell .dvc-list__acts .dvc-link { color: var(--k-mute); font: 600 11px/1 var(--dvc-sub); letter-spacing: .14em; text-transform: uppercase; text-underline-offset: 4px; }
.dvc-shell .dvc-list__acts .dvc-link:hover { color: var(--k-fg); }
.dvc-shell .dvc-list__who { padding: 4px 20px 12px; border: 0; color: var(--k-mute); }
.dvc-list__tabs { display: flex; gap: 18px; padding: 0 20px; border-bottom: 1px solid var(--k-line); }
.dvc-list__tab { padding: 10px 0 9px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--k-mute); cursor: pointer;
  font: 600 11.5px/1 var(--dvc-sub); letter-spacing: .14em; text-transform: uppercase; }
.dvc-list__tab:hover { color: var(--k-fg); }
.dvc-list__tab.is-on { color: var(--k-fg); border-bottom-color: var(--k-fg); }
.dvc-list__tab:focus-visible { outline: 2px solid var(--k-fg); outline-offset: 2px; }
.dvc-list__none { margin: 0; padding: 22px 20px; color: var(--k-mute); font-size: 13.5px; line-height: 1.5; }
.dvc-shell .dvc-item { grid-template-columns: 42px minmax(0, 1fr) auto; padding: 13px 20px; background: none; border-bottom: 1px solid var(--k-line); color: var(--k-fg); }
.dvc-shell .dvc-item:hover { background: rgba(255,255,255,.05); }
.dvc-shell .dvc-item.is-active { background: rgba(255,255,255,.09); box-shadow: inset 3px 0 0 var(--k-fg); }
.dvc-shell .dvc-item__img, .dvc-shell .dvc-item__ph { width: 42px; height: 52px; }
.dvc-shell .dvc-item__ph { background: var(--k-fg); color: #000; }
.dvc-shell .dvc-item__txt strong { font: 700 13.5px/1.2 var(--dvc-sub); letter-spacing: .03em; text-transform: uppercase; }
.dvc-shell .dvc-item__txt span { color: var(--k-mute); font-size: 12.5px; }
.dvc-shell .dvc-item.is-unread .dvc-item__txt span { color: var(--k-fg); font-weight: 500; }
.dvc-shell .dvc-item__side { color: var(--k-mute); font-size: 11px; }
.dvc-shell .dvc-item__dot { width: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #8f3a3a; color: #fff; display: grid; place-items: center; font: 700 10px/1 var(--dvc-body); }
.dvc-shell .dvc-pill { color: var(--k-fg); border-color: var(--k-line2); font: 600 9.5px/1.4 var(--dvc-sub); letter-spacing: .12em; text-transform: uppercase; }
.dvc-shell .dvc-pill--accepted, .dvc-shell .dvc-pill--paid { background: var(--k-fg); color: #000; border-color: var(--k-fg); }
.dvc-shell .dvc-pill--declined, .dvc-shell .dvc-pill--expired { color: var(--k-mute); }

/* the thread */
.dvc-shell .dvc-thread, .dvc-window .dvc-thread { background: #fff; color: #000; }
.dvc-th__head { padding: 14px 24px; }
.dvc-th__img img { width: 48px; height: 60px; }
.dvc-th__title { font: 800 21px/1.05 var(--dvc-head); letter-spacing: .01em; text-transform: uppercase; }
.dvc-th__meta { color: var(--dvc-grey); }
.dvc-day { font: 600 10.5px/1 var(--dvc-sub); letter-spacing: .16em; text-transform: uppercase; color: var(--dvc-grey); }
.dvc-th__msgs { gap: 8px; }
.dvc-bubble { font-size: 14.5px; }
.dvc-msg--staff .dvc-bubble { background: var(--dvc-soft); }
.dvc-thread__empty-title { font: 800 30px/1 var(--dvc-head); text-transform: uppercase; }

/* offers: a black receipt slip */
.dvc-th__msgs .dvc-tag { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 16px; min-width: 220px; padding: 12px 14px; clip-path: none; filter: none;
  box-shadow: none; background: #0e0e0d; color: #f2f1ec; }
.dvc-th__msgs .dvc-tag::before { content: none; }
.dvc-th__msgs .dvc-tag__hole { display: none; }
.dvc-th__msgs .dvc-tag__label { grid-column: 1 / -1; color: #9a9993; font: 600 10px/1.3 var(--dvc-sub); letter-spacing: .16em; text-transform: uppercase; }
.dvc-th__msgs .dvc-tag__price { font: 800 32px/1 var(--dvc-head); color: #f2f1ec; }
.dvc-th__msgs .dvc-tag__status { justify-self: end; padding: 4px 7px; border: 1px solid rgba(255,255,255,.32); color: #f2f1ec; font: 600 10px/1 var(--dvc-sub); letter-spacing: .14em; text-transform: uppercase; }
.dvc-th__msgs .dvc-tag--solid { background: #0e0e0d; }
.dvc-th__msgs .dvc-tag--void { background: #f3f3f1; color: #000; }
.dvc-th__msgs .dvc-tag--void .dvc-tag__price { color: #6b6b6b; }
.dvc-th__msgs .dvc-tag--void .dvc-tag__status { color: #6b6b6b; border-color: rgba(0,0,0,.3); }

/* order updates + events: dashed notes */
.dvc-msg--update { align-self: stretch; max-width: none; }
.dvc-msg--update .dvc-bubble { position: relative; padding: 12px 14px 12px 34px; background: none; border: 1px dashed rgba(0,0,0,.32); color: #000; }
.dvc-msg--update .dvc-bubble::before { content: ""; position: absolute; left: 13px; top: 15px; width: 11px; height: 11px; background: #000; }
.dvc-msg--update .dvc-update__label { font: 700 10.5px/1 var(--dvc-sub); letter-spacing: .14em; text-transform: uppercase; color: #6b6b6b; }
.dvc-event { font: 600 11px/1.4 var(--dvc-sub); letter-spacing: .1em; text-transform: uppercase; }

/* buttons + message box */
.dvc-th__bar { padding: 12px 24px 0; }
.dvc-th__bar .dvc-btn { min-height: 46px; font: 700 17px/1 var(--dvc-head); letter-spacing: .05em; }
.dvc-compose { padding: 12px 24px calc(14px + env(safe-area-inset-bottom)); }
.dvc-compose__input { border: 1px solid rgba(0,0,0,.3); background: #f3f3f1; font-size: 16px; }
.dvc-compose__input:focus { border-color: #000; background: #fff; box-shadow: 0 0 0 1px #000; }
.dvc-compose__attach { border: 1px solid rgba(0,0,0,.3); }

/* ---------- the chat from a product page: slides in from the right, like the bag ---------- */
.dvc-layer--window { align-items: stretch; justify-content: flex-end; padding: 0; }
.dvc-layer--window .dvc-window { width: min(460px, 100%); height: 100%; border: 0; transform: translateX(100%); opacity: 1;
  transition: transform .34s cubic-bezier(.22,1,.36,1); box-shadow: -24px 0 40px rgba(0,0,0,.35); }
.dvc-layer--window.is-open .dvc-window { transform: none; }
.dvc-window .dvc-th__head { padding: 12px 16px; }
.dvc-window .dvc-th__msgs { padding: 16px 16px 8px; }
.dvc-window .dvc-th__bar { padding: 10px 16px 0; }
.dvc-window .dvc-compose { padding-left: 16px; padding-right: 16px; }
.dvc-window .dvc-th__all { color: #6b6b6b; font: 600 10.5px/1 var(--dvc-sub); letter-spacing: .14em; text-transform: uppercase; text-underline-offset: 4px; }

@media (max-width: 989px) {
  .dvc-shell { grid-template-columns: 1fr; }
  .dvc-shell .dvc-list__head { padding-top: 20px; }
  .dvc-th__head { padding: 10px 14px; }
  .dvc-th__bar { padding: 10px 14px 0; }
  .dvc-compose { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 749px) {
  .dvc-layer--window .dvc-window { width: 100%; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .dvc-layer--window .dvc-window { transition: none; } }
/* chat buttons keep black / white in Night mode (the site's dark-mode link colour turned BUY text black on dark grey) */
.dvc-thread .dvc-btn:not(.dvc-btn--ghost), html[data-mode] .dvc-thread a.dvc-btn:not(.dvc-btn--ghost) { background: #000 !important; color: #fff !important; border-color: #000 !important; }
.dvc-thread .dvc-btn:not(.dvc-btn--ghost):hover { background: #262626 !important; }
.dvc-thread .dvc-btn--ghost, html[data-mode] .dvc-thread .dvc-btn--ghost { background: #fff !important; color: #000 !important; border-color: #000 !important; }
.dvc-thread .dvc-btn--ghost:hover { background: #000 !important; color: #fff !important; }
.dvc-thread .dvc-btn .dv-money { color: inherit !important; }
/* header CHAT count: like SAVED (5) on desktop, a small dot-number on the phone icon */
.dv-header__chat .dvc-badge { position: absolute; top: -6px; right: -9px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px;
  background: #8f3a3a; color: #fff; box-shadow: none; font: 700 10px/15px var(--dvc-body); }
@media (min-width: 1200px) {
  .dv-header__chat--desktop .dvc-badge { position: static; min-width: 0; height: auto; padding: 0; margin-left: 4px; border-radius: 0; background: none; color: inherit; font: 700 15px/1 var(--dvc-sub); }
  .dv-header__chat--desktop .dvc-badge::before { content: "("; } .dv-header__chat--desktop .dvc-badge::after { content: ")"; }
}
/* phones / small screens: the count sits on the icon corner */
@media (max-width: 1199px) { .dv-header__chat { position: relative; display: inline-flex; align-items: center; } .dv-header__chat .dvc-badge { top: 50%; right: auto; left: 50%; margin: -15px 0 0 4px; } }

/* ==========================================================================
   Chat + Help centre in Night mode (7 Nov): the thread, the pop-up and the help panes go black
   instead of white. Typed text is always readable (dark on light by day, light on dark by night).
   ========================================================================== */
/* typing: never white on white */
.dvc-compose__input, .dvc-thread textarea, .dvc-thread input { color: #000 !important; caret-color: #000; }

html[data-mode="dark"] .dvc-shell, html[data-mode="dark"] .dvc-window, html[data-mode="dark"] .dvc-thread {
  --dvc-ink: #f2f1ec; --dvc-paper: #0e0e0d; --dvc-grey: #9a9993; --dvc-line: rgba(255,255,255,.13); --dvc-soft: #1d1d1b; }
html[data-mode="dark"] .dvc-shell .dvc-thread, html[data-mode="dark"] .dvc-window .dvc-thread, html[data-mode="dark"] .dvc-window { background: #0e0e0d; color: #f2f1ec; }
html[data-mode="dark"] .dvc-th__head, html[data-mode="dark"] .dvc-th__bar, html[data-mode="dark"] .dvc-compose { background: #0e0e0d; border-color: rgba(255,255,255,.13); }
html[data-mode="dark"] .dvc-th__title { color: #f2f1ec; }
html[data-mode="dark"] .dvc-th__meta, html[data-mode="dark"] .dvc-th__sub { color: #9a9993; }
html[data-mode="dark"] .dvc-th__back, html[data-mode="dark"] .dvc-window .dvc-x { color: #f2f1ec; }
html[data-mode="dark"] .dvc-msg--buyer .dvc-bubble { background: #f2f1ec; color: #000; }
html[data-mode="dark"] .dvc-msg--staff .dvc-bubble { background: #1d1d1b; color: #f2f1ec; }
html[data-mode="dark"] .dvc-msg__time, html[data-mode="dark"] .dvc-day, html[data-mode="dark"] .dvc-event { color: #9a9993; }
html[data-mode="dark"] .dvc-th__msgs .dvc-tag { background: #2a2a28; }
html[data-mode="dark"] .dvc-th__msgs .dvc-tag--void { background: #1d1d1b; color: #f2f1ec; }
html[data-mode="dark"] .dvc-msg--update .dvc-bubble { border-color: rgba(255,255,255,.3); color: #f2f1ec; background: none; }
html[data-mode="dark"] .dvc-msg--update .dvc-bubble::before { background: #f2f1ec; }
html[data-mode="dark"] .dvc-update__link { color: #f2f1ec; }
html[data-mode="dark"] .dvc-welcome__mark { background: #f2f1ec; color: #000; }
html[data-mode="dark"] .dvc-thread__empty, html[data-mode="dark"] .dvc-th__hint { color: #9a9993; }
html[data-mode="dark"] .dvc-thread__empty-title, html[data-mode="dark"] .dvc-th__hint-title { color: #f2f1ec; }
/* buttons: off-white primary, outlined secondary */
html[data-mode="dark"] .dvc-thread .dvc-btn:not(.dvc-btn--ghost), html[data-mode="dark"] .dvc-thread a.dvc-btn:not(.dvc-btn--ghost) { background: #f2f1ec !important; color: #000 !important; border-color: #f2f1ec !important; }
html[data-mode="dark"] .dvc-thread .dvc-btn:not(.dvc-btn--ghost):hover { background: #d9d8d2 !important; }
html[data-mode="dark"] .dvc-thread .dvc-btn--ghost { background: none !important; color: #f2f1ec !important; border-color: rgba(255,255,255,.4) !important; }
html[data-mode="dark"] .dvc-thread .dvc-btn--ghost:hover { border-color: #f2f1ec !important; background: none !important; color: #f2f1ec !important; }
/* message box */
html[data-mode="dark"] .dvc-compose__input, html[data-mode="dark"] .dvc-thread textarea { background: #1a1a19 !important; color: #f2f1ec !important; caret-color: #f2f1ec; border-color: rgba(255,255,255,.3) !important; }
html[data-mode="dark"] .dvc-compose__input::placeholder { color: #7a7974; }
html[data-mode="dark"] .dvc-compose__input:focus { border-color: #f2f1ec !important; box-shadow: 0 0 0 1px #f2f1ec; background: #000 !important; }
html[data-mode="dark"] .dvc-compose__attach { background: none; color: #f2f1ec; border-color: rgba(255,255,255,.3); }
html[data-mode="dark"] .dvc-compose__send.is-ready { background: #f2f1ec; color: #000; border-color: #f2f1ec; }
html[data-mode="dark"] .dvc-compose__send:not(.is-ready) { background: none; color: #6b6a65; border-color: rgba(255,255,255,.2); }
html[data-mode="dark"] .dvc-window .dvc-th__all { color: #9a9993; }
html[data-mode="dark"] .dvc-photo { border-color: rgba(255,255,255,.13); }

/* Help centre panes in Night mode */
html[data-mode="dark"] .dv-hcb { --h-page: #0e0e0d; }
html[data-mode="dark"] .dv-hcb .dvc-help__out .dvc-btn { background: #f2f1ec; color: #000; border-color: #f2f1ec; }
html[data-mode="dark"] .dv-hcb .dvc-help__shield { color: #f2f1ec; }
html[data-mode="dark"] .dv-hcb__me { border-color: rgba(255,255,255,.13); }

/* ---------- loading: the conversation's shape, softly shimmering ---------- */
.dvc-skelwrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dvc-skel { flex: 1; display: flex; flex-direction: column; }
.dvc-skel i { display: block; background: var(--dvc-soft, #f3f3f1); position: relative; overflow: hidden; }
.dvc-skel i::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: dvc-shimmer 1.3s ease-in-out infinite; }
html[data-mode="dark"] .dvc-skel i::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); }
@keyframes dvc-shimmer { to { transform: translateX(100%); } }
.dvc-skel__head { display: flex; gap: 14px; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--dvc-line); }
.dvc-skel__head span { display: grid; gap: 8px; flex: 1; }
.dvc-skel__img { width: 48px; height: 60px; flex: none; }
.dvc-skel__l1 { height: 16px; width: 55%; }
.dvc-skel__l2 { height: 11px; width: 32%; }
.dvc-skel__msgs { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; }
.dvc-skel__m { height: 40px; }
.dvc-skel__m.is-me { align-self: flex-end; }
.dvc-skelwrap { animation: dvc-skel-in .2s ease .12s both; }   /* quick loads never flash it */
@keyframes dvc-skel-in { from { opacity: 0; } to { opacity: 1; } }
.dvc-th__msgs { animation: dvc-thread-in .22s ease both; }
@keyframes dvc-thread-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 989px) { .dvc-skel__head { padding: 10px 14px; } .dvc-skel__msgs { padding: 20px 14px; } }
@media (prefers-reduced-motion: reduce) { .dvc-skel i::after, .dvc-skelwrap, .dvc-th__msgs { animation: none; } }

/* ==========================================================================
   Chat v3 (7 Nov): "messages." wordmark with the pulsing red dot; unread chats marked in the
   product-page rail; offers as real hang tags; Make an offer + Your orders pop-ups restyled.
   ========================================================================== */
/* wordmark on the chat page */
.dvc-shell .dvc-list__title.has-mark { display: flex; align-items: center; margin: 0; line-height: 0; }
.dvc-list__title .dv-rail__mark { display: block; height: 27px; width: auto; color: var(--k-fg, #f2f1ec); }
.dvc-list__title .dv-rail__markdot { fill: #a04848; animation: dvc-markdot 2.4s ease-in-out infinite; }
@keyframes dvc-markdot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* product-page rail: new messages */
.dvc-rail-item__pic { position: relative; flex: none; display: block; }
.dvc-rail-item__new { position: absolute; top: -6px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #a04848; color: #fff;
  font: 700 10px/17px var(--dvc-body); text-align: center; box-shadow: 0 0 0 2px var(--p-bg, #000); animation: dvc-new 2.4s ease-in-out infinite; }
@keyframes dvc-new { 0%, 100% { box-shadow: 0 0 0 2px var(--p-bg, #000), 0 0 0 2px rgba(160,72,72,.5); } 50% { box-shadow: 0 0 0 2px var(--p-bg, #000), 0 0 0 6px rgba(160,72,72,0); } }
.dv-rail .dvc-rail-item.is-unread { position: relative; }
.dv-rail .dvc-rail-item.is-unread::before { content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 2px; background: #a04848; }
.dv-rail .dvc-rail-item.is-unread .dvc-rail-item__txt strong { color: var(--p-fg); font-weight: 800; }
.dv-rail .dvc-rail-item.is-unread .dvc-rail-item__txt span { color: var(--p-fg) !important; }
.dvc-rail-item.is-unread strong::after { content: none !important; }

/* ---------- offers in the conversation: a hang tag ---------- */
.dvc-th__msgs .dvc-tag { --tag: #161615; --tag-fg: #f2f1ec; --tag-mute: #9a9993; --tag-ink: rgba(255,255,255,.22);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 14px; min-width: 250px; padding: 14px 16px 14px 42px;
  background: url("/wp-content/themes/devines/assets/img/grain/g-02d56c55.png"), var(--tag) !important;
  color: var(--tag-fg); clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 calc(100% - 20px), 0 20px); filter: none; box-shadow: none; }
.dvc-th__msgs .dvc-tag::after { content: ""; position: absolute; inset: 6px 6px 6px 28px; border: 1px dashed var(--tag-ink); pointer-events: none; }
.dvc-th__msgs .dvc-tag::before { content: none; }
.dvc-th__msgs .dvc-tag__hole { display: block; position: absolute; left: 10px; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-radius: 50%;
  background: var(--dvc-paper, #fff); box-shadow: 0 0 0 2px #6b6b6b, 0 0 0 3px #2a2a2a, inset 0 1px 2px rgba(0,0,0,.6); }
.dvc-th__msgs .dvc-tag__head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 0 8px; border-bottom: 1px dashed var(--tag-ink); }
.dvc-th__msgs .dvc-tag__head b { font: 700 13px/1 var(--dvc-sub); letter-spacing: .04em; text-transform: none; }
.dvc-th__msgs .dvc-tag__label { color: var(--tag-mute); font: 600 10px/1 var(--dvc-sub); letter-spacing: .16em; text-transform: uppercase; }
.dvc-th__msgs .dvc-tag__price { padding-top: 2px; font: 800 34px/1 var(--dvc-head); color: var(--tag-fg); }
.dvc-th__msgs .dvc-tag__status { justify-self: end; padding: 4px 7px; border: 1px solid var(--tag-ink); color: var(--tag-fg); font: 600 10px/1 var(--dvc-sub); letter-spacing: .14em; text-transform: uppercase; }
.dvc-th__msgs .dvc-tag--solid { --tag: #161615; }
.dvc-th__msgs .dvc-tag--void { --tag: #e9e9e6; --tag-fg: #6b6b6b; --tag-mute: #8a8a85; --tag-ink: rgba(0,0,0,.2); }
html[data-mode="dark"] .dvc-th__msgs .dvc-tag { --tag: #2a2a28; }
html[data-mode="dark"] .dvc-th__msgs .dvc-tag--void { --tag: #1d1d1b; --tag-fg: #9a9993; --tag-ink: rgba(255,255,255,.18); }
html[data-mode="dark"] .dvc-th__msgs .dvc-tag__hole { background: #0e0e0d; }
.dvc-msg--buyer .dvc-tag { margin-left: auto; }

/* ---------- Make an offer pop-up ---------- */
.dvc-offer { --o-fg: #000; --o-mute: #6b6b6b; --o-line: rgba(0,0,0,.14); --o-page: #fff; --o-soft: #f3f3f1;
  max-width: 460px; border: 0 !important; background: var(--o-page); color: var(--o-fg); box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
html[data-mode="dark"] .dvc-offer { --o-fg: #f2f1ec; --o-mute: #9a9993; --o-line: rgba(255,255,255,.14); --o-page: #0e0e0d; --o-soft: #1a1a19; }
.dvc-offer__top { padding: 18px 20px 14px 22px; border-bottom: 1px solid var(--o-line); }
.dvc-offer__title { font: 800 30px/1 var(--dvc-head); text-transform: uppercase; color: var(--o-fg); }
.dvc-offer .dvc-x--box { border: 0; color: var(--o-fg); }
.dvc-offer .dvc-x--box:hover { background: var(--o-soft); color: var(--o-fg); }
.dvc-offer__body { padding: 18px 22px 22px; gap: 12px; }
.dvc-offer__piece { margin: 0 0 4px; padding: 0 0 16px; border: 0; border-bottom: 1px dashed var(--o-line); }
.dvc-offer__piece img { width: 64px; height: 80px; }
.dvc-offer__brand { font: 700 12px/1.1 var(--dvc-sub); letter-spacing: .12em; text-transform: uppercase; color: var(--o-mute); }
.dvc-offer__name { font: 700 15px/1.25 var(--dvc-sub); letter-spacing: .02em; text-transform: uppercase; color: var(--o-fg); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dvc-offer__size { color: var(--o-mute); }
.dvc-offer__price { color: var(--o-fg); }
.dvc-offer__incl { color: var(--o-mute); border-bottom: 0; padding: 0; font-size: 12px; }
.dvc-offer__lbl { margin: 4px 0 0; color: var(--o-mute); font: 600 11px/1 var(--dvc-sub); letter-spacing: .16em; text-transform: uppercase; }
/* the amount on a hang tag */
.dvc-offer__field { position: relative; gap: 10px; padding: 6px 18px 6px 46px; border: 0 !important; color: #f2f1ec;
  background: url("/wp-content/themes/devines/assets/img/grain/g-02d56c55.png"), #161615 !important;
  clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px), 0 22px); box-shadow: none !important; }
.dvc-offer__field::after { content: ""; position: absolute; inset: 6px 6px 6px 30px; border: 1px dashed rgba(255,255,255,.22); pointer-events: none; transition: border-color .15s ease; }
.dvc-offer__field:focus-within::after { border-color: rgba(255,255,255,.6); }
.dvc-offer__field.is-invalid::after { border-color: #e08a4f; border-style: solid; }
.dvc-offer__hole { position: absolute; left: 11px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--o-page);
  box-shadow: 0 0 0 2px #6b6b6b, 0 0 0 3px #2a2a2a, inset 0 1px 2px rgba(0,0,0,.6); }
.dvc-offer__sym { color: #f2f1ec; font: 800 30px/1 var(--dvc-head); }
.dvc-offer__input { color: #f2f1ec !important; caret-color: #f2f1ec; font: 800 40px/1 var(--dvc-head) !important; padding: 16px 0 !important; }
.dvc-offer__input::placeholder { color: #5f5e5a; }
.dvc-offer__code { color: #9a9993; }
.dvc-offer__help { color: var(--o-mute); }
.dvc-offer .dvc-error { color: #c8632f; }
.dvc-offer__btns { grid-template-columns: 1fr 1.6fr; margin-top: 8px; }
.dvc-offer .dvc-btn { min-height: 50px; font: 700 18px/1 var(--dvc-head); letter-spacing: .05em; text-transform: uppercase; }
.dvc-offer .dvc-btn:not(.dvc-btn--ghost) { background: var(--o-fg); color: var(--o-page); border-color: var(--o-fg); }
.dvc-offer .dvc-btn:not(.dvc-btn--ghost):disabled { background: var(--o-soft); color: var(--o-mute); border-color: var(--o-soft); }
.dvc-offer .dvc-btn--ghost { background: none; color: var(--o-fg); border: 1px solid var(--o-line); }
.dvc-offer .dvc-btn--ghost:hover { border-color: var(--o-fg); background: none; color: var(--o-fg); }

/* ---------- Your orders pop-up ---------- */
.dvc-orders-card { --o-fg: #000; --o-mute: #6b6b6b; --o-line: rgba(0,0,0,.14); --o-page: #fff; --o-soft: #f3f3f1;
  max-width: 600px; padding: 0 !important; border: 0 !important; background: var(--o-page); color: var(--o-fg); box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
html[data-mode="dark"] .dvc-orders-card { --o-fg: #f2f1ec; --o-mute: #9a9993; --o-line: rgba(255,255,255,.14); --o-page: #0e0e0d; --o-soft: #1a1a19; }
.dvc-orders-card .dvc-card__top { margin: 0; padding: 18px 20px 14px 22px; border-bottom: 1px solid var(--o-line); position: sticky; top: 0; z-index: 1; background: var(--o-page); }
.dvc-orders-card .dvc-title { font: 800 30px/1 var(--dvc-head); text-transform: uppercase; color: var(--o-fg); }
.dvc-orders-card .dvc-x { border: 0; color: var(--o-fg); }
.dvc-orders-card .dvc-orders { padding: 14px 22px 22px; gap: 0; }
.dvc-order { grid-template-columns: 64px minmax(0, 1fr) auto; padding: 14px 0; border: 0; border-bottom: 1px dashed var(--o-line); background: none; color: var(--o-fg); }
.dvc-order:hover { border-color: var(--o-line); background: var(--o-soft); }
.dvc-order__img { background: var(--o-soft); }
.dvc-order__name { font: 700 14px/1.25 var(--dvc-sub); letter-spacing: .03em; }
.dvc-order__meta { color: var(--o-mute); font: 500 12px/1.3 var(--dvc-sub); letter-spacing: .06em; text-transform: uppercase; }
.dvc-order__bar { gap: 4px; }
.dvc-order__bar i { height: 8px; width: 8px; justify-self: start; background: none; border: 1.5px solid var(--o-line); }
.dvc-order__bar i.is-done { background: var(--o-fg); border-color: var(--o-fg); }
.dvc-order__bar i.is-next { border-color: var(--o-fg); }
.dvc-order__status { font: 700 13px/1.2 var(--dvc-sub); letter-spacing: .1em; text-transform: uppercase; }
.dvc-order__total { font: 700 16px/1 var(--dvc-sub); }
.dvc-orders-card .dvc-sub { color: var(--o-mute); padding: 6px 0; }
.dvc-orders-card .dvc-order-detail { margin: 0; color: var(--o-fg); }
@media (max-width: 749px) {
  .dvc-offer__body { padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); }
  .dvc-offer__input { font-size: 34px !important; }
  .dvc-orders-card .dvc-orders { padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .dvc-list__title .dv-rail__markdot, .dvc-rail-item__new { animation: none; } }
/* wordmark on its own line, links under it */
.dvc-shell .dvc-list__head { flex-direction: column; align-items: flex-start; gap: 12px; }
.dvc-shell .dvc-list__acts { order: 3; }
.dvc-shell .dvc-list__acts .dvc-link { white-space: nowrap; }
/* account at the bottom of the list (like the Help centre menu foot) */
.dvc-shell .dvc-list__head { padding: 24px 20px 18px; }
.dvc-list__foot { margin-top: auto; padding: 14px 20px 18px; border-top: 1px solid var(--k-line); display: grid; gap: 10px; }
.dvc-shell .dvc-list__foot .dvc-list__who { padding: 0; margin: 0; color: var(--k-mute); font-size: 12.5px; }
.dvc-shell .dvc-list__foot .dvc-list__acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dvc-shell .dvc-list__foot .dvc-link { display: inline-flex; align-items: center; justify-content: center; height: 34px; border: 1px solid var(--k-line2); color: var(--k-fg);
  text-decoration: none; font: 600 11px/1 var(--dvc-sub); letter-spacing: .12em; text-transform: uppercase; }
.dvc-shell .dvc-list__foot .dvc-link:hover { border-color: var(--k-fg); color: var(--k-fg); }

/* ==========================================================================
   Chat pop-up v3 (7 Nov): black grain strip on top ("messages." wordmark, All chats, close),
   the piece row under it, then the conversation. Log-in pop-up restyled like Make an offer.
   ========================================================================== */
.dvc-top { display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 18px; color: #f2f1ec; flex: none;
  background: url("/wp-content/themes/devines/assets/img/grain/g-30512a94.png"), radial-gradient(120% 120% at 20% 0%, #1b1b1a 0%, #0e0e0d 70%); }
.dvc-top__mark { display: block; line-height: 0; color: #f2f1ec; margin-right: auto; }
.dvc-top__mark .dv-rail__mark { display: block; height: 22px; width: auto; color: #f2f1ec; }
.dvc-top__mark .dv-rail__markdot { fill: #a04848; animation: dvc-markdot 2.4s ease-in-out infinite; }
.dvc-top__all { color: #9a9993; font: 600 11px/1 var(--dvc-sub); letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.dvc-top__all:hover { color: #f2f1ec; }
.dvc-top .dvc-x { margin: 0; width: 38px; height: 38px; border: 0 !important; color: #f2f1ec !important; background: none !important; }
.dvc-top .dvc-x:hover { background: rgba(255,255,255,.08) !important; }
.dvc-window .dvc-th__head { padding: 12px 18px; gap: 12px; }
.dvc-window .dvc-th__img img { width: 44px; height: 56px; }
.dvc-window .dvc-th__title { font-size: 18px; }
.dvc-window .dvc-th__sub { font-size: 12.5px; }
html[data-mode="dark"] .dvc-top { border-bottom: 1px solid rgba(255,255,255,.1); }

/* ---------- log-in pop-up ---------- */
.dvc-login { --o-fg: #000; --o-mute: #6b6b6b; --o-line: rgba(0,0,0,.14); --o-page: #fff; --o-soft: #f3f3f1;
  max-width: 440px; padding: 0 !important; border: 0 !important; background: var(--o-page); color: var(--o-fg); box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
html[data-mode="dark"] .dvc-login { --o-fg: #f2f1ec; --o-mute: #9a9993; --o-line: rgba(255,255,255,.14); --o-page: #0e0e0d; --o-soft: #1a1a19; }
.dvc-login .dvc-card__top { margin: 0; padding: 14px 14px 12px 22px; border-bottom: 1px solid var(--o-line); }
.dvc-login .dvc-steps__bar { background: var(--o-line); height: 2px; }
.dvc-login .dvc-steps__bar i { background: var(--o-fg); }
.dvc-login .dvc-steps__txt { color: var(--o-mute); font: 600 11px/1 var(--dvc-sub); letter-spacing: .14em; text-transform: uppercase; }
.dvc-login .dvc-x { border: 0 !important; color: var(--o-fg); margin: 0; }
.dvc-login .dvc-x:hover { background: var(--o-soft); }
.dvc-login .dvc-piece { margin: 0; padding: 14px 22px; background: none; border-bottom: 1px dashed var(--o-line); }
.dvc-login .dvc-piece__img { width: 48px; height: 60px; }
.dvc-login .dvc-piece__lead { color: var(--o-mute); font: 600 10.5px/1 var(--dvc-sub); letter-spacing: .14em; text-transform: uppercase; }
.dvc-login .dvc-piece__title { font: 700 14.5px/1.25 var(--dvc-sub); letter-spacing: .02em; text-transform: uppercase; color: var(--o-fg); }
.dvc-login .dvc-piece__meta { color: var(--o-mute); }
.dvc-login .dvc-login__body { padding: 18px 22px 22px; }
.dvc-login .dvc-title { font: 800 30px/1 var(--dvc-head); text-transform: uppercase; color: var(--o-fg); margin-bottom: 6px; }
.dvc-login .dvc-sub { color: var(--o-mute); font-size: 14.5px; }
.dvc-login .dvc-label { color: var(--o-mute); font: 600 11px/1 var(--dvc-sub); letter-spacing: .16em; text-transform: uppercase; }
.dvc-login input[type=email] { border: 1px solid var(--o-line) !important; background: var(--o-soft) !important; color: var(--o-fg) !important; caret-color: var(--o-fg); border-radius: 0; }
.dvc-login input[type=email]:focus { border-color: var(--o-fg) !important; box-shadow: 0 0 0 1px var(--o-fg) !important; background: var(--o-page) !important; }
.dvc-login input[type=email]::placeholder { color: var(--o-mute); }
.dvc-login .dvc-code__box { border: 1px solid var(--o-line); background: var(--o-soft); color: var(--o-fg); }
.dvc-login .dvc-code__box:focus { border-color: var(--o-fg); box-shadow: inset 0 -3px 0 var(--o-fg); background: var(--o-page); }
.dvc-login .dvc-btn { min-height: 50px; font: 700 18px/1 var(--dvc-head); letter-spacing: .05em; text-transform: uppercase; background: var(--o-fg); color: var(--o-page); border-color: var(--o-fg); }
.dvc-login .dvc-btn:hover { opacity: .88; background: var(--o-fg); }
.dvc-login .dvc-btn:disabled { background: var(--o-soft); color: var(--o-mute); border-color: var(--o-soft); opacity: 1; }
.dvc-login .dvc-fine { color: var(--o-mute); }
.dvc-login .dvc-fine a, .dvc-login .dvc-link { color: var(--o-fg); }
@media (max-width: 749px) {
  .dvc-layer--center.dvc-layer--login .dvc-card { border: 0 !important; padding: 0 !important; }
  .dvc-login .dvc-login__body { padding: 16px 18px 20px; }
}

/* ==========================================================================
   Chat page, logged out (7 Nov): the same layout as when logged in. Black grain list on the left
   as a preview (wordmark, tabs, three empty rows), the log-in on the right. Light by day, black by night.
   Help centre: Find a piece follows Day / Night mode.
   ========================================================================== */
.dvc-shell--intro { --i-fg: #000; --i-mute: #6b6b6b; --i-line: rgba(0,0,0,.14); --i-page: #fff; --i-soft: #f3f3f1; }
html[data-mode="dark"] .dvc-shell--intro { --i-fg: #f2f1ec; --i-mute: #9a9993; --i-line: rgba(255,255,255,.14); --i-page: #0e0e0d; --i-soft: #1a1a19; }
.dvc-intro__list .dvc-list__head { padding: 24px 20px 18px; }
.dvc-intro__mark { line-height: 0; }
.dvc-intro__mark .dv-rail__mark { display: block; height: 27px; width: auto; color: #f2f1ec; }
.dvc-intro__mark .dv-rail__markdot { fill: #a04848; animation: dvc-markdot 2.4s ease-in-out infinite; }
.dvc-intro__list .dvc-list__tab { cursor: default; }
.dvc-intro__ghost { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; padding: 13px 20px; border-bottom: 1px solid var(--k-line); opacity: .7; }
.dvc-intro__ghost i { display: block; background: rgba(255,255,255,.07); }
.dvc-intro__gimg { width: 42px; height: 52px; }
.dvc-intro__ghost span { display: grid; gap: 8px; }
.dvc-intro__ghost span i { height: 9px; }

.dvc-shell--intro .dvc-intro { max-width: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--i-page); color: var(--i-fg); overflow-y: auto; }
.dvc-intro__in { width: min(520px, 100%); padding: 48px 32px; }
.dvc-intro__mob { display: none; }
.dvc-shell--intro .dvc-intro__title { margin: 0 0 14px; max-width: 14ch; font: 800 clamp(44px, 4.6vw, 64px)/.92 var(--dvc-head); text-transform: uppercase; color: var(--i-fg); }
.dvc-shell--intro .dvc-intro__lead { margin: 0 0 26px; color: var(--i-mute); font-size: 16px; line-height: 1.55; }
.dvc-shell--intro .dvc-how { margin: 0 0 28px; border-top: 1.5px solid var(--i-fg); }
.dvc-shell--intro .dvc-how li { padding: 14px 0; grid-template-columns: 44px 1fr; border-bottom: 1px dashed var(--i-line); }
.dvc-shell--intro .dvc-how li::before { font: 800 30px/1 var(--dvc-head); color: var(--i-fg); }
.dvc-shell--intro .dvc-how strong { font: 700 13px/1.3 var(--dvc-sub); letter-spacing: .12em; text-transform: uppercase; color: var(--i-fg); }
.dvc-shell--intro .dvc-how span { color: var(--i-mute); font-size: 14.5px; }
.dvc-intro__btn { width: 100%; min-height: 54px !important; font: 700 20px/1 var(--dvc-head) !important; letter-spacing: .05em; text-transform: uppercase;
  background: var(--i-fg) !important; color: var(--i-page) !important; border-color: var(--i-fg) !important; }
.dvc-intro__btn:hover { opacity: .88; }
.dvc-intro__fine { margin: 12px 0 0; color: var(--i-mute); font-size: 13px; text-align: center; }
.dvc-intro__fine a { color: var(--i-fg); text-underline-offset: 3px; }
@media (max-width: 989px) {
  .dvc-intro__list { display: none !important; }
  .dvc-shell--intro { height: auto; min-height: calc(100dvh - var(--dvc-top)); }
  .dvc-shell--intro .dvc-intro { align-items: flex-start; }
  .dvc-intro__in { padding: 0 0 36px; width: 100%; }
  .dvc-intro__mob { display: block; padding: 22px 16px 20px; margin: 0 0 26px; line-height: 0;
    background: url("/wp-content/themes/devines/assets/img/grain/g-30512a94.png"), #121211; }
  .dvc-intro__mob .dv-rail__mark { height: 24px; }
  .dvc-shell--intro .dvc-intro__title, .dvc-shell--intro .dvc-intro__lead, .dvc-shell--intro .dvc-how, .dvc-intro__btn, .dvc-intro__fine { margin-left: 16px !important; margin-right: 16px !important; }
  .dvc-intro__btn { width: calc(100% - 32px); }
  .dvc-shell--intro .dvc-intro__title { font-size: 46px; }
  .dvc-chat-page .dv-footer, .dvc-chat-page footer.site-footer { display: block; }
}

/* Help centre: Find a piece in Day mode = light page, grey paper form; Night mode keeps black */
html:not([data-mode="dark"]) .dv-hcb .dv-hcb__pane--src { background: #fff; }
html:not([data-mode="dark"]) .dv-hcb .dv-src { --s-fg: #000; --s-mute: #6b6b6b; --s-line: rgba(0,0,0,.12); --s-line2: rgba(0,0,0,.3); color: #000; }
html:not([data-mode="dark"]) .dv-hcb .dv-src__kicker, html:not([data-mode="dark"]) .dv-hcb .dv-src__steps span, html:not([data-mode="dark"]) .dv-hcb .dv-src__note { color: #6b6b6b; }
html:not([data-mode="dark"]) .dv-hcb .dv-src__p { color: #3a3a3a; }
html:not([data-mode="dark"]) .dv-hcb .dv-src__steps li::before, html:not([data-mode="dark"]) .dv-hcb .dv-src__steps strong { color: #000; }
html:not([data-mode="dark"]) .dv-hcb .dv-src__form { background: url("/wp-content/themes/devines/assets/img/grain/g-a911491e.png"), #efeee9; box-shadow: none; color: #000; }
html:not([data-mode="dark"]) .dv-hcb .dv-src__ft { border-color: rgba(0,0,0,.25); }
html:not([data-mode="dark"]) .dv-hcb .dv-src__f > span { color: #6b6b6b; }
html:not([data-mode="dark"]) .dv-hcb .dv-src__f input, html:not([data-mode="dark"]) .dv-hcb .dv-src__f textarea { background: #fff; color: #000; border-color: rgba(0,0,0,.25); }
html:not([data-mode="dark"]) .dv-hcb .dv-src__f input:focus, html:not([data-mode="dark"]) .dv-hcb .dv-src__f textarea:focus { border-color: #000; box-shadow: 0 0 0 1px #000; background: #fff; }
html:not([data-mode="dark"]) .dv-hcb .dv-src__f input::placeholder, html:not([data-mode="dark"]) .dv-hcb .dv-src__f textarea::placeholder { color: #8a8a85; }
html:not([data-mode="dark"]) .dv-hcb .dv-src__send { background: #000; color: #fff; }
html:not([data-mode="dark"]) .dv-hcb .dv-src__send:hover { background: #262626; }
html:not([data-mode="dark"]) .dv-hcb .dv-src__done { background: #efeee9; color: #000; }
html:not([data-mode="dark"]) .dv-hcb .dv-src__done p { color: #3a3a3a; }
html:not([data-mode="dark"]) .dv-hcb .dv-src__done a { color: #000; }
html:not([data-mode="dark"]) .dv-hcb .dv-src__err { color: #b4531f; }
/* log-in (and offer / orders) pop-ups: the page behind is blurred */
.dvc-layer--center .dvc-scrim { background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html[data-mode="dark"] .dvc-layer--center .dvc-scrim { background: rgba(0,0,0,.55); }
@media (prefers-reduced-transparency: reduce) { .dvc-layer--center .dvc-scrim { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0,0,0,.6); } }

/* opening the chat pop-up: the panel glides in, then its parts settle in one after another (light, once) */
.dvc-layer--window .dvc-scrim { transition: opacity .3s ease; }
.dvc-layer--window .dvc-window { transition: transform .42s cubic-bezier(.22,1,.36,1); }
.dvc-layer--window.is-open.is-entering .dvc-top,
.dvc-layer--window.is-open.is-entering .dvc-th__head,
.dvc-layer--window.is-open.is-entering .dvc-th__msgs,
.dvc-layer--window.is-open.is-entering .dvc-th__bar,
.dvc-layer--window.is-open.is-entering .dvc-compose { animation: dvc-pop-in .45s cubic-bezier(.22,1,.36,1) both; }
.dvc-layer--window.is-open .dvc-top { animation-delay: .12s; }
.dvc-layer--window.is-open .dvc-th__head { animation-delay: .18s; }
.dvc-layer--window.is-open .dvc-th__msgs { animation-delay: .24s; }
.dvc-layer--window.is-open .dvc-th__bar { animation-delay: .3s; }
.dvc-layer--window.is-open .dvc-compose { animation-delay: .34s; }
@keyframes dvc-pop-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.dvc-layer--window.is-open .dvc-top__mark .dv-rail__markdot { animation: dvc-dot-pop .6s cubic-bezier(.34,1.56,.64,1) .45s both, dvc-markdot 2.4s ease-in-out 1.05s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dvc-dot-pop { from { transform: scale(0); } to { transform: scale(1); } }
/* centred pop-ups (log in, offer, orders): a soft rise */
.dvc-layer--center .dvc-card { transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .25s ease; transform: translateY(14px) scale(.985); }
.dvc-layer--center.is-open .dvc-card { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .dvc-layer--window.is-open .dvc-top, .dvc-layer--window.is-open .dvc-th__head, .dvc-layer--window.is-open .dvc-th__msgs,
  .dvc-layer--window.is-open .dvc-th__bar, .dvc-layer--window.is-open .dvc-compose, .dvc-layer--window.is-open .dvc-top__mark .dv-rail__markdot { animation: none; }
  .dvc-layer--center .dvc-card { transform: none; }
}
/* logged-out chat page: the whole page on the grainy dark paper (Day and Night) */
.dvc-shell--intro { --i-fg: #f2f1ec !important; --i-mute: #9a9993 !important; --i-line: rgba(255,255,255,.14) !important; --i-page: #0e0e0d !important; --i-soft: #1a1a19 !important;
  background: var(--k-paper) !important; }
.dvc-shell--intro .dvc-intro { background: none !important; }
.dvc-shell--intro .dvc-intro__list { background: none !important; border-right: 1px solid rgba(255,255,255,.1); }
.dvc-shell--intro .dvc-intro__btn { background: #f2f1ec !important; color: #000 !important; border-color: #f2f1ec !important; }
.dvc-shell--intro .dvc-intro__mob { background: none !important; border-bottom: 1px solid rgba(255,255,255,.1); }

/* phones: the chat pop-up is a solid full screen (no page showing when the keyboard opens), no staggered entrance */
html.dvc-locked, html.dvc-locked body { overflow: hidden; overscroll-behavior: none; }
@media (max-width: 749px) {
  .dvc-layer--window { background: #fff; }
  html[data-mode="dark"] .dvc-layer--window { background: #0e0e0d; }
  .dvc-layer--window::before { content: ""; position: fixed; left: 0; right: 0; top: -100vh; bottom: -100vh; background: inherit; z-index: 0; }
  .dvc-layer--window .dvc-scrim { display: none; }
  .dvc-layer--window .dvc-window { position: relative; z-index: 1; height: 100%; transition: transform .3s cubic-bezier(.22,1,.36,1); }
  .dvc-layer--window.is-open .dvc-top, .dvc-layer--window.is-open .dvc-th__head, .dvc-layer--window.is-open .dvc-th__msgs,
  .dvc-layer--window.is-open .dvc-th__bar, .dvc-layer--window.is-open .dvc-compose { animation: none !important; }
  .dvc-layer--window .dvc-th__msgs { animation: none !important; }
  .dvc-layer--window .dvc-skelwrap { animation-delay: .25s; }
}
/* phones: the chat rises from the bottom over the dimmed page and drops back down on close.
   The solid backdrop (so the page never shows through) is only there while the keyboard is open. */
@media (max-width: 749px) {
  .dvc-layer--window { background: transparent !important; }
  .dvc-layer--window::before { content: none !important; }
  .dvc-layer--window .dvc-scrim { display: block !important; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .3s ease; }
  .dvc-layer--window.is-open .dvc-scrim { opacity: 1; }
  .dvc-layer--window .dvc-window { transform: translate3d(0, 100%, 0); transition: transform .42s cubic-bezier(.16,1,.3,1); will-change: transform; box-shadow: 0 -16px 40px rgba(0,0,0,.3); }
  .dvc-layer--window.is-open .dvc-window { transform: translate3d(0, 0, 0); }
  .dvc-layer--window.is-closing .dvc-window { transform: translate3d(0, 100%, 0); transition: transform .3s cubic-bezier(.4,0,1,1); }
  .dvc-layer--window.is-closing .dvc-scrim { opacity: 0; transition: opacity .3s ease; }
  html.dvc-kb-solid .dvc-layer--window.is-open { background: #fff !important; }
  html.dvc-kb-solid[data-mode="dark"] .dvc-layer--window.is-open { background: #0e0e0d !important; }
}
@media (max-width: 749px) and (prefers-reduced-motion: reduce) { .dvc-layer--window .dvc-window, .dvc-layer--window .dvc-scrim { transition: none; } }