/* ==================================================================
   GOLDI — order list (список замовлення).
   Pairs with assets/orderlist.js; link both on any page that offers the
   "Додати до списку замовлення" button. Relies on the colour and radius
   custom properties every catalog page already defines on :root.
   ================================================================== */
/* ---------- Order list (список замовлення) ---------- */
.card-actions .ol-add{width:100%;justify-content:center;}
.ol-add.added{background:rgba(255,255,255,.7);border:1px solid var(--line);color:var(--ink-soft);box-shadow:none;}
.ol-dock{
  position:fixed;right:18px;bottom:18px;z-index:120;
  display:none;align-items:center;gap:9px;
  padding:14px 20px;border-radius:999px;border:none;
  background:linear-gradient(110deg, #FF872D 0%, #FF671A 100%);color:#14243B;
  font-family:'Inter';font-weight:700;font-size:14px;
  box-shadow:0 14px 30px -10px rgba(250,116,25,.5);
  transition:transform .18s ease, box-shadow .18s ease;
}
.ol-dock.show{display:flex;}
.ol-dock:hover{transform:translateY(-3px);box-shadow:0 18px 34px -10px rgba(250,116,25,.55);}
.ol-dock .ol-badge{
  min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#14243B;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;
}
.ol-backdrop{position:fixed;inset:0;background:rgba(10,25,60,.42);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:130;}
.ol-backdrop.show{opacity:1;pointer-events:auto;}
.ol-panel{
  position:fixed;right:18px;bottom:18px;z-index:140;width:min(360px, calc(100vw - 36px));
  background:#fff;border-radius:var(--radius-lg);box-shadow:0 30px 60px -22px rgba(10,25,60,.45);
  padding:24px 24px 22px;transform:translateY(14px);opacity:0;pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.ol-panel.show{opacity:1;transform:none;pointer-events:auto;}
.ol-panel h3{font-size:18px;font-weight:800;}
.ol-panel .ol-note{font-size:13px;color:var(--muted);margin-top:6px;}
.ol-close{position:absolute;top:18px;right:18px;border:none;background:none;font-size:20px;color:var(--muted);line-height:1;padding:0;}
.ol-close:hover{color:var(--ink);}
.ol-items{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:44vh;overflow-y:auto;}
.ol-items li{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(20,50,100,.05);border-radius:12px;padding:11px 14px;font-size:13.5px;font-weight:600;color:var(--ink);
}
.ol-items .ol-cat{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-top:2px;}
.ol-items button{border:none;background:none;color:var(--muted);font-size:17px;line-height:1;padding:0;flex-shrink:0;}
.ol-items button:hover{color:var(--orange-deep);}
.ol-empty{margin-top:18px;font-size:13.5px;color:var(--muted);}
.ol-actions{margin-top:18px;display:flex;flex-direction:column;gap:9px;}
.ol-actions .btn{justify-content:center;}
.ol-clear{border:none;background:none;font-size:13px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-family:'Inter';}
.ol-clear:hover{color:var(--orange-deep);}

@media(max-width:520px){
  .ol-dock{right:14px;bottom:14px;padding:13px 18px;}
  .ol-panel{right:14px;left:14px;bottom:14px;width:auto;padding:22px 20px 20px;}
}