/* =========================================================================
   Pubix — global responsive layer + clean "all categories" mega menu
   Loaded on every page after main.css
   ========================================================================= */
[hidden]{display:none!important}
html,body{overflow-x:clip!important}
img,svg,video,iframe,canvas{max-width:100%}
img{height:auto}
table{max-width:100%}
.content table,.entry table,.woocommerce table.shop_attributes{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
h1,h2,h3,h4,p,li,td,th,label{overflow-wrap:break-word;word-wrap:break-word}
a{overflow-wrap:break-word}
.pcard a,.pubix-sr-grid a,.sbox a,.nav a,.logo,.logo *{overflow-wrap:normal;word-break:normal}
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:clamp(12px,3vw,20px);box-sizing:border-box}

/* ---------- header ---------- */
.header{max-width:100vw}
.hrow{align-items:center}
.sbox{flex:1 1 auto;min-width:0;max-width:100%}
.sbox .search,.header form.search{min-width:0;max-width:100%}
.sbox .search select,.header form.search select{max-width:150px;text-overflow:ellipsis}
.actions a{min-width:44px}
@media(max-width:1100px){
  .hrow{gap:14px}
  .actions{gap:10px}
  .search select{max-width:110px}
  .nav .wrap{gap:16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav .wrap::-webkit-scrollbar{display:none}
  .nav .wrap a,.nav .wrap .allc{white-space:nowrap;flex:none}
  .ndrop{display:none}
}
@media(max-width:900px){
  .hrow{display:flex;flex-wrap:wrap;align-items:center}
  .burger{display:grid;place-items:center;width:44px;height:44px;border-radius:12px}
  .logo{margin-inline-end:auto}
  .sbox{order:10;flex:1 1 100%}
  .sbox .search select,.header form.search select{display:none}
  .sbox .search input,.header form.search input{font-size:16px}
  .nav.open{display:block;padding-bottom:10px}
  .nav .wrap{overflow:visible;flex-direction:column;align-items:stretch;gap:8px;padding-block:8px}
  .nav .wrap .allc{width:100%;justify-content:center;padding:12px}
  .nav .wrap .coop{justify-content:center;border:1.5px solid var(--bd);border-radius:12px;padding:10px}
}
@media(max-width:480px){
  .topbar .wrap{gap:12px;font-size:11px}
  .actions .cartb{padding-inline:4px}
}

/* ---------- ALL-CATEGORIES MEGA MENU ---------- */
.nav{position:relative;z-index:2}
#allc{cursor:pointer}
#allc.on{box-shadow:0 0 0 3px rgba(29,92,219,.18)}
.pubix-mega{
  position:absolute;inset-inline:0;top:100%;z-index:70;
  background:#fff;border-top:1px solid var(--bd);
  box-shadow:0 28px 60px rgba(15,27,51,.20);
  padding:18px 0 22px;
  max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  animation:pmIn .16s ease-out
}
@keyframes pmIn{from{opacity:0;transform:translateY(-6px)}}
.pm-wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:clamp(12px,3vw,20px);box-sizing:border-box}
.pm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--bd)}
.pm-head b{font-size:15px;font-weight:800;color:var(--ink)}
.pm-close{display:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--bd);background:#fff;font-size:22px;line-height:1;cursor:pointer;place-items:center;color:var(--ink)}
.pubix-mega .mcols{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:0}
.pubix-mega .mcol{display:flex;flex-direction:column;gap:6px;min-width:0;background:#f8fafc;border:1px solid var(--bd);border-radius:14px;padding:14px;transition:border-color .15s,box-shadow .15s}
.pubix-mega .mcol:hover{border-color:#9dbdf5;box-shadow:0 8px 22px rgba(29,92,219,.10);background:#fff}
.pubix-mega .mcol-head{display:flex;align-items:center;gap:10px;padding:0;margin:0 0 4px;font-size:13.5px;font-weight:800;color:var(--ink)}
.pubix-mega .mcol-head .icon{flex:none;width:34px;height:34px;padding:7px;box-sizing:border-box;border-radius:10px;background:#eaf1ff;color:var(--red)}
.pubix-mega .mcol-head:hover{color:var(--red)}
.pubix-mega ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.pubix-mega ul a{display:block;padding:5px 2px;font-size:12.5px;font-weight:500;color:var(--mut);border-radius:6px}
.pubix-mega ul a:hover{color:var(--red);background:#eef4ff;padding-inline-start:8px}
.pubix-mega .mcol-all{margin-top:auto;padding-top:6px;font-size:12px;font-weight:700;color:var(--red)}
.pm-none{grid-column:1/-1;margin:0;color:var(--mut);font-size:13px}
@media(max-width:900px){
  .pubix-mega{position:fixed;inset:0;top:0;z-index:300;max-height:none;border:0;border-radius:0;
    padding:12px 0 calc(90px + env(safe-area-inset-bottom));animation:none}
  .pm-head{position:sticky;top:-12px;z-index:2;background:#fff;margin-top:-12px;padding-top:14px}
  .pm-close{display:grid}
  .pubix-mega .mcols{grid-template-columns:1fr 1fr;gap:10px}
  .pubix-mega .mcol{padding:12px}
  html.mega-open,html.mega-open body{overflow:hidden!important}
}
@media(max-width:520px){
  .pubix-mega .mcols{grid-template-columns:1fr}
}

/* ---------- home / shop sections ---------- */
@media(min-width:901px) and (max-width:1100px){
  .hero{grid-template-columns:220px minmax(0,1fr)}
  .trust{grid-template-columns:repeat(3,1fr)}
  .fgrid{grid-template-columns:repeat(3,1fr)}
}
.pg,.products-grid,.pop,.serv,.arts,.brands,.trust{min-width:0}
.pcard,.sv,.art,.bd,.tcard{min-width:0}
.products-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
@media(max-width:600px){
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pt h2,.st{font-size:clamp(18px,5vw,22px)}
  .brands{grid-template-columns:repeat(3,minmax(0,1fr))}
  .arts,.serv{grid-template-columns:minmax(0,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  .f-trust{grid-template-columns:1fr}
}
@media(max-width:380px){
  .brands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid{grid-template-columns:1fr}
}

/* ---------- forms: no iOS zoom, comfortable tap targets ---------- */
@media(max-width:900px){
  input[type=text],input[type=email],input[type=tel],input[type=password],input[type=search],input[type=number],select,textarea{font-size:16px!important}
  .btn{min-height:44px}
}

/* ---------- tablets: a bit more room for woo pages ---------- */
@media(min-width:601px) and (max-width:900px){
  .pubix-auth{max-width:560px}
}

/* =========================================================================
   FIX: overflow افقی موبایل (محتوا از سمت چپ بریده می‌شد)
   علت: main.wrap و چند کانتینر دیگر grid با ستون auto/1fr بودند و آیتم‌ها
   min-width:auto داشتند؛ پس محتوای عریض ستون را بزرگ‌تر از ویوپورت می‌کرد.
   ========================================================================= */
main.wrap,#sections{grid-template-columns:minmax(0,1fr)}
main.wrap>*,#sections>*{min-width:0;max-width:100%}
.hero>*,.blk>*,.tech>*,.finder>*,.req>*,.promo>*,.banner>*,.hmain>*,.side>*,
.ff>*,.two>*,.tfeat>*,.fgrid>*,.pg>*,.trust>*,.serv>*,.arts>*,.brands>*{min-width:0}
.hmain,.rl,.rform,.tl,.fl{min-width:0;max-width:100%}
input,select,textarea{max-width:100%;min-width:0}
input[type=file]{width:100%;max-width:100%}
@media(max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr)!important}
  .tech,.finder,.req,.promo,.blk{grid-template-columns:minmax(0,1fr)!important}
  .ff,.two{grid-template-columns:minmax(0,1fr)!important}
  .banner{grid-template-columns:minmax(0,1fr)!important}
  .mcats{max-width:100vw;box-sizing:border-box;overscroll-behavior-x:contain}
  .trk,.pop,.qlinks,.tin{max-width:100%;min-width:0}
  .rec li,.rec-item{min-width:0}
  .rec li>*:not(.pic){min-width:0}
}

/* =========================================================================
   آیکن واحد پول — بر اساس واحد ووکامرس (IRT = تومان ، IRR = ریال)
   کلاس body را inc/currency.php می‌گذارد؛ متن واحد در HTML می‌ماند (دسترسی‌پذیری/کپی)
   ========================================================================= */
body.pubix-cur-toman .woocommerce-Price-currencySymbol,
body.pubix-cur-rial .woocommerce-Price-currencySymbol{
  /* فونت را صفر نمی‌کنیم (واحد em به آن وابسته است)؛ متن را بیرون کادر هل می‌دهیم */
  display:inline-block;overflow:hidden;white-space:nowrap;direction:ltr;
  text-indent:300%;line-height:1;
  background-color:currentColor;vertical-align:-.12em;margin-inline-start:.25em;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
body.pubix-cur-toman .woocommerce-Price-currencySymbol{
  width:1.15em;height:.98em;
  -webkit-mask-image:url(../img/currency-toman.svg);mask-image:url(../img/currency-toman.svg);
}
body.pubix-cur-rial .woocommerce-Price-currencySymbol{
  width:.95em;height:1em;
  -webkit-mask-image:url(../img/currency-rial.svg);mask-image:url(../img/currency-rial.svg);
}
/* داخل <small> کمی بزرگ‌تر تا خوانا بماند */
body.pubix-cur-toman small .woocommerce-Price-currencySymbol{width:1.3em;height:1.1em}
body.pubix-cur-rial small .woocommerce-Price-currencySymbol{width:1.05em;height:1.1em}

/* =========================================================================
   حالت اپلیکیشن (PWA نصب‌شده / TWA) — کلاس html.is-app را inc/pwa.php می‌گذارد
   ========================================================================= */
a,button,[role=button],input,select,textarea,label,summary{touch-action:manipulation}
html{-webkit-tap-highlight-color:transparent}

html.is-app{overscroll-behavior-y:contain;-webkit-text-size-adjust:100%}
html.is-app .topbar,
html.is-app #inst,
html.is-app .inst{display:none!important}
/* سربرگ زیر ناچ / نوار وضعیت */
html.is-app .header{padding-top:env(safe-area-inset-top,0px)}
html.is-app .wrap{padding-inline-start:max(12px,env(safe-area-inset-left,0px));padding-inline-end:max(12px,env(safe-area-inset-right,0px))}
html.is-app .mnav{padding-bottom:max(8px,env(safe-area-inset-bottom,0px))!important}
html.is-app body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))!important}
/* رفتار اپ‌گونه: انتخاب متن و منوی نگه‌داشتن روی عناصر رابط غیرفعال، فرم‌ها و متن‌ها عادی */
html.is-app .header,
html.is-app .mnav,
html.is-app .btn,
html.is-app button,
html.is-app .pcard .pimg,
html.is-app .logo{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.is-app input,
html.is-app textarea,
html.is-app .pinfo,
html.is-app .entry,
html.is-app .content{-webkit-user-select:text;user-select:text}
html.is-app img{-webkit-user-drag:none;user-drag:none}
/* کوچک‌ترین ناحیه لمسی استاندارد */
html.is-app .mnav a,html.is-app .actions a,html.is-app .burger{min-width:44px;min-height:44px}
/* منوی تمام‌صفحه و پیام‌ها در TWA/PWA زیر نوار وضعیت نروند */
html.is-app .pubix-mega{padding-top:calc(12px + env(safe-area-inset-top,0px))}
html.is-app .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
@media (display-mode: standalone),(display-mode: fullscreen),(display-mode: minimal-ui){
  .topbar,#inst{display:none!important}
  .header{padding-top:env(safe-area-inset-top,0px)}
}