/* Perfect Scents universal cart widget styling. Self-contained (psc- prefixed) so
   it looks identical on every page regardless of that page's theme. Brand identity:
   navy #0a1020, metallic gold, cream. */
#psc-root{
  --psc-navy:#0a1020; --psc-cream:#fdf8ee; --psc-ink:#16120a; --psc-ink-soft:#4a4335;
  --psc-g1:#8a6414; --psc-g3:#e9c65f; --psc-gold:#d4a72c;
  --psc-metal:linear-gradient(103deg,#8a6414 0%,#c9992c 20%,#f6e4a6 42%,#e3b845 58%,#a2761a 76%,#f0d47f 100%);
  --psc-serif:"Didot","Bodoni MT","Hoefler Text",Garamond,Georgia,serif;
  --psc-display:"Archivo Black","Helvetica Neue","Arial Black",system-ui,sans-serif;
  --psc-sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---- floating bag button ---- */
.psc-fab{position:fixed; right:20px; bottom:20px; z-index:9998; display:inline-flex; align-items:center; gap:9px;
  border:0; cursor:pointer; background:var(--psc-metal); color:#14100a; border-radius:44px; padding:13px 20px;
  font-family:var(--psc-sans); font-weight:800; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  box-shadow:0 10px 26px rgba(0,0,0,.28); transition:transform .12s ease, box-shadow .2s ease}
.psc-fab:hover{transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,0,0,.34)}
.psc-fab:active{transform:translateY(0) scale(.97)}
.psc-badge{background:var(--psc-navy); color:var(--psc-g3); border-radius:40px; min-width:20px; height:20px;
  display:inline-grid; place-items:center; font-size:10px; padding:0 5px}
body.psc-open .psc-fab{opacity:0; pointer-events:none}

/* ---- backdrop + drawer ---- */
.psc-backdrop{position:fixed; inset:0; background:rgba(8,10,16,.5); z-index:9998; opacity:0; transition:opacity .3s}
.psc-backdrop.open{opacity:1}
.psc-drawer{position:fixed; top:0; right:0; height:100%; width:min(430px,94vw); background:var(--psc-cream); color:var(--psc-ink);
  z-index:9999; transform:translateX(100%); transition:transform .34s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; padding:26px 24px; box-shadow:-24px 0 60px rgba(0,0,0,.24);
  font-family:var(--psc-sans)}
.psc-drawer.open{transform:none}
.psc-head{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px}
.psc-kicker{font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--psc-g1)}
.psc-head h2{font-family:var(--psc-display); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; font-size:30px; margin:4px 0 0; color:var(--psc-ink)}
.psc-x{background:none; border:0; font-size:26px; line-height:1; cursor:pointer; color:var(--psc-ink); padding:0}

