/* =========================================================
   MIRAS · shared shop chrome
   Nav, cart drawer, toast, and the Bootstrap collision guard —
   the furniture every shop page carries. Extracted verbatim from
   product.html / contact.html.

   Pairs with shop.js (catalogue + cart + checkout maths). Loaded by
   checkout.html and order-success.html.

   NOTE: products.html, product.html and contact.html still carry their
   own inline copies of these rules (they predate this file). They are
   byte-identical today. Folding those three onto this stylesheet is a
   clean, self-contained follow-up — it just wasn't worth re-verifying
   three working pages in the middle of building the checkout flow.
   ========================================================= */

/* --- Bootstrap collision guard ---
   Two class names in Bootstrap are already spoken for by this site, and the
   collision is silent + ugly, so reclaim them explicitly:

   .mark  — Bootstrap's <mark> highlight utility (yellow background + padding).
            The site uses .mark for the MIRAS wordmark, in the nav AND the
            footer. Left alone, the wordmark renders as a cream highlighter box.

   .toast — Bootstrap's toast component. It forces width:350px and, via
            `.toast:not(.show){display:none}`, hides the element outright — which
            also kills the slide-up transition, since you can't animate out of
            display:none. Ours is an opacity/transform pill that hugs its text.
            `:not(.show)` is needed to out-specify Bootstrap's own selector. */
.mark{ padding:0; background-color:transparent; color:inherit }
.toast, .toast:not(.show){
  display:block;
  width:auto; max-width:min(90vw,420px);
}

/* ============ 2. NAV (verbatim from product.html) ============ */
.pnav{
  position:fixed;top:0;left:0;right:0;z-index:6000;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.2rem clamp(1.4rem,4vw,3rem);
  background:linear-gradient(180deg,rgba(5,5,5,.9),rgba(5,5,5,.4) 70%,transparent);
  backdrop-filter:blur(6px);
}
.pnav .brand{display:flex;flex-direction:column;gap:.15rem;text-decoration:none}
.pnav .brand .mark{
  font-family:var(--font-body);font-weight:300;font-size:.9rem;
  letter-spacing:.34em;color:var(--silk-100);text-indent:.34em;
}
.pnav .brand .sub{font-size:.54rem;letter-spacing:.5em;color:var(--silver-lo);text-transform:uppercase}
.pnav .links{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.2rem)}
.pnav .links a{
  font-family:var(--font-fa);font-weight:300;font-size:.86rem;color:var(--silk-300);
  text-decoration:none;position:relative;padding:.2rem 0;transition:color .35s;
}
.pnav .links a:hover{color:var(--silk-100)}
.pnav .links a[aria-current]{color:var(--silk-100)}
.pnav .links a[aria-current]::after{
  content:"";position:absolute;left:0;right:0;bottom:-.5rem;height:1px;background:var(--glow);opacity:.7;
}
.cart-btn{
  position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  color:var(--silk-100);background:transparent;border:1px solid rgba(230,232,236,.12);
  cursor:pointer;transition:border-color .35s,background .35s;
}
.cart-btn:hover{border-color:rgba(230,232,236,.32);background:rgba(230,232,236,.05)}
.cart-count{
  position:absolute;top:-5px;inset-inline-end:-5px;min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;border-radius:100px;font-family:var(--font-fa);font-size:.6rem;
  color:var(--ink-900);background:var(--silk-100);
  opacity:0;transform:scale(.6);transition:opacity .3s,transform .3s;
}
.cart-count.on{opacity:1;transform:none}
@keyframes bump{0%,100%{transform:none}30%{transform:scale(1.16)}}
.cart-btn.bump{animation:bump .45s ease}
/* Header wishlist heart — a link (to wishlist.html), styled like the cart btn.
   Fills in when at least one piece is saved. */
.wish-btn{
  position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  color:var(--silk-100);background:transparent;border:1px solid rgba(230,232,236,.12);
  cursor:pointer;padding:0;transition:border-color .35s,background .35s,color .35s;
}
.wish-btn:hover{border-color:rgba(230,232,236,.32);background:rgba(230,232,236,.05);color:var(--silk-100)}
.wish-btn svg{transition:fill .35s}
.wish-btn.has svg{fill:currentColor}
.wish-btn .cart-count{background:var(--glow);color:var(--ink-900)}

/* ============ CART DRAWER + TOAST ============
   Verbatim from product.html so all three shop pages stay identical.
   shop.js drives every part of it.

   The page is RTL, so the drawer is anchored to the RIGHT edge via
   inset-inline-start:0 — but translateX is PHYSICAL, so hiding it
   off-screen is +102%, not -100%. */
