/* ==========================================================================
   MAUVIEL SOUTH AFRICA — UX LAYER, PART THREE
   404 · mobile filter drawer · reassurance block · focus states
   ========================================================================== */

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.mv-404{max-width:var(--mv-m);margin:0 auto;padding:var(--mv-space-12) var(--mv-p) var(--mv-space-16);box-sizing:border-box}
.mv-404__eyebrow{font-family:var(--mv-font-data);font-size:.6875rem;letter-spacing:var(--mv-track-data);
  text-transform:uppercase;color:var(--mv-brass-text);margin:0 0 .8rem;font-weight:500}
.mv-404__h{font-family:var(--mv-font-display);font-weight:300;font-size:var(--mv-size-collection);
  color:var(--mv-ink);margin:0 0 .6rem;letter-spacing:.005em;line-height:1.1}
.mv-404__lead{font-family:var(--mv-font-body);font-size:1.0625rem;color:var(--mv-ink);
  max-width:56ch;margin:0 0 var(--mv-space-4)}
.mv-404__form{display:flex;gap:0;max-width:560px;margin:0 0 var(--mv-space-8);border-bottom:1px solid var(--mv-ink)}
.mv-404__form input[type=search]{flex:1 1 auto;min-width:0;border:0;background:transparent;
  font-family:var(--mv-font-body);font-size:1.0625rem;color:var(--mv-ink);padding:.75rem 0;border-radius:0}
.mv-404__form input[type=search]::placeholder{color:var(--mv-ink-55)}
.mv-404__form button{flex:none;border:0;background:transparent;cursor:pointer;
  font-family:var(--mv-font-display);font-size:.75rem;font-weight:500;text-transform:uppercase;
  letter-spacing:var(--mv-track-caps-tight);color:var(--mv-ink);padding:.75rem 0 .75rem 1rem}
.mv-404__form button:hover{color:var(--mv-brass-text)}
.mv-404__cats{list-style:none!important;margin:0 0 var(--mv-space-6);padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1px;background:var(--mv-ink-25);
  border:1px solid var(--mv-ink-25);max-width:1100px}
