/* ==========================================================================
   mobile.css — گوشی (تا ۷۶۰ پیکسل).

   آخرین استایلِ صفحه. اصول:
     • هر چیزِ مهم زیرِ شست: نوارِ پایین (js/mobile.js)، برگه‌های پایین
       برای منو، سبد و سایز.
     • هدفِ لمسی دست‌کم ۴۴ پیکسل؛ گوشه‌های گرد، سطح‌های شیشه‌ای.
     • نوارِ بالا کوچک و با اسکرول کنار می‌رود.
     • شبکه‌ی دوستونه، و ردیف‌های افقیِ کشیدنی به‌جای ستون‌های بلند.
   ========================================================================== */

.tabbar,.sheet-veil,.pbar,.sheet-grip{display:none}

@media (max-width:760px){

  :root{--gut:16px;--r:18px}
  html.has-tabbar body{padding-bottom:calc(92px + var(--safe-b))}

  /* ------------------------------------------------------ نوارِ بالا --- */
  .nav{
    justify-content:center;
    min-height:calc(56px + var(--safe-t));
    padding:calc(.4rem + var(--safe-t)) 16px .4rem;
    background:rgba(11,9,6,.72);
    transition:transform .38s var(--ease),background .3s var(--ease);
  }
  .nav.is-away{transform:translateY(-110%)}
  .nav .wordmark .mark{width:88px}
  /* سبد و منو و آینه در نوارِ پایین‌اند؛ فقط دکمه‌ی حساب (آیکونِ گرد) گوشه‌ی
     نوارِ بالا می‌ماند — نوارِ پایین جای ششم ندارد. */
  .nav-right{position:absolute;inset-inline-end:12px;top:calc(var(--safe-t) + .4rem);bottom:.4rem;
    display:flex;align-items:center}
  .nav-right > :not(.acctbtn){display:none}
  .nav-right .acctbtn{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%;
    border-color:rgba(201,160,99,.22);background:rgba(24,18,12,.5)}
  .nav-right .acctbtn svg{width:20px;height:20px}
  .nav-right .acctbtn-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .nav-right .acctbtn.is-in{border-color:var(--bronze)}

  /* ------------------------------------------------------ نوارِ پایین --- */
  .tabbar{
    position:fixed;z-index:90;
    left:10px;right:10px;bottom:calc(10px + var(--safe-b));
    height:64px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;
    background:rgba(24,18,12,.78);
    -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
    border:1px solid rgba(201,160,99,.20);border-radius:22px;
    box-shadow:0 14px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04);
    transition:transform .38s var(--ease);
  }
  .tabbar a,.tabbar button{
    position:relative;display:grid;justify-items:center;align-content:center;gap:3px;
    height:100%;padding:0;border:0;background:none;cursor:pointer;
    color:var(--bone-dim);text-decoration:none;
    font:500 .72rem/1 var(--body);letter-spacing:0;white-space:nowrap;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  }
  .tabbar svg{width:23px;height:23px}
  .tabbar [aria-current="page"],.tabbar [aria-expanded="true"]{color:var(--bronze-lit)}
  .tabbar [aria-current="page"]::after{
    content:'';position:absolute;bottom:6px;width:4px;height:4px;border-radius:50%;background:var(--bronze)}
  .tabbar a:active,.tabbar button:active{transform:scale(.92)}
  .tab-mirror i{
    display:grid;place-items:center;width:54px;height:54px;margin-top:-30px;border-radius:50%;
    background:linear-gradient(150deg,var(--bronze-lit),var(--bronze) 60%,#9C7A45);
    color:#1A1209;box-shadow:0 10px 26px rgba(201,160,99,.35),0 0 0 5px rgba(11,9,6,.92);
  }
  .tab-mirror i svg{width:26px;height:26px}
  .tab-mirror span{color:var(--bronze)}
  .tab-n{
    position:absolute;top:8px;inset-inline-start:calc(50% + 4px);
    min-width:18px;height:18px;padding:0 4px;border-radius:9px;
    background:var(--bronze);color:#1A1209;font:700 .62rem/18px var(--body);text-align:center;
  }
  .tab-n[hidden]{display:none}
  .pbar-on .tabbar,.sheet-on .tabbar{transform:none}
  .pbar-on .tabbar{transform:translateY(160%)}

  /* ---------------------------------------------- منو: برگه‌ی پایین --- */
  .sheet-veil{
    display:block;position:fixed;inset:0;z-index:80;
    background:rgba(4,3,2,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
  }
  .sheet-veil.is-on{opacity:1;pointer-events:auto}
  html.sheet-on{overflow:hidden}
  .nav-links{
    position:fixed;left:0;right:0;top:auto;bottom:0;z-index:85;
    max-height:min(86vh,720px);max-height:min(86dvh,720px);overflow-y:auto;overscroll-behavior:contain;
    flex-direction:column;gap:0;
    background:var(--panel);border:1px solid rgba(201,160,99,.18);border-bottom:0;
    border-radius:26px 26px 0 0;
    padding:8px 0 calc(96px + var(--safe-b));
    opacity:1;transform:translateY(105%);pointer-events:none;
    /* برگه‌ی بسته از دسترسِ Tab و صفحه‌خوان بیرون — بعد از پایان لغزیدن. */
    visibility:hidden;
    transition:transform .45s var(--ease),visibility 0s linear .45s;
    box-shadow:0 -20px 60px rgba(0,0,0,.6);
    font-family:var(--display);font-size:1.05rem;letter-spacing:0;text-transform:none;
  }
  .nav-links[data-open=true]{transform:none;pointer-events:auto;visibility:visible;
    transition:transform .45s var(--ease),visibility 0s}
  .sheet-grip{display:block;width:44px;height:5px;border-radius:3px;margin:4px auto 8px;
    background:rgba(242,237,228,.22)}
  .nav-links > a{
    min-height:58px;padding:0 22px;color:var(--bone);
    border-bottom:1px solid rgba(201,160,99,.10);font-size:1.12rem;
  }
  .nav-links > a:active{background:rgba(201,160,99,.06)}
  .nav-links .ico-igloo{width:26px}
  .nav-links > a.nav-home,.nav-links > a.nav-home:not(.is-here){color:var(--bone)}
  .nav-links > a.is-here{color:var(--bronze-lit)}
  /* منوی مجموعه‌ها داخلِ برگه: گروه‌ها ردیف‌های تراشه‌ای. */
  .mm-panel{margin:6px 16px 10px;padding:14px;border-radius:18px;border:0;background:var(--panel-2)}
  .mm-cols{gap:16px}
  .mm-col{display:flex;flex-wrap:wrap;gap:8px}
  .mm-col .stamp{width:100%;margin:0 0 2px}
  .mm-col a{
    padding:.5em .95em;border:1px solid var(--line);border-radius:999px;
    font-family:var(--body);font-size:.88rem;gap:.45rem;
  }
  .mm-label{flex:none}
  .mm-n{font-size:.68rem}
  .mm-all{margin-top:12px;padding-top:12px;font-family:var(--body)}
  /* جست‌وجوی برگه: ۱۶ پیکسل تا iOS هنگامِ فوکوس بزرگ‌نمایی نکند؛ هدف‌ها ≥۴۴. */
  .mm-search input{font-size:16px;min-height:46px}
  .mm-search .btn{min-height:46px}
  .mm-adv{display:inline-flex;align-items:center;min-height:44px}
  .mm-col a{min-height:40px}

  /* ---------------------------------------------------- کنترل‌ها ----- */
  .btn{min-height:50px;border-radius:14px;justify-content:center}
  .btn:active{transform:scale(.97)}
  .origin{border-radius:var(--r)}

  /* ---------------------------------------------------- بخش‌ها ------- */
  .section{padding:64px var(--gut) 56px}
  .band{padding:72px var(--gut) 60px}
  .head{margin-bottom:28px;gap:.9rem}
  .head h2,.band h2{font-size:clamp(1.85rem,8.4vw,2.5rem);line-height:1.15}
  .lede{font-size:1rem;line-height:1.95}
  .split{gap:28px}
  .is-stacked [data-stack] > * + *{border-radius:24px 24px 0 0}
  .top-head{align-items:end}
  .top-all{min-height:44px;padding:.6em 1.1em;font-size:.82rem}

  /* برگزیده‌ها: یک ردیفِ افقیِ کشیدنی، با لبه‌ی کارتِ بعدی پیدا. */
  #top .grid{
    display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:76%;
    gap:12px;margin:0 calc(-1 * var(--gut));padding:6px var(--gut) 14px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
    scrollbar-width:none;overscroll-behavior-x:contain;
  }
  #top .grid::-webkit-scrollbar{display:none}
  #top .card{scroll-snap-align:start}

  /* کارت‌ها */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
  .card{
    padding:12px 12px 14px;gap:8px;border-radius:var(--r);
    background:linear-gradient(180deg,var(--panel-2),var(--panel));
    box-shadow:0 0 0 1px rgba(201,160,99,.14);
  }
  .card-head{gap:6px;flex-wrap:wrap}
  /* برچسبِ برند ۹px بود و روی گوشی خوانده نمی‌شد؛ قیمت، قیمتِ پیش از تخفیف و
     درصد هر کدام یک آیتمِ فلکس‌اند تا «خط‌خورده» روی نشانِ تخفیف نیفتد. */
  .card .house{font-size:.72rem}
  .card-head .price{order:3;width:100%;font-size:.84rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
  .card .price .was{margin:0;font-size:.74rem;white-space:nowrap}
  .card .price .off{margin:0;font-size:.72rem}
  .card .size,.card .size .lat{font-size:.74rem}
  .card-stage{min-height:92px}
  .card h3{font-size:.95rem;margin:0}
  .card .colour{font-size:.72rem;line-height:1.5;margin:0;
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .card-foot{font-size:.7rem}
  .card-foot .try{display:none}
  .card .buy{justify-self:stretch;text-align:center;border-radius:12px;min-height:44px;
    display:grid;place-items:center;font-size:.78rem;letter-spacing:0}
  .card .buy:active{background:var(--bronze);color:var(--black)}

  /* آینه روی گوشی: ترتیب — عنوان، توضیح، **راهنمای کوتاه**، دکمه — و پایینِ
     نوار خالی می‌ماند تا سوژه‌ی عکس (پایینِ تصویرِ ۳:۴) دیده شود. پیش‌تر
     کارت‌های راهنما آخر می‌آمدند و درست روی صورت می‌نشستند. */
  .mirror-band{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .mirror-band .band-in{display:contents}
  .mirror-band .band-in > *,.mirror-band .band-steps{position:relative;z-index:2}
  .mirror-band .band-in > .stamp:first-child{order:1;margin-bottom:.9rem}
  .mirror-band .band-in > h2{order:2;margin-bottom:1rem}
  .mirror-band .band-in > .lede{order:3;margin:0 auto}
  .mirror-band .band-steps{order:4}
  .mirror-band .band-in > .btn{order:5;align-self:center;margin-top:1.3rem}
  .mirror-band .band-in > .stamp.dim{order:6;margin-top:.8rem}
  /* بخش‌های صفحه‌ی اول با عکس: عکسِ ۳:۴ در اندازه‌ی خودش (تمام‌عرض) به
     **پایینِ** بخش می‌چسبد و بالایش در رنگِ بخش محو می‌شود؛ پایینِ بخش هم
     جا دارد تا سوژه (که در پرامپت‌ها در نیمه‌ی پایینِ عکس است) زیرِ متن
     نماند. بدونِ این، عکس برای پوشاندنِ یک بخشِ بلند چند برابر بزرگ و از
     دو طرف بریده می‌شد و صورت درست زیرِ متن می‌افتاد. */
  .section.has-bg,.mirror-band.has-bg{padding-bottom:calc(100vw * 4 / 3 * .5)}
  .section.has-bg > .sbg,.mirror-band.has-bg > .sbg{
    top:auto;height:calc(100vw * 4 / 3);
    -webkit-mask-image:linear-gradient(transparent 0%,#000 32%);mask-image:linear-gradient(transparent 0%,#000 32%);
  }
  .section.has-bg > .sbg img,.mirror-band.has-bg > .sbg img{object-position:50% 100%}
  .section.has-bg > .sbg::after,.mirror-band.has-bg > .sbg::after{
    background:linear-gradient(180deg,rgba(11,9,6,.6) 0%,rgba(11,9,6,.25) 45%,rgba(11,9,6,.35) 100%)}
  .band-steps{
    grid-template-columns:1fr;grid-auto-flow:row;gap:.75rem;
    margin:1.3rem 0 0;padding:0;overflow:visible;
  }
  .bstep{
    grid-template-columns:auto 1fr;column-gap:.7rem;row-gap:.15rem;align-items:center;
    padding:0;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .bstep .key{grid-row:span 2;align-self:start;width:1.55rem;height:1.55rem;font-size:.6rem}
  .bstep h3{font-size:.9rem}
  .bstep p{font-size:.78rem;line-height:1.75;grid-column:2}

  /* -------------------------------------------------- بنرِ مجموعه --- */
  .cbanner{padding-block:88px 28px}
  .cb-id h1{font-size:clamp(2.2rem,11vw,3rem)}

  /* -------------------------------------------------- سبد: برگه ------ */
  /* برگه‌ی سبد (dvh، هدف‌های ۴۴px، فشرده‌سازیِ پایه، افقیِ دوستونه) حالا در
     css/cart.css است تا آینه (که این فایل را بار نمی‌کند) هم همان را بگیرد. */

  /* -------------------------------------------- محصول: نوارِ خرید --- */
  .pbar{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    position:fixed;z-index:88;left:10px;right:10px;bottom:calc(10px + var(--safe-b));
    min-height:64px;padding:8px 8px 8px 8px;padding-inline-start:16px;
    background:rgba(24,18,12,.86);
    -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
    border:1px solid rgba(201,160,99,.22);border-radius:22px;
    box-shadow:0 14px 40px rgba(0,0,0,.6);
    transform:translateY(160%);transition:transform .38s var(--ease);
  }
  .pbar.is-on{transform:none}
  .pbar-p{display:grid;gap:2px;min-width:0}
  .pbar-p .pprice{font-size:.98rem;color:var(--bronze-lit);white-space:nowrap}
  /* ⚠ «۵۰□۲۱» بی‌‎bdi‎ در متنِ راست‌به‌چپ وارونه می‌شد («21□50»)؛ جهتِ خودش لاتین است. */
  .pbar-p small{font-size:.75rem;color:var(--bone-dim);direction:ltr;justify-self:start}
  .pbar .btn{min-height:48px;padding-inline:1.3em;white-space:nowrap}
  .pbar-off{color:var(--bone-dim);font-size:.85rem;padding-inline-end:10px}

  /* -------------------------------------------------- فوتر تاشو ------ */
  .footer{padding:36px var(--gut) 24px;gap:18px}
  .ftop{flex-direction:column;gap:0}
  .fcol{border-bottom:1px solid rgba(201,160,99,.12);gap:0}
  .fcol > .stamp{
    display:flex;align-items:center;justify-content:space-between;
    min-height:54px;cursor:pointer;font-size:.8rem;letter-spacing:0;
  }
  .fcol > .stamp::after{content:'';width:8px;height:8px;margin-inline-end:4px;
    border-inline-end:1.5px solid currentColor;border-block-end:1.5px solid currentColor;
    transform:rotate(45deg);transition:transform .3s var(--ease)}
  .fcol.is-open > .stamp::after{transform:rotate(-135deg)}
  .fcol > :not(.stamp){display:none}
  .fcol.is-open > :not(.stamp){display:block;padding:0 0 14px;font-size:.92rem}
  /* پیوندهای فوتر هدفِ لمسیِ ۴۴ پیکسلی (پیش‌تر ≈۲۱ پیکسل بودند). */
  .fcol.is-open > a{display:flex;align-items:center;min-height:44px;padding:0;font-size:.95rem}
  .legal{font-size:.72rem;line-height:1.9}
  .legal .adminentry{display:inline-block;padding-block:.7em .35em;font-size:.72rem}
}

/* گوشیِ خیلی باریک: کارت‌ها هنوز دوستونه، کمی فشرده‌تر. */
@media (max-width:360px){
  .grid{gap:8px}
  .card{padding:10px}
  .tabbar span{font-size:.58rem}
}