.drawer-overlay{
  position:fixed;inset:0;z-index:7000;background:rgba(3,3,4,.62);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .45s;
}
.drawer-overlay.show{opacity:1}
.drawer{
  position:fixed;top:0;inset-inline-start:0;z-index:7001;height:100dvh;width:min(420px,92vw);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0c0c0c,#070707);
  border-inline-end:1px solid rgba(230,232,236,.1);
  box-shadow:0 0 80px rgba(0,0,0,.6);
  /* Page is RTL → drawer is anchored to the right edge (inset-inline-start:0).
     Hide it off-screen to the RIGHT; translateX is physical, so this is +102%. */
  transform:translateX(102%);transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.drawer.open{transform:none}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem 1.5rem;border-bottom:1px solid rgba(230,232,236,.08);
}
.drawer-head h3{font-family:var(--font-fa);font-weight:400;font-size:1.1rem;color:var(--silk-100)}
.drawer-close{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:var(--silk-300);background:transparent;border:1px solid rgba(230,232,236,.12);
  transition:color .3s,border-color .3s;
}
.drawer-close:hover{color:var(--silk-100);border-color:rgba(230,232,236,.3)}
.drawer-body{flex:1;overflow-y:auto;padding:1.2rem 1.5rem;display:flex;flex-direction:column;gap:1rem}
.drawer-empty{
  margin:auto;text-align:center;font-family:var(--font-fa);font-weight:300;
  font-size:.9rem;color:var(--silver-lo);
}
.citem{display:flex;gap:.9rem;align-items:flex-start}
.citem .cthumb{
  width:64px;height:64px;flex:0 0 auto;border-radius:4px;overflow:hidden;
  border:1px solid rgba(230,232,236,.08);background:#080808;
}
.citem .cthumb img{width:100%;height:100%;object-fit:cover}
.citem .cinfo{flex:1;min-width:0}
.citem .cnm{font-family:var(--font-fa);font-weight:400;font-size:.9rem;color:var(--silk-100)}
.citem .cnm a{color:inherit;text-decoration:none}
.citem .cnm a:hover{color:var(--glow)}
.citem .cpr{font-family:var(--font-fa);font-weight:300;font-size:.76rem;color:var(--silver-lo);margin-top:.2rem}
.citem .qty{display:flex;align-items:center;gap:.3rem;margin-top:.5rem}
.citem .qty button{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:var(--silk-100);background:transparent;border:1px solid rgba(230,232,236,.16);
  transition:background .3s,color .3s,border-color .3s;
}
.citem .qty button:hover{background:var(--silk-100);color:var(--ink-900);border-color:var(--silk-100)}
.citem .qty .q{min-width:24px;text-align:center;font-family:var(--font-fa);font-size:.82rem;color:var(--silk-100)}
.citem .crm{
  font-family:var(--font-fa);font-weight:300;font-size:.72rem;color:var(--silver-lo);cursor:pointer;
  background:none;border:none;transition:color .3s;
}
.citem .crm:hover{color:var(--silk-100)}
.drawer-foot{padding:1.3rem 1.5rem;border-top:1px solid rgba(230,232,236,.08)}
.drawer-total{
  display:flex;align-items:baseline;justify-content:space-between;
  font-family:var(--font-fa);font-weight:300;font-size:.86rem;color:var(--silver-lo);
}
.drawer-total b{font-weight:400;font-size:1.2rem;color:var(--silk-100)}
.drawer-checkout{
  display:block;text-align:center;margin-top:1rem;padding:.95rem 1rem;border-radius:100px;
  font-family:var(--font-fa);font-weight:400;font-size:.9rem;text-decoration:none;
  background:linear-gradient(135deg,var(--silk-100),var(--silver));color:var(--ink-900);
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;
}
.drawer-checkout:hover{transform:translateY(-2px);box-shadow:0 16px 34px -18px rgba(230,232,236,.5)}
.drawer-note{
  margin-top:.8rem;text-align:center;font-family:var(--font-fa);font-weight:300;
  font-size:.7rem;color:var(--silver-lo);
}
.toast{
  position:fixed;bottom:1.8rem;left:50%;transform:translate(-50%,140%);z-index:8000;
  font-family:var(--font-fa);font-weight:300;font-size:.9rem;color:var(--silk-100);
  padding:.9rem 1.6rem;border-radius:100px;
  background:rgba(14,14,14,.92);border:1px solid rgba(230,232,236,.14);backdrop-filter:blur(8px);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.8);
  opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s;
  pointer-events:none;
}
.toast.show{transform:translate(-50%,0);opacity:1}