.mv-404__cats>li{list-style:none!important;background:#fff}
.mv-404__cats>li::marker,.mv-404__cats>li::before{content:none!important;display:none!important}
.mv-404__cats a{display:flex;flex-direction:column;gap:.2rem;padding:1rem 1.1rem;text-decoration:none;min-height:44px}
.mv-404__cats a:hover{background:var(--mv-paper-cool)}
.mv-404__cat{font-family:var(--mv-font-display);font-size:1rem;font-weight:400;color:var(--mv-ink)}
.mv-404__n{font-family:var(--mv-font-data);font-size:.6875rem;letter-spacing:var(--mv-track-data);
  text-transform:uppercase;color:var(--mv-ink-55)}
.mv-404__help{font-family:var(--mv-font-body);color:var(--mv-ink-55);margin:0}
.mv-404__help a{color:var(--mv-copper-text);text-decoration:underline;text-underline-offset:.18em}

/* --------------------------------------------------------------------------
   MOBILE FILTER DRAWER
   The rail sat above the grid on a phone, so six facets came before the first
   pan. One button, one bottom sheet, and the count of what is already on.
   -------------------------------------------------------------------------- */
.mv-filterbtn{display:none}
.mv-sheetveil{display:none}

@media (max-width:900px){
  .mv-filterbtn{display:inline-flex;align-items:center;gap:.5rem;
    position:fixed;left:50%;transform:translateX(-50%);bottom:1rem;z-index:9985;
    background:var(--mv-ink);color:#fff;border:0;border-radius:0;cursor:pointer;
    font-family:var(--mv-font-display);font-size:.75rem;font-weight:500;
    letter-spacing:var(--mv-track-caps-tight);text-transform:uppercase;
    padding:.95rem 1.5rem;min-height:44px;box-shadow:0 2px 14px rgba(35,31,32,.22)}
  .mv-filterbtn[hidden]{display:none}
  .mv-filterbtn__n{background:var(--mv-brass);color:#fff;font-family:var(--mv-font-data);
    font-size:.6875rem;line-height:1;padding:3px 5px;letter-spacing:.04em}
  .mv-filterbtn__n[hidden]{display:none}

  .mv-sheetveil{display:block;position:fixed;inset:0;background:rgba(35,31,32,.45);
    z-index:9986;opacity:0;pointer-events:none;transition:opacity .22s var(--mv-ease)}
  .mv-sheetveil[hidden]{display:none}
  body.mv-sheet-open .mv-sheetveil{opacity:1;pointer-events:auto}

  .mv-filters{position:fixed!important;left:0;right:0;bottom:0;z-index:9987;
    background:#fff;border-top:2px solid var(--mv-brass);
    max-height:82vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateY(101%);transition:transform .26s var(--mv-ease);
    padding:1rem 4% 6rem!important;margin:0!important;width:auto!important;max-width:none!important}
  body.mv-sheet-open .mv-filters{transform:translateY(0)}
  body.mv-sheet-open{overflow:hidden}

  .mv-filters:before{content:"Filter";display:block;font-family:var(--mv-font-display);
    font-size:.75rem;font-weight:500;letter-spacing:var(--mv-track-caps-tight);
    text-transform:uppercase;color:var(--mv-ink);padding-bottom:.7rem;
    border-bottom:1px solid var(--mv-ink-25);margin-bottom:.9rem}
  .mv-sheetclose{position:sticky;bottom:0;margin:1rem -4% -6rem;padding:1rem 4%;
    background:#fff;border-top:1px solid var(--mv-ink-25);display:flex;gap:.6rem}
  .mv-sheetclose button{flex:1 1 auto;min-height:48px;border-radius:0;cursor:pointer;
    font-family:var(--mv-font-display);font-size:.75rem;font-weight:500;
    letter-spacing:var(--mv-track-caps-tight);text-transform:uppercase}
  .mv-sheetclose .mv-sheetclose__apply{background:var(--mv-ink);color:#fff;border:1px solid var(--mv-ink)}
  .mv-sheetclose .mv-sheetclose__clear{background:transparent;color:var(--mv-ink);border:1px solid var(--mv-ink-25)}
  .mv-stickybuy.is-on ~ .mv-filterbtn{bottom:5.5rem}
}

/* --------------------------------------------------------------------------
   REASSURANCE, under the add-to-cart
   -------------------------------------------------------------------------- */
.mv-assure{list-style:none!important;margin:var(--mv-space-4) 0 0;padding:var(--mv-space-3) 0 0;
  border-top:1px solid var(--mv-ink-25);display:grid;gap:.65rem;max-width:56ch}
.mv-assure>li{list-style:none!important;display:grid;grid-template-columns:9.5rem 1fr;gap:1rem;margin:0}
.mv-assure>li::marker,.mv-assure>li::before{content:none!important;display:none!important}
.mv-assure__k{font-family:var(--mv-font-data);font-size:.6875rem;letter-spacing:var(--mv-track-data);
  text-transform:uppercase;color:var(--mv-ink-55);font-weight:500;padding-top:.12rem}
.mv-assure__v{font-family:var(--mv-font-body);font-size:.9375rem;color:var(--mv-ink);line-height:1.45}
@media (max-width:560px){
  .mv-assure>li{grid-template-columns:1fr;gap:.1rem}
  .mv-assure{gap:.9rem}
}

/* --------------------------------------------------------------------------
   FOCUS — a keyboard user could not see where they were.
   -------------------------------------------------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,.mv-card__link:focus-visible,
.et-menu a:focus-visible,.et_mobile_menu a:focus-visible
{outline:2px solid var(--mv-brass)!important;outline-offset:2px!important;
 border-radius:0!important}
.et-l--header a:focus-visible,.et-l--header button:focus-visible,
.mv-stickybuy a:focus-visible,.et-l--footer a:focus-visible
{outline:2px solid var(--mv-brass)!important;outline-offset:2px!important}
.mv-opt input:focus-visible{outline:2px solid var(--mv-brass);outline-offset:2px}

.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  .mv-filters,.mv-sheetveil{transition:none}
}