/* ============================================================================
   الجی اورجینال — لایه موبایل
   این فایل *آخر* لود می‌شود تا روی app.css برنده باشد.

   سایت قدیم HTML را با UA sniffing برای موبایل و دسکتاپ جدا می‌ساخت؛
   اینجا HTML یکسان است و فقط CSS تفاوت می‌گذارد (بهتر برای کش و سئو).

   ⚠ نکته جهت (RTL): در راست‌به‌چپ `inline-start` یعنی **راست** و
   `inline-end` یعنی **چپ**. کشوی منو باید از راست باز شود، پس
   `inset-inline-start:0` می‌گیرد و با `translateX(100%)` به بیرونِ راست
   می‌رود. یک‌بار اشتباهاً `inset-inline-end` نوشته شده بود که کشو را به لبه
   چپ می‌چسباند و ترنسفورم به‌جای پنهان کردن، آن را وسط صفحه می‌آورد.
   ========================================================================= */

@media (max-width:1024px){
  :root{--header-h:auto}

  .topbar{display:none}

  /* ─── هدر: گرید سه‌ستونه + ردیف جستجو ─────────────────────────────── */
  .header{position:sticky;top:0}
  .header__in{
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "burger logo call"
      "search search search";
    align-items:center;
    gap:10px;
    height:auto;
    padding:10px 0;
  }
  .burger{grid-area:burger;display:grid;place-items:center;width:42px;height:42px;
    border-radius:var(--r-sm);color:var(--ink);flex:none}
  .burger:active{background:var(--line-2)}

  .logo{grid-area:logo;justify-content:center;min-width:0}
  .logo img{max-height:38px}
  .logo__text{font-size:16px;text-align:center;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .logo__text small{display:none}

  .nav{display:none}          /* منوی افقی جای خود را به کشو می‌دهد */

  .header__actions{grid-area:call}
  .header__call{padding:0;width:42px;height:42px;justify-content:center;border-radius:50%}
  .header__call .num{display:none}

  .searchbox{grid-area:search;max-width:none;flex:none}
  .searchbox input{height:40px}

  /* ─── کشو ─────────────────────────────────────────────────────────── */
  .drawer{
    display:block;position:fixed;top:0;
    inset-inline-start:0;          /* در RTL یعنی لبه راست */
    height:100dvh;width:min(86%,330px);background:#fff;z-index:1000;
    transform:translateX(100%);    /* بیرونِ سمت راست */
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    box-shadow:-8px 0 30px rgba(0,0,0,.18);
  }
  .drawer.is-open{transform:translateX(0)}

  .drawer-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);
    z-index:999;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .drawer-overlay.is-open{opacity:1;visibility:visible}
  body.is-locked{overflow:hidden}

  .drawer__head{background:linear-gradient(135deg,var(--ink),var(--ink-2));color:#fff;
    padding:20px 18px;position:relative}
  .drawer__head strong{display:block;font-size:16px}
  .drawer__head span{font-size:12px;color:#b9b9b9}
  .drawer__close{position:absolute;top:12px;inset-inline-end:12px;color:#fff;
    width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
    background:rgba(255,255,255,.12)}

  .drawer__nav{padding:8px}
  .drawer__nav>a,
  .drawer__toggle{display:flex;align-items:center;justify-content:space-between;
    width:100%;gap:10px;padding:13px 14px;border-radius:var(--r-sm);
    font-size:15px;font-weight:500;text-align:start;color:var(--ink)}
  .drawer__nav>a:active,.drawer__toggle:active{background:var(--gold-soft);color:var(--gold-dark)}
  .drawer__toggle svg{transition:transform var(--ease);flex:none}
  .drawer__group.is-open>.drawer__toggle{color:var(--gold-dark)}
  .drawer__group.is-open>.drawer__toggle svg{transform:rotate(180deg)}

  .drawer__sub{display:none;padding-inline-start:12px;
    border-inline-start:2px solid var(--line);margin:2px 14px 6px}
  .drawer__group.is-open .drawer__sub{display:block}
  .drawer__sub a{display:block;padding:11px 12px;border-radius:var(--r-sm);
    font-size:14px;color:var(--ink-3)}
  .drawer__sub a:active{background:var(--gold-soft);color:var(--gold-dark)}

  .drawer__foot{border-top:1px solid var(--line);margin-top:8px;
    padding:14px 18px calc(24px + env(safe-area-inset-bottom))}
  .drawer__foot a{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:14px}
  .drawer__foot svg{color:var(--gold);flex:none}

  /* ─── نوار پایین ──────────────────────────────────────────────────── */
  .bottomnav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;
    bottom:0;inset-inline:0;background:#fff;border-top:1px solid var(--line);
    z-index:850;padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -2px 12px rgba(0,0,0,.06)}
  .bottomnav a{display:grid;place-items:center;gap:2px;padding:7px 4px;
    font-size:10.5px;color:var(--ink-4);line-height:1.4}
  .bottomnav a.is-active{color:var(--gold-dark)}
  .bottomnav svg{width:20px;height:20px}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}

  /* ریل شناور با نوار پایین تداخل دارد */
  .rail{display:none}

  /* ─── فاصله‌ها و تیترها ───────────────────────────────────────────── */
  .section{padding:30px 0}
  .section--tight{padding:22px 0}
  .section__title{font-size:20px}
  .section__sub{font-size:13.5px}
  .container{width:min(100% - 24px,var(--container))}

  /* کروسل روی موبایل: دکمه‌ها جا نمی‌شوند، انگشت کافی است */
  .carousel__nav{display:none !important}
  .section__head--row{gap:8px;margin-bottom:16px}
  .carousel__tools{width:100%;justify-content:flex-end}
  .carousel--lg .card__title{font-size:13px}

  /* کاشی دسته‌بندی — فقط تصویر، بدون نوار و بدون نوشته */
  .cat-tile__name{font-size:12.5px;padding:7px 10px}

  .breadcrumb{font-size:12px;padding:9px 0}
  .breadcrumb ol{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .breadcrumb ol::-webkit-scrollbar{display:none}
  .breadcrumb li{white-space:nowrap}

  /* ─── صفحه محصول ──────────────────────────────────────────────────── */
  .product{gap:18px}
  .gallery__main{padding:12px;border-radius:var(--r-md)}
  .gallery__main:hover img{transform:none}   /* روی لمس، hover گیر می‌کند */
  .gallery__zoom{opacity:1}                  /* بدون hover باید همیشه دیده شود */
  .gallery__thumb{width:60px;height:60px;flex:0 0 60px}
  .product__title{font-size:18px}
  .pricebox{padding:15px}
  .pricebox__value{font-size:21px}
  .pricebox__actions{gap:8px}
  .pricebox__actions .btn{min-width:0;flex:1 1 100%}
  .trust{grid-template-columns:1fr 1fr;gap:8px}
  .trust__item{font-size:12px;padding:9px 10px;gap:6px}
  .specs th,.specs td{padding:10px 12px;font-size:13px}
  .specs th{width:46%}

  /* ─── بخش تماس و فوتر ─────────────────────────────────────────────── */
  .footer{margin-top:32px;padding-top:28px}
  .footer__contact a{padding:9px 11px}
  .footer__grid{gap:24px}

  .hero__cap{position:static;transform:none;max-width:none;padding:16px;
    background:var(--ink);text-shadow:none}
  .hero__cap p{margin-bottom:12px}
  .hero::after{display:none}
}

