/* ==========================================================================
   Catalogue toolbar v4 — search only + 3-dot sections drawer (Magma theme)
   Loaded after app.css / wallet.css / stage5.css / stage6.css
   ========================================================================== */

/* ---------------- 1. toolbar: search bar alone ---------------- */
.shop-bar{
  position:sticky;top:66px;z-index:9;
  display:flex;align-items:center;gap:10px;
  padding:8px;margin:0 0 18px;border-radius:999px;
  background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
          backdrop-filter:saturate(160%) blur(16px);
  border:1px solid rgba(120,0,144,.1);
  box-shadow:0 22px 40px -30px rgba(60,0,70,.65);
}
.shop-bar .shop-search{flex:1 1 auto;width:auto;min-width:0;order:0}
.shop-search input{
  width:100%;box-sizing:border-box;
  padding-block:12px;padding-inline-end:22px;padding-inline-start:44px;
  border-radius:999px;border:1px solid rgba(120,0,144,.12);
  background-color:#F8F3FD;color:var(--ink);
  font-size:14.5px;line-height:1.4;
  background-repeat:no-repeat;
  background-position:16px center;
  background-size:16px;
  transition:background-color .18s,border-color .18s,box-shadow .18s;
}
.shop-search input::placeholder{color:#9A88AB}
.shop-search input:hover{background-color:#F4ECFB;border-color:rgba(120,0,144,.2)}
.shop-search input:focus{
  outline:none;background-color:#fff;
  border-color:var(--violet-2);box-shadow:var(--ring);
}
html[dir="rtl"] .shop-search input{background-position:right 16px center}

/* the section currently filtered, with a way back */
.shop-filter{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  padding:9px 12px 9px 15px;border-radius:999px;
  background:var(--violet-soft,#F7EEFD);color:var(--violet,#780090);
  border:1px solid #EBD9F5;font-size:12.5px;font-weight:800;
  white-space:nowrap;max-width:190px;
  transition:background .18s,border-color .18s;
}
.shop-filter span{overflow:hidden;text-overflow:ellipsis}
.shop-filter b{
  display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:rgba(120,0,144,.1);font-size:13px;line-height:1;font-weight:800;
}
.shop-filter:hover{color:#fff;background:var(--grad,linear-gradient(120deg,#4A0059,#780090));border-color:transparent}
.shop-filter:hover b{background:rgba(255,255,255,.22)}

/* ---------------- 2. the three-dot tab on the left edge ---------------- */
.cat-fab{
  position:fixed;left:0;top:50%;transform:translateY(-50%);
  z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:46px;height:68px;padding:0;margin:0;border:0;cursor:pointer;
  border-radius:0 20px 20px 0;
  background:linear-gradient(150deg,#4A0059 0%,#780090 55%,#B23E00 130%);
  box-shadow:0 18px 34px -14px rgba(60,0,70,.6),inset 0 0 0 1px rgba(255,255,255,.18);
  transition:width .22s ease,box-shadow .22s ease,filter .22s ease;
  -webkit-tap-highlight-color:transparent;
}
.cat-fab i{
  display:block;width:5px;height:5px;border-radius:50%;background:#fff;
  opacity:.92;transition:opacity .2s,transform .2s,background .2s;
}
.cat-fab:hover{width:56px;filter:saturate(115%)}
.cat-fab:hover i{opacity:1}
.cat-fab:hover i:nth-child(2){background:#FFB27A;transform:scale(1.35)}
.cat-fab:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,178,122,.85),0 18px 34px -14px rgba(60,0,70,.6)}
.cat-fab-dot{
  position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;
  background:#FC6000;box-shadow:0 0 0 2px rgba(255,255,255,.9);
}

/* ---------------- 3. the drawer with the catalogue tabs ---------------- */
.cat-scrim{
  position:fixed;inset:0;z-index:1001;
  background:rgba(35,4,44,.44);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .26s ease,visibility .26s ease;
}
.cat-scrim.is-on{opacity:1;visibility:visible}

.cat-panel{
  position:fixed;top:0;bottom:0;left:0;z-index:1002;
  width:min(370px,88vw);display:flex;flex-direction:column;
  background:#fff;border-radius:0 26px 26px 0;overflow:hidden;
  box-shadow:0 50px 100px -30px rgba(40,0,50,.55);
  transform:translateX(-104%);
  transition:transform .32s cubic-bezier(.22,.72,.2,1);
  visibility:hidden;
}
.cat-panel.is-open{transform:none;visibility:visible}
body.cat-open{overflow:hidden}

.cat-panel-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:22px 18px 18px 20px;
  background:linear-gradient(140deg,#4A0059 0%,#780090 58%,#B23E00 145%);
  color:#fff;
}
.cat-panel-head{display:grid;gap:2px;min-width:0}
.cat-panel-tag{
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.cat-panel-head h2{margin:0;font-size:20px;letter-spacing:-.4px;color:#fff}
.cat-panel-sub{font-size:12px;color:rgba(255,255,255,.72);font-weight:600}
.cat-close{
  flex:0 0 auto;display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;padding:0;cursor:pointer;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  color:#fff;font-size:20px;line-height:1;
  transition:background .18s,transform .18s;
}
.cat-close:hover{background:rgba(255,255,255,.3);transform:rotate(90deg)}

.cat-list{
  flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  display:grid;align-content:start;gap:5px;padding:14px 12px;
  -webkit-overflow-scrolling:touch;
}
.cat-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 11px;border-radius:15px;
  color:var(--ink,#2A1030);font-size:14px;font-weight:700;
  border:1px solid transparent;background:#fff;
  transition:background .16s,border-color .16s,transform .16s,color .16s;
}
.cat-item:hover{background:#F8F1FD;border-color:#EFE0F8;color:var(--violet,#780090);transform:translateX(2px)}
.cat-item-num{
  flex:0 0 auto;display:grid;place-items:center;
  width:32px;height:32px;border-radius:11px;
  background:var(--violet-soft,#F7EEFD);color:var(--violet,#780090);
  font-size:11.5px;font-weight:800;letter-spacing:.02em;
}
.cat-item-txt{display:grid;gap:1px;min-width:0;flex:1 1 auto}
.cat-item-txt b{font-size:13.8px;line-height:1.3;letter-spacing:-.15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-item-txt i{font-style:normal;font-size:11px;font-weight:600;color:var(--muted,#8B7A9B)}
.cat-item-n{
  flex:0 0 auto;min-width:30px;text-align:center;
  font-size:11px;font-weight:800;color:var(--violet,#780090);
  background:var(--violet-soft,#F7EEFD);border-radius:999px;padding:3px 9px;
}
.cat-item.on{
  background:linear-gradient(140deg,#4A0059,#780090 70%,#B23E00 150%);
  border-color:transparent;color:#fff;
  box-shadow:0 16px 26px -18px rgba(120,0,144,.95);
}
.cat-item.on .cat-item-num{background:rgba(255,255,255,.18);color:#fff}
.cat-item.on .cat-item-txt b{color:#fff}
.cat-item.on .cat-item-n{background:rgba(255,255,255,.2);color:#fff}
.cat-item.on:hover{transform:none}

.cat-panel-foot{
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid #F0E6F8;
  font-size:11.5px;font-weight:700;color:var(--muted,#8B7A9B);
  text-align:center;background:#FCF9FE;
}

/* ---------------- 4. tablet & phone: same look, sized to fit ---------------- */
@media (max-width:820px){
  .shop-bar{
    position:relative;top:auto;
    padding:6px;border-radius:999px;gap:8px;
  }
  .shop-search input{padding-inline-start:40px;padding-block:11px;font-size:14px;background-position:14px center}
  html[dir="rtl"] .shop-search input{background-position:right 14px center}
  .shop-filter{font-size:11.5px;padding:8px 10px 8px 13px;max-width:42vw}
  .cat-fab{width:42px;height:62px;gap:4px}
  .cat-fab i{width:4.5px;height:4.5px}
  .cat-panel{width:min(340px,92vw);border-radius:0 22px 22px 0}
  .cat-panel-top{padding:18px 16px 15px 18px}
  .cat-panel-head h2{font-size:18px}
  .cat-item{padding:9px 10px;border-radius:14px}
  .cat-item-num{width:30px;height:30px;border-radius:10px;font-size:11px}
  .cat-item-txt b{font-size:13.2px}
}
@media (max-width:480px){
  .cat-fab{top:46%;width:38px;height:56px;gap:3.5px;border-radius:0 16px 16px 0}
  .cat-fab i{width:4px;height:4px}
  .cat-fab-dot{top:7px;right:7px;width:7px;height:7px}
  .cat-panel{width:min(320px,94vw)}
  .cat-panel-sub{font-size:11.5px}
  .shop-filter{max-width:38vw}
  .cat-item-txt b{font-size:13px}
}
@media (max-width:360px){
  .cat-panel{width:96vw}
  .shop-filter span{max-width:70px}
}