/* ==========================================================================
   MASTEREDTRAX — components.css
   Overlays: scrim · drawers · search · quick view · toasts
   ========================================================================== */

.scrim{
  position:fixed;inset:0;z-index:80;background:rgba(3,3,4,.78);
  backdrop-filter:blur(5px);opacity:0;transition:opacity .6s var(--ease)}
.scrim.is-open{opacity:1}
body.is-locked{overflow:hidden}

/* ---------- drawers ---------- */
.drawer{
  position:fixed;top:0;bottom:0;z-index:90;width:min(440px,93vw);
  display:flex;flex-direction:column;background:var(--black-2);
  transition:transform .75s var(--ease-io);visibility:hidden}
.drawer--right{right:0;transform:translateX(100%);border-left:1px solid var(--line)}
.drawer--left{left:0;transform:translateX(-100%);width:min(360px,88vw);
  border-right:1px solid var(--line)}
.drawer.is-open{transform:none;visibility:visible}

.drawer__head{display:flex;align-items:center;justify-content:space-between;
  padding:26px 28px;border-bottom:1px solid var(--line-soft);flex-shrink:0}
.drawer__x,.modal__x,.search__x{
  width:38px;height:38px;display:grid;place-items:center;font-size:14px;
  color:var(--muted);border:1px solid var(--line-soft);
  transition:.45s var(--ease)}
.drawer__x:hover,.modal__x:hover,.search__x:hover{
  color:var(--gold);border-color:var(--gold);transform:rotate(90deg)}

/* staggered nav entrance */
.drawer__nav{display:flex;flex-direction:column;padding:16px 0;flex:1}
.drawer__nav a{
  padding:20px 28px;font-family:var(--serif);font-size:30px;font-weight:300;
  border-bottom:1px solid var(--line-soft);
  opacity:0;transform:translateX(-24px);
  transition:color .4s,padding-left .5s var(--ease-io),
             opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.drawer.is-open .drawer__nav a{opacity:1;transform:none}
.drawer.is-open .drawer__nav a:nth-child(1){transition-delay:.18s}
.drawer.is-open .drawer__nav a:nth-child(2){transition-delay:.25s}
.drawer.is-open .drawer__nav a:nth-child(3){transition-delay:.32s}
.drawer.is-open .drawer__nav a:nth-child(4){transition-delay:.39s}
.drawer.is-open .drawer__nav a:nth-child(5){transition-delay:.46s}
.drawer__nav a:hover{color:var(--gold-lit);padding-left:38px}
.drawer__foot{padding:26px 28px;border-top:1px solid var(--line-soft);flex-shrink:0}
.drawer__foot .btn{width:100%}

/* ---------- free shipping meter ---------- */
.ship-meter{padding:18px 28px;border-bottom:1px solid var(--line-soft);flex-shrink:0}
.ship-meter p{margin:0 0 12px;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-2)}
.ship-meter p b{color:var(--gold-lit);font-weight:500}
.ship-meter__bar{height:1px;background:rgba(244,242,237,.1);overflow:hidden}
.ship-meter__bar span{display:block;height:100%;width:0;background:var(--gold-grad-v);
  transition:width .9s var(--ease-out)}

/* ---------- cart ---------- */
.cart__items{flex:1;overflow-y:auto;padding:10px 28px}
.cart__line{display:grid;grid-template-columns:78px 1fr auto;gap:16px;
  padding:22px 0;border-bottom:1px solid var(--line-soft);
  animation:lineIn .6s var(--ease-out) both}
@keyframes lineIn{from{opacity:0;transform:translateY(14px)}}
.cart__line.is-out{opacity:0;transform:translateX(30px);transition:.4s var(--ease-io)}
.cart__line img{width:78px;height:98px;object-fit:cover}
.cart__info h4{margin:0;font-family:var(--serif);font-size:17px;font-weight:400}
.cart__info p{margin:6px 0 12px;font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted-2)}
.cart__side{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}
.cart__side .price{font-size:12.5px;letter-spacing:.1em;color:var(--gold-lit)}
.cart__rm{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);
  border-bottom:1px solid transparent;transition:.4s}
.cart__rm:hover{color:var(--gold);border-color:var(--gold)}

.qty{display:inline-flex;align-items:center;border:1px solid var(--line-soft)}
.qty button{width:30px;height:30px;display:grid;place-items:center;color:var(--muted);
  font-size:13px;transition:.3s}
.qty button:hover{color:var(--gold);background:rgba(198,162,74,.08)}
.qty input{width:36px;height:30px;text-align:center;background:none;border:0;
  color:var(--white);font-size:12px;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none}

.cart__empty{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:24px;color:var(--muted-2);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;padding:28px}
.cart__foot .cart__row{display:flex;justify-content:space-between;align-items:baseline;
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.cart__foot #cart-total{font-family:var(--serif);font-size:30px;color:var(--gold-lit);
  letter-spacing:.01em;text-transform:none}
.cart__note{margin:12px 0 22px;font-size:9.5px;color:var(--muted-2);letter-spacing:.14em}
.cart__checkout{width:100%}

/* ---------- search ---------- */
.search{
  position:fixed;inset:0;z-index:95;background:rgba(6,6,7,.96);
  backdrop-filter:blur(16px);display:grid;place-items:center;
  opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s}
.search.is-open{opacity:1;visibility:visible}
.search__inner{width:100%;max-width:880px;text-align:center;position:relative;
  transform:translateY(24px);transition:transform .8s var(--ease-out)}