/* ---- items ---- */
.psc-items{flex:1; overflow:auto; display:flex; flex-direction:column; gap:14px; margin:6px 0}
.psc-line{display:grid; grid-template-columns:56px 1fr auto; gap:13px; align-items:start; padding-bottom:14px; border-bottom:1px solid rgba(22,18,10,.1)}
.psc-thumb{margin:0; width:56px; height:56px; border-radius:8px; overflow:hidden; background:#e9e0cd}
.psc-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.psc-thumb-empty{background:linear-gradient(135deg,#efe7d5,#e2d6bd)}
.psc-line-main{min-width:0}
.psc-line-main span{font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--psc-g1)}
.psc-line-main h3{font-family:var(--psc-serif); font-size:17px; font-weight:400; margin:3px 0}
.psc-line-main p{font-size:11px; color:var(--psc-ink-soft); text-transform:capitalize}
.psc-line>strong{font-family:var(--psc-serif); font-size:15px; white-space:nowrap}
.psc-qty{display:inline-flex; align-items:center; gap:2px; margin-top:8px; border:1px solid rgba(22,18,10,.2); border-radius:40px; padding:3px}
.psc-qty button{width:30px; height:30px; border:0; background:transparent; border-radius:50%; font-size:16px; cursor:pointer; color:var(--psc-ink)}
.psc-qty button:hover{background:rgba(22,18,10,.07)}
.psc-qty button:disabled{opacity:.4; cursor:not-allowed}
.psc-qty b{min-width:26px; text-align:center; font-weight:700; font-size:13px}
.psc-remove{display:block; margin-top:7px; background:none; border:0; padding:0; font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--psc-g1); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.psc-remove:hover{color:#9a3426}

/* ---- empty + summary ---- */
.psc-empty{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px}
.psc-empty p{font-family:var(--psc-serif); font-size:22px}
.psc-empty span{font-size:12px; color:var(--psc-ink-soft)}
.psc-summary{border-top:1px solid rgba(22,18,10,.14); padding-top:16px; margin-top:8px}
.psc-total-row{display:flex; justify-content:space-between; align-items:baseline}
.psc-total-row span{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--psc-ink-soft)}
.psc-total-row strong{font-family:var(--psc-display); font-weight:900; font-size:24px}
.psc-terms{font-size:10px; color:var(--psc-ink-soft); margin:8px 0 14px}

/* ---- buttons ---- */
.psc-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; border-radius:4px;
  padding:15px 20px; font-family:var(--psc-sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:800;
  cursor:pointer; border:1px solid transparent; transition:transform .1s ease, filter .2s ease, box-shadow .2s ease}
.psc-btn-primary{background:var(--psc-metal); color:#14100a; box-shadow:inset 0 1px 0 rgba(255,255,255,.24)}
.psc-btn-primary:hover{filter:brightness(1.03)}
.psc-btn-primary:active{transform:translateY(1px) scale(.99)}
.psc-btn-primary:disabled{filter:grayscale(.5) opacity(.65); cursor:not-allowed}
.psc-btn-ghost{background:transparent; color:var(--psc-ink); border-color:rgba(22,18,10,.24); margin-top:12px}
.psc-btn-ghost:hover{border-color:var(--psc-gold)}

/* ---- order dialog ---- */
.psc-order{width:min(560px,92vw); border:0; border-radius:12px; padding:40px 34px; background:var(--psc-cream); color:var(--psc-ink);
  font-family:var(--psc-sans); box-shadow:0 40px 90px rgba(0,0,0,.4)}
.psc-order::backdrop{background:rgba(8,10,16,.6)}
.psc-order .psc-x{position:absolute; top:20px; right:22px}
.psc-order-title{font-family:var(--psc-display); font-weight:900; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(1.9rem,5vw,2.6rem); margin:8px 0 12px}
.psc-order-lede{font-size:14px; line-height:1.6; color:var(--psc-ink-soft); max-width:440px}
#psc-form{display:grid; gap:14px; margin-top:22px}
#psc-form label{display:flex; flex-direction:column; gap:6px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--psc-ink-soft)}
#psc-form input{padding:13px 15px; border:1px solid rgba(22,18,10,.2); border-radius:6px; background:#fff; color:var(--psc-ink); font-size:15px; font-family:var(--psc-sans)}
#psc-form input:focus{outline:0; border-color:var(--psc-gold)}
.psc-error{color:#9a3426; font-size:12px; min-height:15px; margin:0}
.psc-success{text-align:center; padding:10px 0}
.psc-tick{display:inline-grid; place-items:center; width:54px; height:54px; border-radius:50%; background:#276244; color:#fff; font-size:24px; margin-bottom:14px}
.psc-success h3{font-family:var(--psc-display); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; font-size:26px}
.psc-success>p{color:var(--psc-ink-soft); font-size:14px; margin:8px 0 18px}
.psc-pay{text-align:left; background:#fff; border:1px solid rgba(22,18,10,.12); border-radius:10px; padding:20px; margin-bottom:16px}
.psc-pay h4{font-family:var(--psc-serif); font-size:18px; margin:0 0 12px}
.psc-bank{display:grid; gap:8px; margin:0 0 12px}
.psc-bank div{display:flex; justify-content:space-between; gap:16px; font-size:13px}
.psc-bank dt{color:var(--psc-ink-soft)}
.psc-bank dd{margin:0; font-weight:700}
.psc-note{font-size:12px; color:var(--psc-ink-soft); margin:0 0 14px}
.psc-upload{display:flex; flex-direction:column; gap:8px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--psc-ink-soft); margin-bottom:10px}
.psc-paydone{background:#eef6f1; border:1px solid rgba(39,98,68,.3); border-radius:10px; padding:16px; font-size:13px; color:#276244; margin-bottom:16px}

@media(max-width:520px){
  .psc-drawer{width:100vw; padding:22px 18px}
  .psc-order{padding:30px 20px}
  .psc-fab{right:14px; bottom:14px}
}