/* ============================================================
   Unorthodox Ops Shop — cart UI styles
   Matches shop_v2 dark cinematic theme (lime #d9ff43 accent,
   Barlow Condensed display, Public Sans body).
   Mobile-first: drawer is full-width on small screens.
   ============================================================ */

/* ---------- header cart button + badge ---------- */
.topbar .nav{display:flex;align-items:center;gap:10px}
.cart-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.35);border:1px solid #2e342c;color:#f3f5ee;cursor:pointer;
  backdrop-filter:blur(6px);transition:border-color .2s,color .2s;
}
.cart-btn:hover{border-color:#d9ff43;color:#d9ff43}
.uo-badge{
  position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#d9ff43;color:#10150a;border-radius:999px;
  font:800 .72rem "Public Sans",sans-serif;padding:0 6px;
  box-shadow:0 2px 10px rgba(217,255,67,.5);
}
.uo-badge[hidden]{display:none}

/* ---------- overlay + drawer ---------- */
.uo-overlay{
  position:fixed;inset:0;z-index:70;background:rgba(4,5,4,.72);
  backdrop-filter:blur(6px);opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.uo-overlay.open{opacity:1;pointer-events:auto}

.uo-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:80;
  width:min(430px,100%);display:flex;flex-direction:column;
  background:#101310;border-left:1px solid #2e342c;
  transform:translateX(102%);transition:transform .34s cubic-bezier(.2,.7,.2,1);
  box-shadow:-24px 0 60px rgba(0,0,0,.6);
}
.uo-drawer.open{transform:none}

.uo-cart-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 22px 16px;border-bottom:1px solid #2e342c;
}
.uo-cart-head h2{
  font-family:"Barlow Condensed",sans-serif;font-size:1.9rem;font-weight:900;
  letter-spacing:.04em;text-transform:uppercase;margin:0;color:#f3f5ee;
}
.uo-cart-n{color:#d9ff43}
.uo-cart-close{
  width:40px;height:40px;border-radius:50%;border:1px solid #2e342c;
  background:#1e231c;color:#f3f5ee;font-size:1.2rem;cursor:pointer;line-height:1;
  transition:border-color .2s,color .2s;
}
.uo-cart-close:hover{border-color:#d9ff43;color:#d9ff43}

.uo-member-banner{
  margin:14px 22px 0;padding:11px 14px;border-radius:10px;
  background:rgba(217,255,67,.1);border:1px solid rgba(217,255,67,.45);
  color:#d9ff43;font:800 .74rem "Public Sans",sans-serif;letter-spacing:.1em;
}
.uo-member-banner[hidden]{display:none}

/* ---------- line items ---------- */
.uo-cart-items{flex:1;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:14px}
.uo-item{
  display:flex;gap:14px;background:#141713;border:1px solid #2e342c;
  border-radius:16px;padding:12px;
}
.uo-thumb{flex:0 0 84px;width:84px;height:84px;border-radius:10px;overflow:hidden;background:#0b0d0a}
.uo-thumb img{width:100%;height:100%;object-fit:cover}
.uo-item-info{flex:1;min-width:0}
.uo-item-name{
  font-family:"Barlow Condensed",sans-serif;font-size:1.15rem;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:#f3f5ee;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.uo-item-var{color:#a9afa2;font-size:.78rem;margin-top:2px}
.uo-item-row{display:flex;align-items:center;gap:12px;margin-top:10px}
.uo-qty{display:inline-flex;align-items:center;gap:2px;border:1px solid #2e342c;border-radius:999px;padding:2px;background:#1e231c}
.uo-qty button{
  width:30px;height:30px;border-radius:50%;border:none;background:transparent;
  color:#f3f5ee;font-size:1.05rem;cursor:pointer;line-height:1;
}
.uo-qty button:hover{color:#d9ff43}
.uo-qty span{min-width:26px;text-align:center;font-weight:700;font-size:.88rem}
.uo-item-price{margin-left:auto;font:800 1.05rem "Barlow Condensed",sans-serif;color:#d9ff43;letter-spacing:.03em}
.uo-remove{
  width:30px;height:30px;border-radius:50%;border:1px solid #2e342c;background:transparent;
  color:#a9afa2;font-size:1rem;cursor:pointer;line-height:1;
}
.uo-remove:hover{border-color:#c0392b;color:#c0392b}

/* ---------- empty state ---------- */
.uo-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:40px 22px;text-align:center}
.uo-empty[hidden]{display:none}
.uo-empty p{color:#a9afa2;font-size:1rem;margin:0}
.uo-shop-btn{
  background:#d9ff43;color:#10150a;border:none;border-radius:10px;cursor:pointer;
  font:800 1rem "Barlow Condensed",sans-serif;letter-spacing:.1em;text-transform:uppercase;
  padding:15px 30px;
}
.uo-shop-btn:hover{filter:brightness(1.08)}

/* ---------- footer: perks, totals, checkout ---------- */
.uo-cart-foot{border-top:1px solid #2e342c;padding:18px 22px 24px;background:#0c0e0b}
.uo-perks{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.uo-perk{
  font:700 .8rem "Public Sans",sans-serif;letter-spacing:.03em;
  color:#a9afa2;background:#141713;border:1px dashed #2e342c;
  border-radius:10px;padding:10px 14px;
}
.uo-perk.win{
  color:#d9ff43;background:rgba(217,255,67,.08);
  border:1px solid rgba(217,255,67,.45);
}
.uo-row{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:.92rem;color:#cfd4c8;padding:3px 0;
}
.uo-row.uo-disc{color:#d9ff43;font-weight:700}
.uo-row.uo-total{font:800 1.5rem "Barlow Condensed",sans-serif;color:#f3f5ee;letter-spacing:.03em;margin-top:6px}
.uo-err{
  margin:12px 0 0;padding:11px 14px;border-radius:10px;font-size:.82rem;
  background:rgba(192,57,43,.12);border:1px solid rgba(192,57,43,.55);color:#f0a49c;
}
.uo-err[hidden]{display:none}
.uo-checkout{
  position:relative;display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;margin-top:14px;padding:17px;border:none;border-radius:10px;cursor:pointer;
  background:#d9ff43;color:#10150a;
  font:800 1.1rem "Barlow Condensed",sans-serif;letter-spacing:.1em;text-transform:uppercase;
  transition:filter .2s;
}
.uo-checkout:hover:not([disabled]){filter:brightness(1.08)}
.uo-checkout[disabled]{opacity:.65;cursor:wait}
.uo-spinner{
  display:none;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(16,21,10,.35);border-top-color:#10150a;
  animation:uo-spin .7s linear infinite;
}
.uo-checkout.loading .uo-spinner{display:inline-block}
@keyframes uo-spin{to{transform:rotate(360deg)}}
.uo-micro{font-size:.74rem;color:#a9afa2;text-align:center;margin-top:10px}

/* ---------- toast ---------- */
.uo-toast{
  position:fixed;left:50%;bottom:26px;z-index:100;max-width:min(520px,calc(100vw - 40px));
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  background:#1e231c;border:1px solid rgba(217,255,67,.5);color:#f3f5ee;
  font:700 .88rem "Public Sans",sans-serif;
  padding:14px 20px;border-radius:12px;text-align:center;
  box-shadow:0 14px 44px rgba(0,0,0,.6);
  transition:opacity .28s ease,transform .28s ease;
}
.uo-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- quick-view additions (wired by template diff) ---------- */
.qv-qtyrow{display:flex;align-items:center;justify-content:space-between;margin-top:20px}
.qv-qtyrow .qv-sec{margin:0}
.qv-qty{display:inline-flex;align-items:center;gap:4px;border:1px solid #2e342c;border-radius:999px;padding:3px;background:#1e231c}
.qv-qty button{
  width:34px;height:34px;border-radius:50%;border:none;background:transparent;
  color:#f3f5ee;font-size:1.15rem;cursor:pointer;line-height:1;
}
.qv-qty button:hover{color:#d9ff43}
.qv-qty span{min-width:30px;text-align:center;font-weight:700;font-size:.95rem}
.buy.cart-add{margin-top:14px}
.buy.buy-direct{
  margin-top:10px;background:#1e231c;color:#f3f5ee;border:1px solid #2e342c;
}
.buy.buy-direct:hover{border-color:#d9ff43;color:#d9ff43;filter:none}

/* ---------- small screens: full-width drawer ---------- */
@media (max-width:640px){
  .uo-drawer{width:100%;border-left:none}
  .uo-cart-head,.uo-cart-items,.uo-cart-foot{padding-left:18px;padding-right:18px}
  .uo-thumb{flex-basis:72px;width:72px;height:72px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .uo-overlay,.uo-drawer,.uo-toast,.uo-checkout,.uo-spinner{transition:none!important;animation:none!important}
  .uo-drawer{transform:none}
  .uo-drawer:not(.open){display:none}
  .uo-spinner{display:none!important}
}