/* ==========================================================================
   Store overlays (every store page): side drawers (cart right, filters left), search panel,
   quick view modal, cart lines + /cart page. Behaviour: assets/js/store.js
   ========================================================================== */

/* ---------- shared scrim: blurred page + light veil ---------- */
.nk-drawer__scrim, .nk-search__scrim, .nk-modal__scrim {
  position: absolute; inset: 0; background: rgba(62, 62, 62, .22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .45s var(--ease);
}
.is-open > .nk-drawer__scrim, .is-open > .nk-search__scrim, .is-open > .nk-modal__scrim { opacity: 1; }

/* ---------- side drawers ---------- */
.nk-drawer { position: fixed; inset: 0; z-index: 950; }
.nk-drawer__panel {
  position: absolute; top: 0; bottom: 0; width: min(440px, 100vw); display: flex; flex-direction: column;
  background: var(--nk-bg); color: var(--nk-ink); outline: none; transition: transform .55s var(--ease-out);
}
.nk-drawer--left .nk-drawer__panel { left: 0; transform: translateX(-100%); border-right: 1px solid var(--nk-line); }
.nk-drawer--right .nk-drawer__panel { right: 0; transform: translateX(100%); border-left: 1px solid var(--nk-line); }
.nk-drawer.is-open .nk-drawer__panel { transform: none; }
.nk-drawer__head {
  flex: none; display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; height: 68px; padding: 0 16px;
  border-bottom: 1px solid var(--nk-line);
}
.nk-drawer__title { grid-row: 1; grid-column: 2; text-align: center; font: 400 21px/1.2 var(--serif-store); letter-spacing: .01em; }
.nk-drawer__close { grid-row: 1; grid-column: 1; justify-self: start; display: grid; place-items: center; width: 44px; height: 44px; }
.nk-drawer__close .icon { width: 15px; height: 15px; }
.nk-drawer--right .nk-drawer__close { grid-column: 3; justify-self: end; }
.nk-drawer__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 28px; }
.nk-drawer__foot { flex: none; padding: 18px 28px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--nk-line); background: var(--nk-bg); }
.cart-drawer .nk-drawer__panel { width: min(460px, 100vw); }
.cart-drawer .nk-drawer__title { font-size: 23px; }

/* ---------- cart lines (drawer + /cart) ---------- */
.cart-lines { --box: 92px; }
.cart-lines--page { --box: 132px; }
.cart-line {
  display: grid; grid-template-columns: var(--box) minmax(0, 1fr) auto; gap: 18px; align-items: start;
  padding: 22px 0; border-bottom: 1px solid var(--nk-line);
}
.cart-line__media { display: grid; place-items: center; width: var(--box); height: var(--box); background: #f4f1e7; }
.cart-line__hang {
  display: block; aspect-ratio: var(--r, 1); width: min(calc(var(--box) * .74), calc(var(--box) * .74 * var(--r, 1)));
  box-shadow: 0 1px 1px rgba(40, 32, 20, .1), 0 8px 12px -6px rgba(40, 32, 20, .3);
}
.cart-line__hang img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__title { font: 400 19px/1.3 var(--serif-store); }
.cart-line__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.cart-line__meta { margin-top: 6px; font: italic 400 15px/1.55 var(--sans-store); color: var(--nk-muted); }
.cart-line__sold { margin-top: 8px; font: 400 15px/1.5 var(--sans-store); color: var(--nk-sale); }
.cart-line__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 14px; }
.cart-line__unique { font: 400 13px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--nk-muted); }
.cart-line__remove {
  min-height: 40px; padding: 8px 0; font: 400 13px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 4px;
}
.cart-line__remove:hover { text-decoration-color: transparent; }
.cart-line__price { font: 400 16px/1.5 var(--sans); letter-spacing: .06em; white-space: nowrap; }
.cart-line__was { display: block; color: var(--nk-muted); } /* regular price of a work on sale, above what the buyer pays */
.cart-line.is-sold .cart-line__media { opacity: .55; }
.qty { display: inline-flex; align-items: center; height: 42px; border: 1px solid var(--nk-line-strong); }
.qty button { width: 42px; height: 100%; font: 400 19px/1 var(--sans); }
.qty button[disabled] { opacity: .3; cursor: default; }
.qty span { min-width: 26px; text-align: center; font: 500 16px/1 var(--sans); }

