/* ============================================================
   NOVARA — PLP styles (filter drawer, sort, chips, reveal)
   Reuses existing tokens: ink #0E0E0E · surface #141312 · line #272728
   · bone #F7F4EE · mist #8A8A85 · faint #6E6A63 · gold #D4AF37
   ============================================================ */

/* ---- Filter/sort bar ---- */
.nv-plp-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nv-plp-filters-btn, .nv-plp-sort-btn {
  display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #8A8A85;
  transition: color .25s ease;
}
.nv-plp-filters-btn:hover, .nv-plp-sort-btn:hover { color: #F7F4EE; }
.nv-plp-filters-btn:focus-visible, .nv-plp-sort-btn:focus-visible { outline: 2px solid rgba(212,175,55,.6); outline-offset: 4px; color: #F7F4EE; }
.nv-plp-filters-btn[aria-expanded="true"] { color: #F7F4EE; }
.nv-plp-count-badge { color: #D4AF37; }

/* Sort as a styled native select (accessible + functional) */
.nv-plp-sort { position: relative; display: inline-flex; align-items: center; }
.nv-plp-sort select {
  appearance: none; background: transparent; border: 0; cursor: pointer; padding: 0 22px 0 0;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #F7F4EE;
}
.nv-plp-sort select:focus-visible { outline: 2px solid rgba(212,175,55,.6); outline-offset: 4px; }
.nv-plp-sort::after { content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; margin-top: -5px;
  border-right: 1.5px solid #D4AF37; border-bottom: 1.5px solid #D4AF37; transform: rotate(45deg); pointer-events: none; }
.nv-plp-sort select option { background: #0E0E0E; color: #F7F4EE; }

/* ---- Active filter chips ---- */
.nv-plp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nv-plp-chip {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid #272728; background: transparent;
  padding: 6px 10px; cursor: pointer; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #F7F4EE;
  transition: border-color .25s ease, color .25s ease;
}
.nv-plp-chip:hover { border-color: rgba(212,175,55,.6); }
.nv-plp-chip:focus-visible { outline: 2px solid rgba(212,175,55,.6); outline-offset: 2px; }
.nv-plp-chip svg { width: 10px; height: 10px; color: #8A8A85; }
.nv-plp-chip:hover svg { color: #D4AF37; }
.nv-plp-chips-clear { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #8A8A85; background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.nv-plp-chips-clear:hover, .nv-plp-chips-clear:focus-visible { color: #F7F4EE; outline: none; }

/* ---- Filter drawer ---- */
.nv-plp-filter-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.nv-plp-filter-overlay.is-open { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.nv-plp-filter { position: fixed; top: 0; right: 0; z-index: 70; display: flex; flex-direction: column; width: 460px; max-width: 94vw; height: 100%;
  background: #0E0E0E; border-left: 1px solid #272728; visibility: hidden; }
.nv-plp-filter.is-open { visibility: visible; }
.nv-plp-filter__head { display: flex; align-items: center; justify-content: space-between; padding: 26px 32px; border-bottom: 1px solid #272728; }
.nv-plp-filter__title { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: #F7F4EE; }
.nv-plp-filter__close { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #272728; background: transparent; color: #8A8A85; cursor: pointer; transition: color .25s ease, border-color .25s ease; }
.nv-plp-filter__close:hover { color: #F7F4EE; border-color: rgba(212,175,55,.6); }
.nv-plp-filter__close:focus-visible { outline: 2px solid #D4AF37; outline-offset: 2px; }
.nv-plp-filter__body { flex: 1; overflow-y: auto; padding: 8px 32px 28px; }
.nv-plp-facet { border-bottom: 1px solid #272728; padding: 24px 0; }
.nv-plp-facet:last-child { border-bottom: 0; }
.nv-plp-facet__label { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #D4AF37; margin-bottom: 16px; }
.nv-plp-opts { display: flex; flex-direction: column; gap: 4px; }
.nv-plp-opts--wrap { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.nv-plp-opt { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; padding: 7px 0; font-family: "Archivo", system-ui, sans-serif; font-size: 15px; color: #8A8A85; transition: color .2s ease; }
.nv-plp-opt:hover { color: #F7F4EE; }
.nv-plp-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.nv-plp-box { width: 18px; height: 18px; flex: none; border: 1px solid #3a382f; display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s ease, background-color .2s ease; }
.nv-plp-box svg { width: 12px; height: 12px; color: #0E0E0E; opacity: 0; }
.nv-plp-opt input:checked + .nv-plp-box { background: #D4AF37; border-color: #D4AF37; }
.nv-plp-opt input:checked + .nv-plp-box svg { opacity: 1; }
.nv-plp-opt input:checked ~ .nv-plp-opt-label, .nv-plp-opt input:checked ~ span:last-child { color: #F7F4EE; }
.nv-plp-opt input:focus-visible + .nv-plp-box { outline: 2px solid #D4AF37; outline-offset: 2px; }
/* size / swatch pills */
.nv-plp-size { min-width: 44px; text-align: center; border: 1px solid #3a382f; padding: 9px 10px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: #8A8A85; cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.nv-plp-size input { position: absolute; opacity: 0; }
.nv-plp-size:hover { color: #F7F4EE; border-color: rgba(212,175,55,.5); }
.nv-plp-size.is-checked { color: #0E0E0E; background: #F7F4EE; border-color: #F7F4EE; }
.nv-plp-size:focus-within { outline: 2px solid #D4AF37; outline-offset: 2px; }
.nv-plp-swatchopt { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 10px 6px 6px; border: 1px solid transparent; }
.nv-plp-swatchopt input { position: absolute; opacity: 0; }
.nv-plp-swatchopt .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--sw); border: 1px solid rgba(247,244,238,.3); }
.nv-plp-swatchopt span:last-child { font-family: "Archivo", system-ui, sans-serif; font-size: 14px; color: #8A8A85; }
.nv-plp-swatchopt.is-checked { border-color: rgba(212,175,55,.5); }
.nv-plp-swatchopt.is-checked .dot { box-shadow: 0 0 0 2px #0E0E0E, 0 0 0 3px #F7F4EE; }
.nv-plp-swatchopt.is-checked span:last-child { color: #F7F4EE; }
.nv-plp-swatchopt:focus-within { outline: 2px solid #D4AF37; outline-offset: 2px; }
.nv-plp-filter__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 32px; border-top: 1px solid #272728; }
.nv-plp-apply { flex: 1; display: inline-flex; align-items: center; justify-content: center; background: #F7F4EE; color: #0A0A0A; border: 0; cursor: pointer; padding: 14px 20px; font-family: "Archivo", system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; transition: background-color .3s ease; }
.nv-plp-apply:hover { background: #fff; }
.nv-plp-apply:focus-visible { outline: 2px solid #D4AF37; outline-offset: 2px; }
.nv-plp-clear { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #8A8A85; background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.nv-plp-clear:hover, .nv-plp-clear:focus-visible { color: #F7F4EE; outline: none; }

/* ---- Empty state ---- */
.nv-plp-empty { grid-column: 1 / -1; text-align: center; padding: 80px 16px; }

/* ---- Reveal (row-batched) ---- */
@media (prefers-reduced-motion: no-preference) {
  .nv-plp-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0ms); }
  .nv-plp-reveal.is-in { opacity: 1; transform: none; }
  .nv-plp-filter { transform: translateX(100%); transition: transform .44s cubic-bezier(.16,1,.3,1), visibility 0s linear .44s; }
  .nv-plp-filter.is-open { transform: none; transition: transform .44s cubic-bezier(.16,1,.3,1); }
  @media (max-width: 640px) {
    .nv-plp-filter { top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-width: 100%; height: auto; max-height: 88vh; border-left: 0; border-top: 1px solid #272728; border-radius: 14px 14px 0 0; }
    .nv-plp-filter { transform: translateY(100%); }
    .nv-plp-filter.is-open { transform: none; }
  }
}
@media (max-width: 640px) {
  .nv-plp-filter { top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-width: 100%; height: auto; max-height: 88vh; border-left: 0; border-top: 1px solid #272728; border-radius: 14px 14px 0 0; }
}