/* PixShow Shop shell v4.9
   - ecommerce-only header/navigation
   - in-shell bottom navigation on all device sizes
   - category side drawer
   - responsive by actual Shop container, not only viewport
*/
body.pix-shop-mode #siteHeader{display:none!important}
body.pix-shop-mode .pxshop-shopbar{display:none!important}
body.pix-shop-mode .mobile-app{container-type:inline-size;container-name:pxshop-shell;position:fixed;display:flex;flex-direction:column;background:#fff;overflow:hidden;transition:none!important;animation:none!important;min-width:0!important}
body.pix-shop-mode .main-content{height:auto!important;min-height:0!important;flex:1;overflow-y:auto!important;overflow-x:hidden!important;padding-top:14px;scrollbar-width:none}
body.pix-shop-mode .main-content::-webkit-scrollbar{display:none}


/* Full-shell transition loader: تنها لودر Shop؛ لودر عمومی سایت در Shop نمایش داده نمی‌شود. */
.pxshop-page-loader{position:absolute;inset:0;z-index:16000;display:grid;place-items:center;background:rgba(248,250,253,.97);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:1;visibility:visible;transition:opacity .18s ease,visibility .18s ease;direction:rtl}
.pxshop-page-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.pxshop-page-loader-card{position:relative;width:min(210px,74%);min-height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:18px 22px 20px;overflow:hidden;border:1px solid #e4eaf3;border-radius:24px;background:rgba(255,255,255,.96);box-shadow:0 24px 60px rgba(15,23,42,.11)}
.pxshop-page-loader-mark{position:relative;width:116px;height:44px;display:grid;place-items:center}
.pxshop-page-loader-mark img{position:relative;z-index:2;height:28px;width:auto;max-width:104px;object-fit:contain}
.pxshop-page-loader-mark span{position:absolute;width:46px;height:46px;border:1px solid rgba(47,109,246,.18);border-radius:50%;box-shadow:0 0 0 7px rgba(47,109,246,.035);animation:pxshop-loader-pulse 1.35s ease-in-out infinite}
.pxshop-page-loader-card small{font-size:9.5px;font-weight:850;color:#7b8798;text-align:center;line-height:1.8}
.pxshop-page-loader-bar{position:absolute;right:22px;left:22px;bottom:11px;height:3px;border-radius:999px;overflow:hidden;background:#edf2fa}
.pxshop-page-loader-bar i{position:absolute;top:0;bottom:0;width:42%;border-radius:inherit;background:linear-gradient(90deg,#2f6df6,#73a5ff);animation:pxshop-loader-slide 1s ease-in-out infinite}
@keyframes pxshop-loader-pulse{0%,100%{transform:scale(.84);opacity:.45}50%{transform:scale(1.08);opacity:1}}
@keyframes pxshop-loader-slide{0%{right:-45%}50%{right:30%}100%{right:105%}}
body.pix-shop-mode.pxshop-page-loading{cursor:progress}
body.pix-shop-mode.pxshop-page-loading .pxshop-page-loader{pointer-events:auto}
@media(prefers-reduced-motion:reduce){.pxshop-page-loader,.pxshop-page-loader-mark span,.pxshop-page-loader-bar i{transition:none;animation-duration:2s}}

/* Header */
.pxshop-shell-header{position:relative;flex:0 0 auto;border-bottom:1px solid #e9edf3;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:120;direction:rtl}
.pxshop-shell-header-inner{height:68px;display:flex;align-items:center;gap:10px;padding:0 16px;max-width:1180px;margin:0 auto;width:100%;min-width:0}
.pxshop-shell-back{width:38px;height:38px;flex:0 0 38px;border:1px solid #e5eaf1;border-radius:12px;background:#fff;color:#344054;display:grid;place-items:center;cursor:pointer;transition:.18s ease}
.pxshop-shell-back:hover{border-color:#cdd9ed;background:#f5f8fd;color:#2f6df6;transform:translateX(1px)}
.pxshop-shell-brand{display:flex;align-items:center;gap:8px;min-width:0;text-decoration:none;color:#101828;flex:0 1 auto}
.pxshop-shell-brand img{width:auto;height:31px;object-fit:contain;flex:none}
.pxshop-shell-brand span{min-width:0;white-space:nowrap}
.pxshop-shell-brand b,.pxshop-shell-brand small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pxshop-shell-brand b{font-size:12px;line-height:1.45;font-weight:900}
.pxshop-shell-brand small{font-size:8px;color:#98a2b3;margin-top:1px}
.pxshop-shell-desktop-nav{margin-right:auto;display:flex;align-items:center;justify-content:flex-end;gap:4px;min-width:0}
.pxshop-shell-desktop-nav a,.pxshop-shell-desktop-nav button{height:38px;border:0;border-radius:11px;background:transparent;color:#475467;padding:0 9px;display:flex;align-items:center;gap:6px;text-decoration:none;font:inherit;font-size:10px;font-weight:850;cursor:pointer;white-space:nowrap}
.pxshop-shell-desktop-nav a:hover,.pxshop-shell-desktop-nav button:hover{background:#f5f8fc;color:#2f6df6}
.pxshop-shell-desktop-nav i{color:#2f6df6}
.pxshop-shell-desktop-nav b[data-shop-cart-count]{min-width:18px;height:18px;border-radius:999px;background:#2f6df6;color:#fff;display:grid;place-items:center;font-size:8px;padding:0 4px}
.pxshop-shell-desktop-nav b[data-shop-cart-count]:not(.has-items){display:none}
.pxshop-shell-mobile-actions{margin-right:auto;display:none;align-items:center;gap:5px;flex:none}
.pxshop-shell-mobile-actions button,.pxshop-shell-mobile-actions a{width:38px;height:38px;border:1px solid #e7ebf1;border-radius:11px;background:#fff;color:#475467;display:grid;place-items:center;text-decoration:none;position:relative;cursor:pointer}
.pxshop-shell-mobile-actions i{font-size:14px}
.pxshop-shell-cart b{position:absolute;top:-5px;left:-5px;min-width:18px;height:18px;border-radius:999px;background:#2f6df6;color:#fff;display:grid;place-items:center;padding:0 4px;font-size:8px;border:2px solid #fff}
.pxshop-shell-cart b:not(.has-items){display:none}
.pxshop-shell-secure{margin-right:auto;display:flex;align-items:center;gap:5px;color:#067647;background:#ecfdf3;border-radius:999px;padding:7px 10px;font-size:9px;font-weight:850;white-space:nowrap}
.pxshop-shell-secure i{font-size:10px}

/* Bottom shop navigation: intentionally stays inside the app frame on tablets/desktop too. */
.pxshop-shell-bottom{position:absolute;right:50%;bottom:0;transform:translateX(50%);z-index:5000;width:min(720px,100%);height:72px;padding:7px 8px calc(7px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-around;background:rgba(255,255,255,.98);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid #e7ecf3;border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 -8px 25px rgba(15,23,42,.07);direction:rtl}
.pxshop-shell-bottom>a,.pxshop-shell-bottom>button{position:relative;flex:1;min-width:0;height:56px;border:0;background:transparent;text-decoration:none;color:#98a2b3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:inherit;cursor:pointer}
.pxshop-shell-bottom span{position:relative;width:30px;height:28px;border-radius:10px;display:grid;place-items:center;font-size:15px}
.pxshop-shell-bottom small{font-size:8.5px;font-weight:850;white-space:nowrap}
.pxshop-shell-bottom .active{color:#2f6df6}
.pxshop-shell-bottom .active span{background:#eef4ff}
.pxshop-shell-bottom-cart{margin-top:-17px}
.pxshop-shell-bottom-cart span{width:48px;height:48px;border-radius:16px!important;background:linear-gradient(135deg,#2f6df6,#2f6df6)!important;color:#fff!important;box-shadow:0 10px 24px rgba(37,99,235,.25)}
.pxshop-shell-bottom-cart b{position:absolute;top:-5px;left:-5px;min-width:18px;height:18px;border-radius:999px;background:#fff;color:#2f6df6;display:grid;place-items:center;padding:0 4px;font-size:8px;border:1px solid #dbe7fb}
.pxshop-shell-bottom-cart b:not(.has-items){display:none}
body.pix-shop-mode:not(.pix-shop-checkout-mode):not(.pix-shop-product-mode) .main-content{padding-bottom:96px!important}
body.pix-shop-checkout-mode .main-content{padding-bottom:18px!important}

/* Category drawer */
.pxshop-cat-drawer{position:absolute;inset:0;z-index:9000;pointer-events:none;visibility:hidden;direction:rtl}
.pxshop-cat-drawer.open{pointer-events:auto;visibility:visible}
.pxshop-cat-backdrop{position:absolute;inset:0;border:0;background:rgba(15,23,42,.36);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .22s ease;cursor:pointer}
.pxshop-cat-drawer.open .pxshop-cat-backdrop{opacity:1}
.pxshop-cat-panel{position:absolute;right:0;top:0;bottom:0;width:min(390px,92%);background:#fff;box-shadow:-18px 0 50px rgba(15,23,42,.16);display:flex;flex-direction:column;transform:translateX(102%);transition:transform .25s cubic-bezier(.22,.7,.2,1);overflow:hidden}
.pxshop-cat-drawer.open .pxshop-cat-panel{transform:translateX(0)}
.pxshop-cat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 16px 13px;border-bottom:1px solid #eef1f5}
.pxshop-cat-head span{display:block;color:#2f6df6;font-size:9px;font-weight:850;margin-bottom:2px}
.pxshop-cat-head h2{font-size:17px;margin:0;color:#101828}
.pxshop-cat-close{width:38px;height:38px;border:1px solid #e6ebf2;border-radius:12px;background:#f8fafc;color:#475467;display:grid;place-items:center;cursor:pointer}
.pxshop-cat-search{margin:12px 14px 8px;height:44px;border:1px solid #e1e7f0;border-radius:13px;background:#fafcff;display:flex;align-items:center;gap:8px;padding:0 12px;color:#667085}
.pxshop-cat-search:focus-within{border-color:#94b8f7;box-shadow:0 0 0 3px rgba(18,103,229,.07)}
.pxshop-cat-search input{border:0;outline:0;background:transparent;min-width:0;flex:1;font:inherit;font-size:11px;color:#1d2939}
.pxshop-cat-body{flex:1;overflow:auto;padding:5px 12px 14px;scrollbar-width:thin;overscroll-behavior:contain}
.pxshop-cat-loading,.pxshop-cat-empty{min-height:150px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#98a2b3;font-size:10px;text-align:center}
.pxshop-cat-root{border:1px solid #edf0f5;border-radius:14px;background:#fff;margin:7px 0;overflow:hidden}
.pxshop-cat-root>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;padding:12px 11px;background:#fff}
.pxshop-cat-root>summary::-webkit-details-marker{display:none}
.pxshop-cat-root[open]>summary{background:#f8faff;border-bottom:1px solid #edf1f7}
.pxshop-cat-root-icon{width:34px;height:34px;border-radius:11px;background:#eef4ff;color:#2f6df6;display:grid;place-items:center;flex:none}
.pxshop-cat-root-copy{min-width:0;flex:1}
.pxshop-cat-root-copy b,.pxshop-cat-root-copy small{display:block}
.pxshop-cat-root-copy b{font-size:11.5px;color:#1d2939}
.pxshop-cat-root-copy small{font-size:8.5px;color:#98a2b3;margin-top:2px}
.pxshop-cat-root-chevron{font-size:9px;color:#98a2b3;transition:transform .2s ease}
.pxshop-cat-root[open]>summary .pxshop-cat-root-chevron{transform:rotate(90deg)}
.pxshop-cat-children{padding:7px 9px 10px;display:grid;gap:4px}
.pxshop-cat-item{display:flex;align-items:center;gap:8px;min-height:39px;border-radius:10px;padding:6px 8px;text-decoration:none;color:#344054;transition:.16s ease}
.pxshop-cat-item:hover{background:#f5f8fd;color:#2f6df6}
.pxshop-cat-item.level-2{padding-right:23px}
.pxshop-cat-item.level-3{padding-right:38px;font-size:10px}
.pxshop-cat-item i{width:16px;color:#b1bac8;font-size:8px;text-align:center;flex:none}
.pxshop-cat-item span{min-width:0;flex:1;font-size:10.5px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pxshop-cat-item em{font-style:normal;color:#98a2b3;background:#f4f6f8;border-radius:999px;padding:3px 6px;font-size:8px;white-space:nowrap}
.pxshop-cat-all{min-height:52px;margin:8px 12px 12px;border-radius:13px;background:#2f6df6;color:#fff;text-decoration:none;display:flex;align-items:center;gap:9px;padding:0 13px;font-size:10px;font-weight:900}
.pxshop-cat-all span{flex:1}.pxshop-cat-all>i:last-child{font-size:9px}
body.pxshop-category-open .main-content{overflow:hidden!important}

/* App frame */
@media(min-width:501px){
 body.pix-shop-mode .mobile-app{top:18px!important;left:50%!important;right:auto!important;bottom:auto!important;transform:translateX(-50%)!important;height:calc(100vh - 36px)!important;height:calc(100dvh - 36px)!important;margin:0!important;border-radius:24px;box-shadow:0 24px 60px rgba(15,23,42,.12);transition:none!important}
 body.pix-shop-mode .pxshop-shell-header-inner{padding-inline:22px}
}
@media(max-width:500px){
 body.pix-shop-mode .mobile-app{top:0!important;left:0!important;right:auto!important;bottom:auto!important;transform:none!important;border-radius:0!important;margin:0!important;width:100%!important;max-width:none!important;height:100vh!important;height:100dvh!important;transition:none!important}
 .pxshop-shell-bottom{width:100%;border-left:0;border-right:0;border-radius:16px 16px 0 0}
}

/* Actual app-width responsiveness. This fixes desktop/tablet windows where viewport width is misleading. */
@container pxshop-shell (max-width:820px){
 .pxshop-shell-desktop-nav{display:none}
 .pxshop-shell-mobile-actions{display:flex}
 .pxshop-shell-header-inner{height:62px;padding:0 11px;gap:7px}
 .pxshop-shell-brand img{height:28px}
 .pxshop-shell-brand b{font-size:11px}
 .pxshop-shell-brand small{font-size:7.5px}
 .pxshop-shell-secure span{display:none}
 .pxshop-shell-secure{margin-right:auto;width:34px;height:34px;padding:0;display:grid;place-items:center}
}
@container pxshop-shell (max-width:430px){
 .pxshop-shell-header-inner{gap:5px}
 .pxshop-shell-back{width:36px;height:36px;flex-basis:36px}
 .pxshop-shell-mobile-actions{gap:4px}
 .pxshop-shell-mobile-actions button,.pxshop-shell-mobile-actions a{width:36px;height:36px}
 .pxshop-shell-brand{gap:5px}
 .pxshop-shell-brand span{display:none}
 .pxshop-shell-brand img{height:29px;max-width:88px}
 .pxshop-shell-bottom small{font-size:8px}
}

/* Fallback when container queries are not supported. */
@media(max-width:820px){
 .pxshop-shell-desktop-nav{display:none}
 .pxshop-shell-mobile-actions{display:flex}
}

/* =========================================================
   v5.0 — PixShow Shop navigation polish
   Primary brand color is intentionally fixed to #2f6df6.
   ========================================================= */
body.pix-shop-mode{
  --pxshop-primary:#2f6df6;
  --pxshop-primary-soft:#eef4ff;
}

/* Keep all active/navigation blues consistent with the Shop brand. */
body.pix-shop-mode .pxshop-shell-desktop-nav b[data-shop-cart-count],
body.pix-shop-mode .pxshop-shell-bottom-cart span,
body.pix-shop-mode .pxshop-cat-all,
body.pix-shop-mode .pxshop-shell-mobile-actions b.has-items{background:var(--pxshop-primary)!important}
body.pix-shop-mode .pxshop-shell-bottom .active,
body.pix-shop-mode .pxshop-shell-bottom-cart b,
body.pix-shop-mode .pxshop-shell-desktop-nav button:hover,
body.pix-shop-mode .pxshop-shell-desktop-nav a:hover,
body.pix-shop-mode .pxshop-cat-tabs button.active,
body.pix-shop-mode .pxshop-cat-rail-item.active{color:var(--pxshop-primary)!important}
body.pix-shop-mode .pxshop-shell-bottom .active span{background:var(--pxshop-primary-soft)!important}

/* Category drawer inspired by the supplied mobile reference. */
.pxshop-cat-panel-v2{
  width:min(560px,100%)!important;
  max-width:100%;
  border-radius:0;
  box-shadow:-18px 0 55px rgba(15,23,42,.16);
}
.pxshop-cat-tabs{
  height:50px;
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:0 14px;
  border-bottom:1px solid #edf0f5;
  background:#fff;
  flex:none;
}
.pxshop-cat-tabs button{
  position:relative;
  border:0;
  background:transparent;
  color:#98a2b3;
  font:inherit;
  font-size:11px;
  font-weight:850;
  cursor:pointer;
}
.pxshop-cat-tabs button:after{
  content:"";
  position:absolute;
  right:8px;
  left:8px;
  bottom:-1px;
  height:2px;
  background:transparent;
  border-radius:999px 999px 0 0;
}
.pxshop-cat-tabs button.active:after{background:var(--pxshop-primary)}
.pxshop-cat-searchbar{
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  background:#fff;
  border-bottom:1px solid #f0f2f5;
  flex:none;
}
.pxshop-cat-close-v2{
  width:36px;height:36px;flex:0 0 36px;
  border:0;border-radius:10px;background:#f7f9fc;color:#667085;
  display:grid;place-items:center;cursor:pointer;
}
.pxshop-cat-searchbar .pxshop-cat-search{
  margin:0!important;
  height:36px!important;
  flex:1;
}
.pxshop-cat-layout{
  min-height:0;
  flex:1;
  display:grid;
  grid-template-columns:102px minmax(0,1fr);
  overflow:hidden;
  direction:rtl;
  background:#fff;
}
.pxshop-cat-rail{
  min-height:0;
  overflow-y:auto;
  border-left:1px solid #eceff4;
  background:#fafafa;
  scrollbar-width:none;
}
.pxshop-cat-rail::-webkit-scrollbar{display:none}
.pxshop-cat-rail-item{
  position:relative;
  width:100%;
  min-height:96px;
  border:0;
  border-bottom:1px solid #e9edf2;
  background:#fafafa;
  color:#344054;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:9px 6px;
  font:inherit;
  cursor:pointer;
}
.pxshop-cat-rail-item.active{
  background:#fff;
  box-shadow:inset -3px 0 0 var(--pxshop-primary);
}
.pxshop-cat-rail-icon{
  width:38px;height:38px;border-radius:13px;
  border:1px solid #d9dee8;background:#fff;
  display:grid;place-items:center;color:#667085;font-size:16px;
}
.pxshop-cat-rail-item.active .pxshop-cat-rail-icon{
  border-color:#bfd0ff;background:#f4f7ff;color:var(--pxshop-primary)
}
.pxshop-cat-rail-item span{
  max-width:88px;
  font-size:9px;
  line-height:1.55;
  text-align:center;
  font-weight:750;
}
.pxshop-cat-main{min-width:0;min-height:0;overflow:hidden;background:#fff}
.pxshop-cat-body-v2,.pxshop-brand-body{
  height:100%;
  overflow-y:auto;
  padding:9px 12px 96px!important;
  scrollbar-width:thin;
}
.pxshop-cat-current-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:44px;padding:3px 2px 8px;margin-bottom:4px;
  border-bottom:1px solid #f0f2f5;
}
.pxshop-cat-current-head a{
  color:var(--pxshop-primary);font-size:11px;font-weight:900;text-decoration:none
}
.pxshop-cat-current-head small{color:#98a2b3;font-size:8px}
.pxshop-cat-group{border-bottom:1px solid #f0f2f5}
.pxshop-cat-group:last-child{border-bottom:0}
.pxshop-cat-group>summary{
  min-height:45px;
  list-style:none;
  cursor:pointer;
  display:flex;align-items:center;gap:8px;
  padding:7px 1px;
  color:#1d2939;
}
.pxshop-cat-group>summary::-webkit-details-marker{display:none}
.pxshop-cat-group>summary b{flex:1;font-size:11px;font-weight:850}
.pxshop-cat-group>summary i{font-size:8px;color:#667085;transition:transform .16s ease}
.pxshop-cat-group[open]>summary i{transform:rotate(90deg)}
.pxshop-cat-subitems{padding:0 10px 9px 0;display:grid;gap:2px}
.pxshop-cat-subitem{
  min-height:34px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  text-decoration:none;color:#667085;border-radius:9px;padding:5px 8px;
  font-size:9.5px;
}
.pxshop-cat-subitem:hover{background:#f7f9fc;color:var(--pxshop-primary)}
.pxshop-cat-subitem b{font-weight:700;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pxshop-cat-subitem small{font-size:7.5px;color:#b0b8c5;white-space:nowrap}
.pxshop-cat-subitem.all{color:var(--pxshop-primary);font-weight:850;background:#fafcff}
.pxshop-cat-banner{
  position:sticky;
  bottom:0;
  margin-top:12px;
  min-height:54px;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(135deg,#7b6cff,#a177ff);
  color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;
  box-shadow:0 -8px 18px rgba(255,255,255,.95);
}
.pxshop-cat-banner b{font-size:11px}.pxshop-cat-banner span{font-size:8px;opacity:.88}.pxshop-cat-banner i{font-size:20px}
.pxshop-brand-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.pxshop-brand-card{
  min-width:0;border:1px solid #edf0f5;border-radius:12px;background:#fff;
  color:#344054;text-decoration:none;padding:10px;display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;align-items:center
}
.pxshop-brand-card img,.pxshop-brand-card .placeholder{width:36px;height:36px;border-radius:10px;object-fit:contain;background:#f8fafc;display:grid;place-items:center;color:#98a2b3}
.pxshop-brand-card b,.pxshop-brand-card small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pxshop-brand-card b{font-size:10px}.pxshop-brand-card small{font-size:8px;color:#98a2b3;margin-top:2px}
.pxshop-cat-loading.compact{min-height:90px}

@media(max-width:500px){
  .pxshop-cat-panel-v2{width:100%!important}
  .pxshop-cat-layout{grid-template-columns:94px minmax(0,1fr)}
  .pxshop-cat-rail-item{min-height:90px}
}

/* =========================================================
   v5.1 — Hierarchical accordion navigation
   Simple mental model: گروه > زیرگروه > زیرگروه بعدی
   ========================================================= */
.pxshop-cat-panel-v3{width:min(430px,100%)!important;max-width:100%;}
.pxshop-cat-panes{flex:1;min-height:0;overflow:hidden;background:#fff;}
.pxshop-cat-pane{display:none;height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;padding:8px 10px 18px;scrollbar-width:thin;}
.pxshop-cat-pane.active{display:block;}
.pxshop-cat-tree-v3{display:grid;gap:7px;}

.pxshop-tree-group{border:1px solid #edf1f6;border-radius:14px;background:#fff;overflow:hidden;}
.pxshop-tree-group>summary{list-style:none;min-height:48px;padding:8px 10px;display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;transition:.16s ease;}
.pxshop-tree-group>summary::-webkit-details-marker{display:none;}
.pxshop-tree-group>summary:hover{background:#f8faff;}
.pxshop-tree-group[open]>summary{background:#f7faff;color:#1f5fd2;}
.pxshop-tree-group-icon,.pxshop-tree-leaf-icon{width:32px;height:32px;border-radius:10px;background:#f3f6fb;color:#667085;display:grid;place-items:center;flex:none;font-size:12px;}
.pxshop-tree-group[open]>summary .pxshop-tree-group-icon{background:#eef4ff;color:#2f6df6;}
.pxshop-tree-title{min-width:0;flex:1;font-size:11px;font-weight:850;color:#253044;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pxshop-tree-group>summary small,.pxshop-tree-leaf small{font-size:8px;color:#98a2b3;white-space:nowrap;}
.pxshop-tree-chevron{font-size:8px;color:#98a2b3;transition:transform .18s ease;}
.pxshop-tree-group[open]>summary .pxshop-tree-chevron{transform:rotate(180deg);color:#2f6df6;}
.pxshop-tree-children{padding:5px 8px 9px 8px;border-top:1px solid #f0f3f7;display:grid;gap:5px;background:#fff;}
.pxshop-tree-all{min-height:38px;border-radius:10px;background:#f8faff;color:#2f6df6;text-decoration:none;display:flex;align-items:center;gap:8px;padding:0 10px;font-size:9.5px;font-weight:900;}
.pxshop-tree-all span{flex:1;}
.pxshop-tree-all i{font-size:8px;}
.pxshop-tree-leaf{min-height:44px;border-radius:11px;display:flex;align-items:center;gap:9px;padding:6px 8px;text-decoration:none;color:#344054;transition:.15s ease;}
.pxshop-tree-leaf:hover{background:#f8faff;color:#2f6df6;}
.pxshop-tree-go{font-size:8px;color:#b2bac7;}

/* nested levels are indented softly, not like the old two-column reference */
.pxshop-tree-group.level-1,.pxshop-tree-leaf.level-1{margin-right:10px;}
.pxshop-tree-group.level-2,.pxshop-tree-leaf.level-2{margin-right:20px;}
.pxshop-tree-group.level-3,.pxshop-tree-leaf.level-3,.pxshop-tree-group.level-4,.pxshop-tree-leaf.level-4{margin-right:28px;}
.pxshop-tree-group.level-1{border-radius:12px;border-color:#f0f2f6;}
.pxshop-tree-group.level-2{border-radius:11px;border-color:#f3f4f7;}

.pxshop-brand-body-v3{min-height:100%;}
.pxshop-brand-list-v3{display:grid;grid-template-columns:1fr;gap:7px;}
.pxshop-brand-row-v3{min-height:58px;border:1px solid #edf1f6;border-radius:13px;background:#fff;display:flex;align-items:center;gap:10px;padding:7px 9px;text-decoration:none;color:#344054;transition:.16s ease;}
.pxshop-brand-row-v3:hover{border-color:#cfe0ff;background:#f9fbff;color:#2f6df6;}
.pxshop-brand-logo{width:42px;height:42px;border-radius:10px;border:1px solid #edf1f6;background:#fff;display:grid;place-items:center;overflow:hidden;flex:none;}
.pxshop-brand-logo img{width:100%;height:100%;object-fit:contain;padding:4px;}
.pxshop-brand-logo.placeholder{background:#f6f8fb;color:#98a2b3;}
.pxshop-brand-name{min-width:0;flex:1;}
.pxshop-brand-name b,.pxshop-brand-name small{display:block;}
.pxshop-brand-name b{font-size:10.5px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pxshop-brand-name small{font-size:8px;color:#98a2b3;margin-top:2px;}
.pxshop-brand-row-v3>i{font-size:8px;color:#b1bac8;}

@container pxshop-shell (max-width:520px){
  .pxshop-cat-panel-v3{width:100%!important;}
  .pxshop-cat-pane{padding-inline:8px;}
  .pxshop-tree-group.level-2,.pxshop-tree-leaf.level-2{margin-right:15px;}
  .pxshop-tree-group.level-3,.pxshop-tree-leaf.level-3,.pxshop-tree-group.level-4,.pxshop-tree-leaf.level-4{margin-right:20px;}
}

/* v5.2 - departments inside category drawer */
.pxshop-tree-department{border:1px solid #e8edf6;border-radius:16px;background:#fff;margin-bottom:10px;overflow:hidden}.pxshop-tree-department>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 15px;cursor:pointer;list-style:none;font-weight:800;color:#172033}.pxshop-tree-department>summary::-webkit-details-marker{display:none}.pxshop-tree-department>summary span{display:flex;align-items:center;gap:9px}.pxshop-tree-department>summary span i{color:#2f6df6}.pxshop-tree-department[open]>summary{background:#f6f9ff;color:#2f6df6}.pxshop-tree-department-body{padding:8px}


/* v5.2 — bridge between Shop and PixShow business directory */
.pxshop-shell-platform-link{height:34px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border:1px solid #e3e9f2;border-radius:999px;background:#f8fbff;color:#365273;text-decoration:none;font-size:9px;font-weight:850;white-space:nowrap;flex:none;transition:.18s ease}
.pxshop-shell-platform-link i{color:#2f6df6;font-size:10px}
.pxshop-shell-platform-link:hover{border-color:#bfd0ee;background:#eef5ff;color:#174ea6}
@container pxshop-shell (max-width:820px){.pxshop-shell-platform-link{width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:11px}.pxshop-shell-platform-link span{display:none}}
@container pxshop-shell (max-width:430px){.pxshop-shell-platform-link{width:34px;height:34px}}


/* ===== Shop shell v6: search-first header ===== */
.pxshop-shell-header-v2{box-shadow:0 8px 26px rgba(15,23,42,.04)}
.pxshop-shell-header-v2 .pxshop-shell-header-row{max-width:1280px;height:74px}
.pxshop-shell-search-wrap{position:relative;flex:1;max-width:520px;min-width:210px;margin-inline:10px}
.pxshop-shell-search{height:44px;border:1px solid #dfe6ef;border-radius:14px;background:#f8fafc;display:flex;align-items:center;gap:9px;padding:0 12px;transition:.16s ease}
.pxshop-shell-search:focus-within{background:#fff;border-color:#9bb9f2;box-shadow:0 0 0 4px rgba(47,109,246,.07)}
.pxshop-shell-search>i{color:#7c8a9e;font-size:13px}.pxshop-shell-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:11.5px;color:#1f2937}.pxshop-shell-search-clear{width:26px;height:26px;border:0;background:transparent;color:#a0aaba;border-radius:8px;cursor:pointer}
.pxshop-shell-search-results{position:absolute;top:calc(100% + 8px);right:0;left:0;z-index:13000;background:#fff;border:1px solid #e3e9f2;border-radius:16px;box-shadow:0 20px 60px rgba(15,23,42,.15);padding:8px;display:none;max-height:min(520px,70vh);overflow:auto}.pxshop-shell-search-results.open{display:block}
.pxshop-search-loading,.pxshop-search-empty{padding:20px;text-align:center;color:#8b98aa;font-size:10.5px}.pxshop-search-group+ .pxshop-search-group{border-top:1px solid #edf1f6;margin-top:6px;padding-top:7px}.pxshop-search-group>small{display:block;padding:4px 7px 7px;color:#7b8798;font-size:9px;font-weight:900}
.pxshop-search-group>a{display:flex;align-items:center;gap:9px;padding:8px;border-radius:11px;text-decoration:none;color:#344054}.pxshop-search-group>a:hover{background:#f6f9fe}.pxshop-search-group>a>span:nth-child(2){min-width:0;flex:1}.pxshop-search-group b,.pxshop-search-group em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pxshop-search-group b{font-size:10.5px}.pxshop-search-group em{font-style:normal;font-size:8.5px;color:#98a2b3;margin-top:2px}.pxshop-search-group>a>i{color:#a3afc0;font-size:9px}
.pxshop-search-thumb{width:42px;height:42px;flex:0 0 42px;border-radius:11px;background:#f1f5f9;display:grid;place-items:center;overflow:hidden;color:var(--cat-color,#2f6df6)}.pxshop-search-thumb img{width:100%;height:100%;object-fit:cover}.pxshop-search-thumb.icon{background:#eef4ff}
.pxshop-shell-mobile-search-row{display:none;padding:0 12px 10px}.pxshop-shell-mobile-search-row .pxshop-shell-search-wrap{max-width:none;margin:0;width:100%}
@container pxshop-shell (max-width:760px){.pxshop-shell-header-v2 .pxshop-shell-header-row{height:62px;padding:0 10px}.pxshop-shell-header-v2 .pxshop-shell-header-row>.pxshop-shell-search-wrap{display:none}.pxshop-shell-mobile-search-row{display:block}.pxshop-shell-brand span{display:none}.pxshop-shell-brand img{height:28px}.pxshop-shell-mobile-actions{display:flex}.pxshop-shell-desktop-nav{display:none}.pxshop-shell-header{background:#fff}}

/* =========================================================
   v7.0 — Category Drawer Premium Hierarchy
   Root cards are visually strong; nested levels use a branch
   line, compact cards and category-specific accent colors.
   ========================================================= */
.pxshop-cat-panel-v7{
  width:min(460px,100%)!important;
  max-width:100%;
  background:#f7f9fc;
  box-shadow:-24px 0 70px rgba(15,23,42,.18);
}
.pxshop-cat-panel-v7 .pxshop-cat-tabs{
  height:54px;
  padding:0 16px;
  gap:8px;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #e9eef5;
}
.pxshop-cat-panel-v7 .pxshop-cat-tabs button{
  color:#8b95a6;
  font-size:11px;
  font-weight:900;
  border-radius:12px 12px 0 0;
}
.pxshop-cat-panel-v7 .pxshop-cat-tabs button.active{
  color:#2f6df6!important;
  background:linear-gradient(180deg,rgba(47,109,246,.045),rgba(47,109,246,0));
}
.pxshop-cat-panel-v7 .pxshop-cat-tabs button:after{
  right:20%;left:20%;height:3px;
  background:transparent;
}
.pxshop-cat-panel-v7 .pxshop-cat-tabs button.active:after{
  background:linear-gradient(90deg,#5d8cff,#2f6df6);
  box-shadow:0 -2px 8px rgba(47,109,246,.18);
}
.pxshop-cat-panel-v7 .pxshop-cat-searchbar{
  padding:9px 11px;
  gap:8px;
  background:#fff;
  border-bottom:1px solid #edf1f6;
  box-shadow:0 8px 24px rgba(15,23,42,.025);
}
.pxshop-cat-panel-v7 .pxshop-cat-close-v2{
  width:38px;height:38px;flex-basis:38px;
  border:1px solid #e8edf5;
  background:#f7f9fc;
  color:#536075;
  border-radius:12px;
}
.pxshop-cat-panel-v7 .pxshop-cat-close-v2:hover{background:#eef4ff;color:#2f6df6;border-color:#d6e2fb}
.pxshop-cat-panel-v7 .pxshop-cat-search{
  height:38px!important;
  border-radius:12px;
  background:#f8fafc;
  border-color:#dde5f0;
}
.pxshop-cat-panel-v7 .pxshop-cat-search i{color:#66758d}
.pxshop-cat-panel-v7 .pxshop-cat-panes{background:#f7f9fc}
.pxshop-cat-panel-v7 .pxshop-cat-pane{
  padding:10px 10px 22px;
  background:linear-gradient(180deg,#f8fafc 0,#f6f8fb 100%);
}
.pxshop-cat-panel-v7 .pxshop-cat-tree-v3{gap:10px}

/* ----- Root/group cards ----- */
.pxshop-tree-group-v7{
  position:relative;
  border:1px solid #e9eef5;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.pxshop-tree-group-v7>summary{
  position:relative;
  list-style:none;
  min-height:52px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  cursor:pointer;
  user-select:none;
  color:#243047;
  background:#fff;
  transition:.18s ease;
}
.pxshop-tree-group-v7>summary::-webkit-details-marker{display:none}
.pxshop-tree-group-v7>summary:hover{background:var(--cat-soft-2,#f8faff)}
.pxshop-tree-group-v7[open]{border-color:var(--cat-border,#dbe6fb)}
.pxshop-tree-group-v7[open]>summary{background:linear-gradient(135deg,var(--cat-soft,#eef4ff),#fff 78%)}
.pxshop-tree-group-v7.is-root{
  border-color:var(--cat-border,#dfe8f7);
  border-radius:18px;
  box-shadow:0 5px 18px rgba(15,23,42,.045);
}
.pxshop-tree-group-v7.is-root[open]{box-shadow:0 10px 30px rgba(15,23,42,.075)}
.pxshop-tree-group-v7.is-root>summary{
  min-height:68px;
  padding:10px 12px;
}
.pxshop-tree-group-v7.is-root>summary:before{
  content:"";
  position:absolute;
  right:0;
  top:14px;
  bottom:14px;
  width:4px;
  border-radius:4px 0 0 4px;
  background:var(--cat-accent,#2f6df6);
  opacity:.9;
}
.pxshop-tree-group-v7.is-root.is-featured>summary:after{
  content:"ویژه";
  position:absolute;
  top:7px;
  left:42px;
  padding:2px 6px;
  border-radius:999px;
  background:var(--cat-soft,#eef4ff);
  color:var(--cat-accent,#2f6df6);
  font-size:7px;
  font-weight:950;
}

/* ----- Icon / image visual ----- */
.pxshop-tree-visual{
  width:34px;height:34px;flex:0 0 34px;
  border-radius:11px;
  display:grid;place-items:center;
  overflow:hidden;
  border:1px solid var(--cat-border,#e1e8f3);
  background:var(--cat-soft,#f2f6ff);
  color:var(--cat-accent,#2f6df6);
  font-size:13px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
.pxshop-tree-group-v7.is-root .pxshop-tree-visual{
  width:42px;height:42px;flex-basis:42px;
  border-radius:14px;
  font-size:17px;
}
.pxshop-tree-visual.has-image{background:#fff}
.pxshop-tree-visual img{width:100%;height:100%;object-fit:cover}
.pxshop-tree-copy{min-width:0;flex:1}
.pxshop-tree-copy b,.pxshop-tree-copy small{display:block}
.pxshop-tree-copy b{
  color:#1e293b;
  font-size:10.7px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pxshop-tree-group-v7.is-root .pxshop-tree-copy b{font-size:12px;color:#182235}
.pxshop-tree-copy small{
  margin-top:2px;
  color:#8f9aae;
  font-size:7.8px;
  font-weight:650;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pxshop-tree-count{
  min-width:27px;height:22px;
  padding:0 7px;
  border-radius:999px;
  display:grid;place-items:center;
  background:#f3f5f8;
  color:#7f8b9d;
  font-size:7.8px;
  font-weight:900;
  flex:none;
}
.pxshop-tree-group-v7[open]>summary .pxshop-tree-count,
.pxshop-tree-leaf-v7.is-current .pxshop-tree-count{
  background:var(--cat-soft,#eef4ff);
  color:var(--cat-accent,#2f6df6);
}
.pxshop-tree-toggle{
  width:26px;height:26px;flex:0 0 26px;
  border-radius:9px;
  display:grid;place-items:center;
  color:#98a3b4;
  background:#f7f9fc;
  font-size:8px;
  transition:.18s ease;
}
.pxshop-tree-group-v7[open]>summary .pxshop-tree-toggle{
  color:var(--cat-accent,#2f6df6);
  background:var(--cat-soft,#eef4ff);
}
.pxshop-tree-group-v7[open]>summary .pxshop-tree-toggle i{transform:rotate(180deg)}
.pxshop-tree-toggle i{transition:transform .18s ease}

/* ----- Children / tree branch ----- */
.pxshop-tree-children-v7{
  position:relative;
  padding:7px 9px 10px;
  border-top:1px solid var(--cat-border,#edf1f6);
  background:linear-gradient(180deg,var(--cat-soft-2,#fbfcff),#fff 70px);
}
.pxshop-tree-all-v7{
  min-height:42px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 9px;
  margin-bottom:7px;
  border:1px solid var(--cat-border,#dce7f8);
  border-radius:12px;
  color:var(--cat-accent,#2f6df6);
  background:var(--cat-soft,#eef4ff);
  text-decoration:none;
  transition:.16s ease;
}
.pxshop-tree-all-v7:hover{transform:translateX(-2px);filter:saturate(1.08)}
.pxshop-tree-all-dot{
  width:28px;height:28px;flex:0 0 28px;border-radius:9px;
  display:grid;place-items:center;background:#fff;color:var(--cat-accent,#2f6df6);font-size:10px
}
.pxshop-tree-all-v7>span:nth-child(2){min-width:0;flex:1}
.pxshop-tree-all-v7 b,.pxshop-tree-all-v7 small{display:block}
.pxshop-tree-all-v7 b{font-size:9.2px;font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pxshop-tree-all-v7 small{font-size:7.2px;margin-top:1px;opacity:.68}
.pxshop-tree-all-v7>i{font-size:8px}
.pxshop-tree-branch-v7{
  position:relative;
  display:grid;
  gap:6px;
  padding-right:13px;
}
.pxshop-tree-branch-v7:before{
  content:"";
  position:absolute;
  right:3px;
  top:4px;
  bottom:5px;
  width:2px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--cat-border,#dbe5f4),rgba(219,229,244,.2));
}
.pxshop-tree-branch-v7>.pxshop-tree-group-v7:before,
.pxshop-tree-branch-v7>.pxshop-tree-leaf-v7:before{
  content:"";
  position:absolute;
  right:-10px;
  top:25px;
  width:10px;
  height:2px;
  background:var(--cat-border,#dbe5f4);
}

/* ----- Nested groups become lighter as depth grows ----- */
.pxshop-tree-group-v7.level-1,
.pxshop-tree-group-v7.level-2,
.pxshop-tree-group-v7.level-3,
.pxshop-tree-group-v7.level-4{
  margin-right:0;
  overflow:visible;
  border-radius:12px;
  box-shadow:none;
}
.pxshop-tree-group-v7.level-1>summary{min-height:50px}
.pxshop-tree-group-v7.level-2>summary,
.pxshop-tree-group-v7.level-3>summary,
.pxshop-tree-group-v7.level-4>summary{min-height:46px;padding-block:6px}
.pxshop-tree-group-v7.level-2 .pxshop-tree-visual,
.pxshop-tree-group-v7.level-3 .pxshop-tree-visual,
.pxshop-tree-group-v7.level-4 .pxshop-tree-visual{width:30px;height:30px;flex-basis:30px;border-radius:9px;font-size:11px}

/* ----- Leaf rows ----- */
.pxshop-tree-leaf-v7{
  position:relative;
  min-height:48px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border:1px solid #edf1f6;
  border-radius:12px;
  background:#fff;
  color:#344054;
  text-decoration:none;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.pxshop-tree-leaf-v7:hover{
  transform:translateX(-2px);
  border-color:var(--cat-border,#d7e4f7);
  background:var(--cat-soft-2,#f9fbff);
  box-shadow:0 5px 14px rgba(15,23,42,.045);
}
.pxshop-tree-leaf-v7.is-current{
  border-color:var(--cat-border,#bed3f8);
  background:linear-gradient(135deg,var(--cat-soft,#eef4ff),#fff);
  box-shadow:inset -3px 0 0 var(--cat-accent,#2f6df6);
}
.pxshop-tree-leaf-v7.is-current .pxshop-tree-copy b{color:var(--cat-accent,#2f6df6)}
.pxshop-tree-go-v7{
  width:24px;height:24px;flex:0 0 24px;
  display:grid;place-items:center;border-radius:8px;
  color:#a3adbb;background:#f7f9fc;font-size:7px;
}
.pxshop-tree-leaf-v7:hover .pxshop-tree-go-v7,
.pxshop-tree-leaf-v7.is-current .pxshop-tree-go-v7{background:var(--cat-soft,#eef4ff);color:var(--cat-accent,#2f6df6)}

/* ----- Department wrapper when browsing all shop departments ----- */
.pxshop-tree-department-v7{
  border:1px solid #e5ebf3;
  border-radius:18px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 5px 18px rgba(15,23,42,.04);
}
.pxshop-tree-department-v7>summary{
  min-height:62px;
  list-style:none;
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;
  cursor:pointer;
  background:linear-gradient(135deg,#f5f8ff,#fff);
}
.pxshop-tree-department-v7>summary::-webkit-details-marker{display:none}
.pxshop-department-visual{width:40px;height:40px;border-radius:13px;background:#eaf1ff;color:#2f6df6;display:grid;place-items:center;flex:none}
.pxshop-department-copy{min-width:0;flex:1}
.pxshop-department-copy b,.pxshop-department-copy small{display:block}
.pxshop-department-copy b{font-size:11.5px;color:#1d2939;font-weight:950}
.pxshop-department-copy small{font-size:7.7px;color:#8f9bae;margin-top:2px}
.pxshop-department-toggle{width:26px;height:26px;border-radius:9px;background:#eef4ff;color:#2f6df6;display:grid;place-items:center;font-size:8px}
.pxshop-tree-department-v7[open] .pxshop-department-toggle i{transform:rotate(180deg)}
.pxshop-department-toggle i{transition:.18s ease}
.pxshop-tree-department-body-v7{padding:9px;display:grid;gap:9px;background:#f9fbfd;border-top:1px solid #edf1f6}
.pxshop-department-all-v7{min-height:38px;border-radius:11px;background:#2f6df6;color:#fff;text-decoration:none;display:flex;align-items:center;gap:8px;padding:0 11px;font-size:9px;font-weight:900}
.pxshop-department-all-v7 span{flex:1}

/* Brand list follows the same richer surface language. */
.pxshop-cat-panel-v7 .pxshop-brand-list-v3{gap:8px}
.pxshop-cat-panel-v7 .pxshop-brand-row-v3{min-height:62px;border-radius:14px;border-color:#e7edf5;box-shadow:0 3px 10px rgba(15,23,42,.025)}
.pxshop-cat-panel-v7 .pxshop-brand-row-v3:hover{transform:translateX(-2px);box-shadow:0 7px 18px rgba(15,23,42,.055)}

@container pxshop-shell (max-width:520px){
  .pxshop-cat-panel-v7{width:100%!important}
  .pxshop-cat-panel-v7 .pxshop-cat-pane{padding-inline:8px}
  .pxshop-tree-group-v7.is-root>summary{min-height:64px;padding:9px 10px}
  .pxshop-tree-group-v7.is-root .pxshop-tree-visual{width:40px;height:40px;flex-basis:40px}
  .pxshop-tree-count{min-width:24px;padding-inline:6px}
}