.search.is-open .search__inner{transform:none}
.search__x{position:absolute;top:-72px;right:0}
.search__field{margin:22px 0 18px;border-bottom:1px solid var(--line)}
.search__field input{width:100%;background:none;border:0;outline:none;color:var(--white);
  font-family:var(--serif);font-size:clamp(30px,6.5vw,62px);font-weight:300;
  padding:16px 0;text-align:center}
.search__field input::placeholder{color:rgba(142,138,130,.35)}
.search__hint{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted-2)}
.search__tags{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.tag{padding:11px 22px;border:1px solid var(--line-soft);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);transition:.45s var(--ease)}
.tag:hover{border-color:var(--gold);color:var(--gold)}

.card.is-hidden{display:none}
.filter-bar{display:flex;align-items:center;gap:18px;margin-bottom:34px;
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted-2)}

/* ---------- quick view ---------- */
.modal{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:24px;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.modal.is-open{opacity:1;visibility:visible}
.modal__box{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  width:min(1020px,100%);max-height:88vh;overflow:hidden;
  background:var(--black-2);border:1px solid var(--line);
  transform:translateY(30px) scale(.985);
  transition:transform .8s var(--ease-out)}
.modal.is-open .modal__box{transform:none}
.modal__x{position:absolute;top:18px;right:18px;z-index:3;background:rgba(6,6,7,.72)}
.modal__media{background:var(--black-3);overflow:hidden}
.modal__media img{width:100%;height:100%;object-fit:cover;min-height:460px;
  transition:opacity .4s var(--ease)}
.modal__media img.is-swapping{opacity:0}
.modal__body{padding:clamp(28px,3.4vw,52px);overflow-y:auto}
.modal__body h3{font-size:clamp(28px,3vw,42px);margin:14px 0 14px}
.modal__price{font-size:14px;letter-spacing:.14em;color:var(--gold-lit);margin:0 0 24px}
.modal__price del{color:var(--muted-2);margin-right:12px}
.modal__desc{color:var(--muted);font-size:13px;margin:0 0 32px;max-width:40ch}
.field{margin-bottom:28px}
.field__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.field__label{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-2)}
.field__value{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lit)}
.field__link{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid var(--line)}
.sizes{display:flex;gap:9px;flex-wrap:wrap}
.size{min-width:50px;padding:13px 14px;border:1px solid var(--line-soft);
  font-size:10px;letter-spacing:.18em;color:var(--white);transition:.4s var(--ease)}
.size:hover{border-color:var(--gold);color:var(--gold-lit)}
.size.is-on{background:var(--gold-grad-v);border-color:transparent;color:#33280b;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,248,226,.22)}
.size.is-off{opacity:.25;cursor:not-allowed;text-decoration:line-through}
.modal__add{width:100%}
.modal__stock{margin:16px 0 0;font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--muted-2);text-align:center}

/* ---------- toasts ---------- */
.toasts{position:fixed;left:50%;bottom:34px;translate:-50% 0;z-index:120;
  display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:14px;padding:15px 26px;
  background:rgba(11,11,13,.97);border:1px solid var(--line);
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--white);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.95);
  animation:toastIn .6s var(--ease-out) both}
.toast b{color:var(--gold-lit);font-weight:600}
.toast.is-out{animation:toastOut .45s var(--ease-io) forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(22px)}}
@keyframes toastOut{to{opacity:0;transform:translateY(12px)}}

.icon-btn.is-bump{animation:bump .55s var(--ease)}
@keyframes bump{40%{transform:scale(1.3)}}

/* ==========================================================================
   Responsive overlays
   ========================================================================== */
@media(max-width:900px){
  .modal{padding:16px}
  .modal__box{grid-template-columns:1fr;max-height:90svh}
  .modal__media img{min-height:0;height:30svh;object-position:50% 30%}
  .modal__body{padding:24px}
  .modal__body h3{font-size:26px}
  .field{margin-bottom:22px}
}

@media(max-width:560px){
  .drawer{width:100%}
  .drawer--left{width:min(320px,86vw)}
  .drawer__head{padding:20px 20px}
  .drawer__foot{padding:20px}
  .drawer__nav a{padding:17px 20px;font-size:26px}
  .drawer__nav a:hover{padding-left:28px}

  .ship-meter{padding:16px 20px}
  .cart__items{padding:6px 20px}
  .cart__line{grid-template-columns:64px 1fr auto;gap:12px;padding:18px 0}
  .cart__line img{width:64px;height:80px}
  .cart__info h4{font-size:15px}
  .cart__foot #cart-total{font-size:25px}

  /* the close button used to sit 72px above the panel — off-screen on a phone */
  .search__inner{padding-top:56px}
  .search__x{top:0;right:auto;left:50%;translate:-50% 0}
  .search__field{margin:16px 0 14px}
  .search__tags{margin-top:22px;gap:8px}
  .tag{padding:10px 16px;font-size:9px;letter-spacing:.18em}

  .sizes{gap:7px}
  .size{min-width:46px;padding:12px 11px}

  .toasts{left:16px;right:16px;translate:0 0;align-items:stretch}
  .toast{justify-content:center;text-align:center;padding:14px 18px;
    font-size:9px;letter-spacing:.16em}
}

/* Landscape phones are short: let the modal scroll rather than crop. */
@media(max-height:520px) and (max-width:900px){
  .modal__box{max-height:96svh}
  .modal__media img{height:22svh}
}
@media(prefers-reduced-motion:reduce){
  .drawer__nav a{opacity:1!important;transform:none!important}
  .search__inner,.modal__box{transform:none!important}
}