/* ─── گوشی کوچک ──────────────────────────────────────────────────────── */
@media (max-width:560px){
  .product-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .card__body{padding:10px 11px 12px;gap:7px}
  .card__title{font-size:12.5px;min-height:3.2em}
  .card__price{font-size:13.5px}
  .card__quote{font-size:12px}
  .card__cta{width:32px;height:32px}
  .badge{font-size:10.5px;padding:3px 8px;top:8px;inset-inline-end:8px}

  .cat-grid{grid-template-columns:repeat(2,1fr);gap:10px}

  .section__title{font-size:18px}
  .toolbar{padding:10px 12px;gap:10px}
  .toolbar__count{width:100%;order:-1}
  .post-grid{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr}

  /* جدول‌های متن ادیتور روی موبایل کارتی می‌شوند
     (renderBlocks در PHP صفت data-label را اضافه می‌کند) */
  .prose table[data-mobile] thead{display:none}
  .prose table[data-mobile]{min-width:0}
  .prose table[data-mobile] tr{display:block;border:1px solid var(--line);
    border-radius:var(--r-sm);margin-bottom:10px}
  .prose table[data-mobile] td{display:flex;justify-content:space-between;gap:12px;
    border:0;border-bottom:1px solid var(--line-2);min-width:0}
  .prose table[data-mobile] td:last-child{border-bottom:0}
  .prose table[data-mobile] td::before{content:attr(data-label);font-weight:600;
    color:var(--ink-3);flex:none}
}

@media print{
  .topbar,.header,.footer,.rail,.bottomnav,.notice-bar,.breadcrumb,
  .pricebox__actions,.drawer,.drawer-overlay,.filter-bar{display:none}
  body{background:#fff;padding:0}
}

/* ─── اجزای تازه روی گوشی کوچک ───────────────────────────────────────── */
@media (max-width:560px){
  /* .cat-grid بالاتر در همین بریک‌پوینت تعریف شده — تکرار حذف شد */
  .carousel--mini .carousel__track>*{width:min(250px,86%)}
  .prow__media{flex:0 0 78px;height:78px}
  .prow__title{font-size:12.5px}

  .consult__points{display:none}   /* روی موبایل جای کنش مهم‌تر است */
}