.cart-summary { display: grid; gap: 14px; }
.cart-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 400 15px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.cart-summary__row span + span { font: 400 22px/1.1 var(--serif-store); letter-spacing: .01em; text-transform: none; }
.cart-summary__note { font: italic 400 15px/1.55 var(--sans-store); color: var(--nk-muted); text-align: center; }
.cart-summary__checkout { width: 100%; min-height: 52px; font-size: 14px; letter-spacing: .12em; }
.cart-summary__how { font: 400 15px/1.6 var(--sans-store); color: var(--nk-muted); text-align: center; }
.cart-summary__link {
  justify-self: center; padding: 10px 0; font: 400 13px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 4px;
}
.cart-empty { padding: 56px 0; text-align: center; }
.cart-empty__title { font: 400 25px/1.3 var(--serif-store); }
.cart-empty__text { margin-top: 10px; font: italic 400 16px/1.65 var(--sans-store); color: var(--nk-muted); }
.cart-empty .nk-btn { margin-top: 26px; }
.cart-loading, .cart-error { padding: 40px 0; text-align: center; font: italic 400 16px/1.65 var(--sans-store); color: var(--nk-muted); }

/* email-order fallback (after Checkout): the order as copyable text + Debbi's email and phone */
.order-help { display: grid; gap: 14px; margin: 26px 0 30px; padding: 22px 20px 20px; border: 1px solid var(--nk-line-strong); background: #fbf8ee; }
.order-help__title { font: 400 21px/1.3 var(--serif-store); }
.order-help__text { font: 400 16px/1.65 var(--sans-store); color: var(--nk-ink); overflow-wrap: anywhere; }
.order-help__order {
  display: block; width: 100%; min-height: 168px; padding: 12px 14px; resize: vertical;
  border: 1px solid var(--nk-line-strong); border-radius: 0; background: var(--nk-bg); color: var(--nk-ink);
  font: 400 15px/1.55 var(--sans-store);
}
.order-help__order:focus-visible { outline: 2px solid var(--nk-ink); outline-offset: 1px; }
.order-help__copy { justify-self: start; min-height: 48px; font-size: 14px; letter-spacing: .1em; }
.cart-page__help { max-width: 760px; margin: 8px auto 0; scroll-margin: calc(var(--header-offset, 0px) + 24px) 0 24px; }
.cart-page__help .order-help { margin-top: 40px; }

/* ---------- /cart page ---------- */
.cart-page { max-width: 1180px; margin: 0 auto; padding: 28px 28px 96px; }
.cart-page__head { padding: 6px 0 34px; text-align: center; border-bottom: 1px solid var(--nk-line); }
.cart-page__head .nk-breadcrumbs ol { justify-content: center; }
.cart-page__title { margin-top: 18px; font-size: 34px; line-height: 1.15; }
.cart-page__grid { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 64px; align-items: start; }
.cart-lines--page .cart-line { gap: 26px; padding: 30px 0; }
.cart-lines--page .cart-line__title { font-size: 24px; }
.cart-summary--page {
  position: sticky; top: calc(var(--header-offset, 0px) + 24px); margin-top: 30px; padding: 28px;
  border: 1px solid var(--nk-line); gap: 14px;
}
.cart-page__noscript { max-width: 600px; margin: 40px auto 0; text-align: center; font: 400 17px/1.75 var(--sans-store); }

/* ---------- search panel (drops from the top) ---------- */
.nk-search { position: fixed; inset: 0; z-index: 960; }
.nk-search__panel {
  position: absolute; top: 0; left: 0; right: 0; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--nk-bg); color: var(--nk-ink); border-bottom: 1px solid var(--nk-line); outline: none;
  transform: translateY(-101%); transition: transform .55s var(--ease-out);
}
.nk-search.is-open .nk-search__panel { transform: none; }
.nk-search__form {
  display: flex; align-items: center; gap: 18px; height: 100px; padding: 0 28px; border-bottom: 1px solid var(--nk-line);
  transition: box-shadow .25s;
}
.nk-search__form:focus-within { box-shadow: inset 0 -1px 0 var(--nk-ink); }
.nk-search__icon { flex: none; width: 22px; height: 22px; }
.nk-search__input {
  flex: 1 1 auto; min-width: 0; height: 60px; padding: 0; border: 0; border-radius: 0; background: transparent; outline: none;
  font: 400 32px/1.1 var(--serif-store); letter-spacing: .01em; -webkit-appearance: none; appearance: none;
}
.nk-search__input::placeholder { color: var(--nk-muted); opacity: 1; } /* 5.1:1 — the only visible prompt */
.nk-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.nk-search__close { flex: none; justify-content: center; min-width: 44px; min-height: 44px; padding: 10px 0; font-size: 14px; letter-spacing: .1em; }
.nk-search__close .icon { width: 15px; height: 15px; }
.nk-search__results { max-width: 1120px; margin: 0 auto; padding: 26px 28px 40px; }
.nk-search__label { margin-bottom: 16px; font: 400 14px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--nk-muted); }
.nk-search__links { display: flex; flex-wrap: wrap; gap: 12px 30px; }
.nk-search__links a { display: inline-block; padding: 4px 0; font: 400 16px/1.5 var(--sans-store); letter-spacing: .04em; }
.nk-search__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nk-search__suggest + div:not(:empty) { margin-top: 30px; }
.nk-search__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; border-top: 1px solid var(--nk-line); }
.nk-search__item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--nk-line); }
.nk-search__thumb { display: grid; place-items: center; width: 72px; height: 72px; background: #f4f1e7; }
.nk-search__thumb img { width: auto; height: auto; max-width: 58px; max-height: 58px; box-shadow: 0 4px 8px -4px rgba(40, 32, 20, .35); }
.nk-search__title { display: block; font: 400 19px/1.3 var(--serif-store); }
.nk-search__meta { display: block; margin-top: 4px; font: italic 400 15px/1.5 var(--sans-store); color: var(--nk-muted); }
.nk-search__price { font: 400 15px/1.2 var(--sans); letter-spacing: .06em; white-space: nowrap; }
.nk-search__item:hover .nk-search__title, .nk-search__item:focus-visible .nk-search__title { text-decoration: underline; text-underline-offset: 3px; }
.nk-search__all {
  display: inline-block; margin-top: 22px; padding: 8px 0; font: 400 14px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 5px;
}
.nk-search__empty { font: 400 22px/1.4 var(--serif-store); margin-bottom: 26px; }

/* ---------- quick view modal ---------- */
.nk-modal { position: fixed; inset: 0; z-index: 970; display: grid; place-items: center; padding: 24px; }
.nk-modal__panel {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); width: min(1000px, 100%);
  max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; background: var(--nk-bg); color: var(--nk-ink); outline: none;
  box-shadow: 0 40px 90px -40px rgba(29, 34, 42, .5);
  opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); transition: opacity .35s var(--ease), transform .55s var(--ease-out);
}
.nk-modal.is-open .nk-modal__panel { opacity: 1; transform: none; }
.nk-modal__close { position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; background: rgba(255, 253, 246, .85); }
.nk-modal__close .icon { width: 15px; height: 15px; }
.quick-view__media { display: flex; flex-direction: column; background: #f4f1e7; }
.quick-view__stage { position: relative; aspect-ratio: 1; overflow: hidden; container-type: size; display: grid; place-items: center; }
.quick-view__hang {
  display: block; aspect-ratio: var(--r, 1); width: min(70cqw, calc(74cqh * var(--r, 1)));
  box-shadow: 0 1px 1px rgba(40, 32, 20, .1), 0 10px 16px -6px rgba(40, 32, 20, .25), 0 34px 44px -26px rgba(40, 32, 20, .45);
  animation: qv-hang .7s var(--ease-out) both;
}
.quick-view__hang img { width: 100%; height: 100%; object-fit: cover; }
.quick-view__room { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: qv-fade .6s var(--ease) both; }
.quick-view__thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 16px 16px; }
.quick-view__thumbs:empty { display: none; }
.quick-view__thumbs button { width: 60px; height: 60px; padding: 2px; border: 1px solid transparent; opacity: .6; transition: opacity .2s, border-color .2s; }
.quick-view__thumbs button[aria-pressed="true"] { border-color: var(--nk-ink); opacity: 1; }
.quick-view__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.quick-view__info { display: flex; flex-direction: column; gap: 16px; align-self: center; padding: 60px 44px 44px; }
.quick-view__vendor { font: 400 14px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.quick-view__title { font: 400 32px/1.15 var(--serif-store); }
.quick-view__meta { font: italic 400 15px/1.55 var(--sans-store); color: var(--nk-muted); }
.quick-view__price { font: 400 16px/1.3 var(--sans); letter-spacing: .06em; }
.quick-view__was { margin-right: 8px; color: var(--nk-muted); }
.quick-view__excerpt { font: 400 17px/1.7 var(--sans-store); color: var(--nk-muted); }
.quick-view__add { width: 100%; min-height: 52px; margin-top: 10px; font-size: 14px; letter-spacing: .12em; }
.quick-view__details {
  align-self: center; padding: 10px 0; font: 400 14px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 5px;
}
.quick-view__details:hover { text-decoration-color: transparent; }
@keyframes qv-hang { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes qv-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- responsive ---------- */
@media (max-width: 899px) {
  .cart-page__grid { grid-template-columns: 1fr; gap: 0; }
  .cart-summary--page { position: static; }
}
@media (max-width: 699px) {
  .nk-drawer__body { padding: 0 20px; }
  .nk-drawer__foot { padding-left: 20px; padding-right: 20px; }
  .cart-page { padding: 20px 16px 72px; }
  .cart-lines--page { --box: 96px; }
  .cart-lines--page .cart-line { gap: 16px; padding: 22px 0; }
  .cart-lines--page .cart-line__title { font-size: 20px; }
  .cart-page__title { font-size: 29px; }
  .cart-summary--page { padding: 24px 20px; }
  .cart-line { grid-template-columns: var(--box) minmax(0, 1fr); }
  .cart-line__price { grid-column: 2; grid-row: 2; margin-top: -6px; }
  .cart-line__was { display: inline; margin-right: 8px; }
  .nk-search__form { height: 76px; gap: 12px; padding: 0 16px; }
  .nk-search__input { font-size: 24px; }
  .nk-search__results { padding: 20px 16px 32px; }
  .nk-search__list { grid-template-columns: 1fr; }
  .nk-search__item { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 14px; }
  .nk-search__thumb { width: 60px; height: 60px; }
  .nk-search__thumb img { max-width: 50px; max-height: 50px; }
  .nk-modal { padding: 0; place-items: end stretch; }
  .nk-modal__panel { grid-template-columns: 1fr; width: 100%; max-height: 92vh; transform: translate3d(0, 40px, 0); }
  .quick-view__stage { aspect-ratio: 4 / 3; }
  .quick-view__thumbs { gap: 6px; }
  .quick-view__thumbs button { width: 56px; height: 56px; }
  .quick-view__info { padding: 24px 20px calc(28px + env(safe-area-inset-bottom)); gap: 14px; }
  .quick-view__title { font-size: 28px; }
}

/* phones: a painting or room photograph is never cover-cropped — the room view in quick view
   keeps its natural ratio (capped so the details stay in reach), thumbnails show the whole image */
@media (max-width: 767px) {
  .quick-view__stage.is-room { display: block; aspect-ratio: auto; container-type: normal; }
  .quick-view__stage.is-room .quick-view__room {
    position: static; display: block; width: 100%; height: auto; max-height: 62vh; max-height: 62svh; object-fit: contain;
  }
  .quick-view__thumbs img, .cart-line__hang img { object-fit: contain; }
}