/* ==========================================================================
   The MENU sheet (the hamburger's full-screen overlay), one stylesheet for every page, including the home page.
   Markup: <nav class="menu-panel" id="menu"> in index.html, copied into every other page by scripts/sync-chrome.js.
   Behaviour (open / close, Esc, focus, inert): home.js (home, Blend) or chrome.js (the other pages); strings: menu.* keys in catalog.js, m.* in specialty-ui.js.
   Look: ONE mint sheet with black ink (8.4:1 on the mint; cream or the brand green would be below 4.5:1). Top bar: a segmented language switch (FA | EN) and a segmented
   theme switch (sun | moon), both 40 px high with 44 px hit areas, 8 px apart, on the start side; the active part is filled dark green with cream text.
   Seven text rows (Home first), all sharp: the page the visitor is on (aria-current) is a dark-green band with cream text, and hover / focus / press paints the same band.
   No blur, no dimming. Bottom bar: search, Instagram, WhatsApp (admin / logout on account pages) as 40 px boxes in the same style.
   On wide screens a preview mosaic sits beside the rows (4 x 5 tiles: squares, circles, quarter circles, photos cropped into those shapes), rebuilt tile by tile
   for the hovered / focused destination (pure CSS, :has). The hamburger turns into a close cross. Motion is time based only and off under prefers-reduced-motion.
   ========================================================================== */
.menu-panel{--cream:#fff0e1;--green:#285746;--coral:#e0a39e;--mint:#6cb28d;--ink:#0b0c0a;--mc:Minercraftory,"Arial Narrow",Arial,sans-serif;--nian:var(--nf,Nian),Nian,Tahoma,Arial,sans-serif;
  --rh:56px;--rg:0;--rp:16px;--box:40px;position:fixed;inset:0;z-index:35;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;padding:56px 20px 0;
  background:var(--mint);color:var(--ink);font:400 16px/1.4 var(--nian);transform:translateY(-102%);transition:transform .55s cubic-bezier(.76,0,.24,1)}
.menu-panel[hidden]{display:none}
.menu-panel.is-open{transform:translateY(0)}
.menu-panel,.menu-panel *{box-sizing:border-box}
.menu-panel a{text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
.menu-panel button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;-webkit-tap-highlight-color:transparent}
.menu-panel :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.menu-panel:focus{outline:none}
.menu-panel [hidden]{display:none!important}

/* top bar: the two segmented switches, on the start side (right in Persian, left in English), one row, one height, one gap */
.m-top{flex:none;display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;max-width:1280px;margin-inline:auto;padding:16px 0}
/* each switch = two 40 px cells (the same box as the bottom boxes) inside one 1 px frame; the inactive cell is framed too, the active one is filled */
.menu-lang,.menu-theme{position:relative;flex:none;display:grid;grid-template-columns:repeat(2,var(--box));width:calc(var(--box) * 2);height:var(--box);padding:0;border:0;box-shadow:inset 0 0 0 1px var(--green);color:var(--ink);background:none}
.menu-lang:after,.menu-theme:after,.m-foot :is(a,button):after{content:"";position:absolute;inset:-2px}
.menu-lang :is(.lg-en,.lg-fa),.menu-theme>span{display:grid;place-items:center;height:100%;transition:background-color .2s,color .2s}
.menu-lang .lg-fa,.menu-theme .mt-sun{order:-1}
.menu-lang .lg-en,.menu-theme .mt-moon{border-inline-start:1px solid var(--green)}
.menu-lang .lg-g{display:block;height:16px;width:auto;overflow:visible;fill:currentColor;stroke:currentColor;stroke-width:.6px}
.menu-lang .lg-g path{vector-effect:non-scaling-stroke}
.menu-theme svg{display:block;width:20px;height:20px;overflow:visible}
.menu-theme svg :is(path,circle){vector-effect:non-scaling-stroke;stroke-width:1.7px}
/* the active part: Persian site / dark page = filled */
.menu-lang .lg-en,.menu-theme .mt-moon{background:var(--green);color:var(--cream)}
:is(html[lang=fa],html[data-lang=fa]) .menu-lang .lg-en{background:none;color:var(--ink)}
:is(html[lang=fa],html[data-lang=fa]) .menu-lang .lg-fa{background:var(--green);color:var(--cream)}
html[data-theme=light] .menu-theme .mt-moon{background:none;color:var(--ink)}
html[data-theme=light] .menu-theme .mt-sun{background:var(--green);color:var(--cream)}

.m-main{flex:none;display:flex;width:100%;max-width:1280px;margin-inline:auto;padding-block:0 8px}
.m-list{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--rg)}

/* a row: the word, the Persian label under it; sharp ink on the mint, a dark-green band with cream text for the current page and for hover / focus / press */
.menu-panel .m-row{position:relative;flex:none;height:var(--rh);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;padding:0 var(--rp);
  color:var(--ink);background:none;opacity:0;translate:0 12px;transition:opacity .4s ease,translate .4s cubic-bezier(.2,.8,.2,1),background-color .2s,color .2s}
.menu-panel.is-open .m-row{opacity:1;translate:0 0;transition-delay:calc(.12s + var(--i,0) * .06s),calc(.12s + var(--i,0) * .06s),0s,0s}
.m-row:after{content:"";position:absolute;inset:auto 0 0;height:1px;background:rgb(11 12 10 / .28);transition:background-color .2s}
.m-row:nth-child(1){--i:0}.m-row:nth-child(2){--i:1}.m-row:nth-child(3){--i:2}.m-row:nth-child(4){--i:3}.m-row:nth-child(5){--i:4}.m-row:nth-child(6){--i:5}.m-row:nth-child(7){--i:6}
.menu-panel .m-row[aria-current=page],.menu-panel .m-row:focus-visible,.menu-panel .m-row:active{background:var(--green);color:var(--cream)}
.menu-panel .m-row:is([aria-current=page],:focus-visible,:active):after{background:var(--green)}
@media (hover:hover){.menu-panel .m-row:hover{background:var(--green);color:var(--cream)}.menu-panel .m-row:hover:after{background:var(--green)}}
.menu-panel .m-row:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.m-n,.m-go{display:none}
.m-w{font:400 18px/1.15 var(--mc);letter-spacing:.01em;white-space:nowrap}
.m-fa{font:400 12px/1.3 var(--nian);direction:rtl}
/* English mode: the menu is English only; the Persian sub-label shows only when the site is in Persian */
html:not([lang=fa]):not([data-lang=fa]) .m-fa{display:none}
:is(html[lang=fa],html[data-lang=fa]) .m-w:not([lang=en]){font:700 22px/1.2 var(--nian);letter-spacing:0}

/* the preview mosaic is a wide-screen thing */
.m-pv{display:none}

/* bottom bar, right under the list: search, Instagram, WhatsApp (admin / logout on account pages), the same 40 px boxes, 8 px apart, 44 px hit areas */
.m-foot{flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:8px;width:100%;max-width:1280px;margin-inline:auto;padding:16px 0 calc(16px + env(safe-area-inset-bottom))}
.m-sp{display:none}
.m-foot :is(a,button){position:relative;display:inline-grid;place-items:center;height:var(--box);min-width:var(--box);padding:0 12px;border:1px solid var(--green);color:var(--ink);font:700 12px/1 var(--nian);transition:background-color .2s,color .2s}
.m-foot :is(a,button):is(:hover,:focus-visible){background:var(--green);color:var(--cream)}
.m-foot :is(.m-ic,.m-search){width:var(--box);padding:0}
.m-foot .m-ic svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.m-foot .m-ic svg circle:last-child{fill:currentColor}
.m-search .m-sg{display:block;width:20px;height:20px;overflow:visible}
.m-foot svg :is(path[stroke],circle,rect){vector-effect:non-scaling-stroke;stroke-width:1.7px}

/* the header sits above the mint sheet: logo, icons and the close cross turn black so they stay legible; the header's language button hides (the sheet has the switch) */
body.menu-open .fh .hd:not(.is-in),body.menu-open .fh .hd.brand,body.menu-open .fh .acct-link.is-in{color:#0b0c0a}
body.menu-open .fh .hd:focus-visible{outline-color:#0b0c0a}
body.menu-open .fh .lang-link{visibility:hidden}
.menu-panel .fh .hd path[stroke],.fh .hd .ic path[stroke]{vector-effect:non-scaling-stroke}

/* the hamburger turns into a close cross (the header sits above the sheet) */
.fh .hd.menu-button:before,.fh .hd.menu-button:after{content:"";position:absolute;inset:auto;left:50%;top:50%;width:calc(var(--hi,18px) * 1.3);height:1.7px;margin:-.85px 0 0 calc(var(--hi,18px) * -.65);background:currentColor;transform:rotate(45deg) scaleX(0);transition:transform .3s cubic-bezier(.2,.8,.2,1) .1s}
.fh .hd.menu-button:after{transform:rotate(-45deg) scaleX(0)}
.fh .menu-button .ic{transition:opacity .15s}
.menu-open .fh .menu-button .ic{opacity:0}
.menu-open .fh .menu-button:before{transform:rotate(45deg) scaleX(1)}
.menu-open .fh .menu-button:after{transform:rotate(-45deg) scaleX(1)}

@media (min-width:600px){
  .menu-panel{--rh:clamp(70px,8.6vh,84px);--rp:20px}
  .m-w{font-size:clamp(22px,3.6vw,32px)}
  :is(html[lang=fa],html[data-lang=fa]) .m-w:not([lang=en]){font-size:clamp(22px,3.8vw,32px)}
  .m-fa{font-size:13px}
  .m-foot :is(a,button){font-size:13px;padding:0 16px}
  .m-foot :is(.m-ic,.m-search){padding:0}
}

/* wide screens: rows on one side, the mosaic on the other (the header is the same one the pages use) */
@media (min-width:901px) and (min-aspect-ratio:4/5){
  .menu-panel{--rh:clamp(54px,7.6vh,92px);--rg:12px;--rp:clamp(18px,2vw,30px);--H:calc(var(--rh) * 7 + var(--rg) * 6);padding:clamp(86.4px,7.2vw,105.6px) clamp(33.6px,3.36vw,57.6px) 0}
  .m-top{padding:8px 0 10px}
  .m-main{gap:var(--rg);padding-block:8px}
  .m-w,:is(html[lang=fa],html[data-lang=fa]) .m-w:not([lang=en]){font-size:clamp(22px,min(2.3vw,3.9vh),40px)}
  .m-fa{font-size:clamp(12px,.9vw,14px)}
  .m-foot{padding:12px 0 clamp(18px,3vh,30px)}

  .m-pv{display:grid;grid-template:repeat(5,1fr) / repeat(4,1fr);flex:none;width:calc(var(--H) * .8);height:var(--H);position:relative;overflow:hidden;background:none;container-type:size}
  .pv{display:contents}
  .pv .t{position:relative;display:block;overflow:hidden;scale:0;transition:scale .12s ease-in;transition-delay:0s;background-repeat:no-repeat;background-position:center;background-size:cover}
  /* all six compositions share the 4 x 5 grid: each tile has its own grid-area (generated below) and they overlap */
  .t.g{background-color:var(--green)}.t.c{background-color:var(--coral)}.t.m{background-color:var(--mint)}.t.e{background-color:var(--cream)}.t.k{background-color:var(--cream)}
  .t.sq{border-radius:0}.t.ci{border-radius:50%}
  .t.q1{border-radius:100% 0 0 0}.t.q2{border-radius:0 100% 0 0}.t.q3{border-radius:0 0 100% 0}.t.q4{border-radius:0 0 0 100%}
  .t.bag{background-size:94% auto;background-position:center 92%}
  .pv-ring{direction:ltr;position:absolute;inset:0;width:100%;height:100%;fill:var(--green);animation:pv-turn 60s linear infinite}
  .pv-ring text{font:400 15px/1 var(--mc);letter-spacing:.05em}
  .pv-menu{position:absolute;inset:0;margin:0;display:grid;place-items:center;font:400 clamp(14px,2.2cqw,26px)/1 var(--mc);letter-spacing:.14em;color:var(--green)}
  :is(html[lang=fa],html[data-lang=fa]) .pv-menu{font:900 clamp(20px,3.2cqw,34px)/1 var(--nian);letter-spacing:0}
  @keyframes pv-turn{to{rotate:360deg}}

  /* a composition builds itself tile by tile (a diagonal wave) when it becomes the active one */
  .menu-panel:not(:has(.m-row[data-pv]:is(:hover,:focus-visible))) .pv-home .t,
  .menu-panel:has(.mr-blend:is(:hover,:focus-visible)) .pv-blend .t,
  .menu-panel:has(.mr-spec:is(:hover,:focus-visible)) .pv-specialty .t,
  .menu-panel:has(.mr-acc:is(:hover,:focus-visible)) .pv-acc .t,
  .menu-panel:has(.mr-about:is(:hover,:focus-visible)) .pv-about .t,
  .menu-panel:has(.mr-coop:is(:hover,:focus-visible)) .pv-coop .t,
  .menu-panel:has(.mr-login:is(:hover,:focus-visible)) .pv-login .t{scale:1;transition:scale .3s cubic-bezier(.3,1.5,.5,1);transition-delay:calc(var(--d) * 32ms + 60ms)}
  /* photos load the first time their destination is hovered */
  .menu-panel:has(.mr-blend:is(:hover,:focus-visible)) .b1{background-image:url(assets/bag-spark-500.webp)}
  .menu-panel:has(.mr-blend:is(:hover,:focus-visible)) .b2{background-image:url(assets/bag-tempo-500.webp)}
  .menu-panel:has(.mr-blend:is(:hover,:focus-visible)) .b3{background-image:url(assets/bag-float-500.webp)}
  .menu-panel:has(.mr-blend:is(:hover,:focus-visible)) .b4{background-image:url(assets/bag-drift-500.webp)}
  .menu-panel:has(.mr-spec:is(:hover,:focus-visible)) .s1{background-image:url(assets/home/step-1.webp)}
  .menu-panel:has(.mr-spec:is(:hover,:focus-visible)) .s5{background-image:url(assets/home/step-5.webp);background-position:60% center}
  .menu-panel:has(.mr-coop:is(:hover,:focus-visible)) .s3{background-image:url(assets/home/step-3.webp);background-position:72% center}
  .menu-panel:has(.mr-login:is(:hover,:focus-visible)) .s6{background-image:url(assets/home/step-6.webp);background-position:48% center}
/*pv:start*/
.pv-home .t:nth-child(1){grid-area:1/1/span 1/span 1;--d:0}
.pv-home .t:nth-child(2){grid-area:1/2/span 1/span 1;--d:1}
.pv-home .t:nth-child(3){grid-area:1/3/span 1/span 1;--d:2}
.pv-home .t:nth-child(4){grid-area:1/4/span 1/span 1;--d:3}
.pv-home .t:nth-child(5){grid-area:2/1/span 1/span 1;--d:1}
.pv-home .t:nth-child(6){grid-area:2/2/span 2/span 2;--d:2}
.pv-home .t:nth-child(7){grid-area:2/4/span 1/span 1;--d:4}
.pv-home .t:nth-child(8){grid-area:3/1/span 1/span 1;--d:2}
.pv-home .t:nth-child(9){grid-area:3/4/span 1/span 1;--d:5}
.pv-home .t:nth-child(10){grid-area:4/1/span 1/span 1;--d:3}
.pv-home .t:nth-child(11){grid-area:4/2/span 1/span 1;--d:4}
.pv-home .t:nth-child(12){grid-area:4/3/span 1/span 1;--d:5}
.pv-home .t:nth-child(13){grid-area:4/4/span 1/span 1;--d:6}
.pv-home .t:nth-child(14){grid-area:5/1/span 1/span 1;--d:4}
.pv-home .t:nth-child(15){grid-area:5/2/span 1/span 1;--d:5}
.pv-home .t:nth-child(16){grid-area:5/3/span 1/span 1;--d:6}
.pv-home .t:nth-child(17){grid-area:5/4/span 1/span 1;--d:7}
.pv-blend .t:nth-child(1){grid-area:1/1/span 1/span 1;--d:0}
.pv-blend .t:nth-child(2){grid-area:1/2/span 1/span 1;--d:1}
.pv-blend .t:nth-child(3){grid-area:1/3/span 1/span 1;--d:2}
.pv-blend .t:nth-child(4){grid-area:1/4/span 1/span 1;--d:3}
.pv-blend .t:nth-child(5){grid-area:2/1/span 2/span 1;--d:1}
.pv-blend .t:nth-child(6){grid-area:2/2/span 2/span 1;--d:2}
.pv-blend .t:nth-child(7){grid-area:2/3/span 2/span 1;--d:3}
.pv-blend .t:nth-child(8){grid-area:2/4/span 2/span 1;--d:4}
.pv-blend .t:nth-child(9){grid-area:4/1/span 1/span 1;--d:3}
.pv-blend .t:nth-child(10){grid-area:4/2/span 1/span 1;--d:4}
.pv-blend .t:nth-child(11){grid-area:4/3/span 1/span 1;--d:5}
.pv-blend .t:nth-child(12){grid-area:4/4/span 1/span 1;--d:6}
.pv-blend .t:nth-child(13){grid-area:5/1/span 1/span 1;--d:4}
.pv-blend .t:nth-child(14){grid-area:5/2/span 1/span 1;--d:5}
.pv-blend .t:nth-child(15){grid-area:5/3/span 1/span 1;--d:6}
.pv-blend .t:nth-child(16){grid-area:5/4/span 1/span 1;--d:7}
.pv-specialty .t:nth-child(1){grid-area:1/1/span 2/span 2;--d:0}
.pv-specialty .t:nth-child(2){grid-area:1/3/span 1/span 1;--d:2}
.pv-specialty .t:nth-child(3){grid-area:1/4/span 1/span 1;--d:3}
.pv-specialty .t:nth-child(4){grid-area:2/3/span 1/span 1;--d:3}
.pv-specialty .t:nth-child(5){grid-area:2/4/span 1/span 1;--d:4}
.pv-specialty .t:nth-child(6){grid-area:3/1/span 1/span 1;--d:2}
.pv-specialty .t:nth-child(7){grid-area:3/2/span 1/span 1;--d:3}
.pv-specialty .t:nth-child(8){grid-area:3/3/span 2/span 2;--d:4}
.pv-specialty .t:nth-child(9){grid-area:4/1/span 1/span 1;--d:3}
.pv-specialty .t:nth-child(10){grid-area:4/2/span 1/span 1;--d:4}
.pv-specialty .t:nth-child(11){grid-area:5/1/span 1/span 1;--d:4}
.pv-specialty .t:nth-child(12){grid-area:5/2/span 1/span 1;--d:5}
.pv-specialty .t:nth-child(13){grid-area:5/3/span 1/span 1;--d:6}
.pv-specialty .t:nth-child(14){grid-area:5/4/span 1/span 1;--d:7}
.pv-acc .t:nth-child(1){grid-area:1/1/span 1/span 1;--d:0}.pv-about .t:nth-child(1){grid-area:1/1/span 1/span 1;--d:0}
.pv-acc .t:nth-child(2){grid-area:1/2/span 1/span 1;--d:1}.pv-about .t:nth-child(2){grid-area:1/2/span 1/span 1;--d:1}
.pv-acc .t:nth-child(3){grid-area:1/3/span 2/span 2;--d:2}.pv-about .t:nth-child(3){grid-area:1/3/span 2/span 2;--d:2}
.pv-acc .t:nth-child(4){grid-area:2/1/span 1/span 1;--d:1}.pv-about .t:nth-child(4){grid-area:2/1/span 1/span 1;--d:1}
.pv-acc .t:nth-child(5){grid-area:2/2/span 1/span 1;--d:2}.pv-about .t:nth-child(5){grid-area:2/2/span 1/span 1;--d:2}
.pv-acc .t:nth-child(6){grid-area:3/1/span 1/span 4;--d:2}.pv-about .t:nth-child(6){grid-area:3/1/span 1/span 4;--d:2}
.pv-acc .t:nth-child(7){grid-area:4/1/span 1/span 1;--d:3}.pv-about .t:nth-child(7){grid-area:4/1/span 1/span 1;--d:3}
.pv-acc .t:nth-child(8){grid-area:4/2/span 1/span 1;--d:4}.pv-about .t:nth-child(8){grid-area:4/2/span 1/span 1;--d:4}
.pv-acc .t:nth-child(9){grid-area:4/3/span 1/span 1;--d:5}.pv-about .t:nth-child(9){grid-area:4/3/span 1/span 1;--d:5}
.pv-acc .t:nth-child(10){grid-area:4/4/span 1/span 1;--d:6}.pv-about .t:nth-child(10){grid-area:4/4/span 1/span 1;--d:6}
.pv-acc .t:nth-child(11){grid-area:5/1/span 1/span 2;--d:4}.pv-about .t:nth-child(11){grid-area:5/1/span 1/span 2;--d:4}
.pv-acc .t:nth-child(12){grid-area:5/3/span 1/span 1;--d:6}.pv-about .t:nth-child(12){grid-area:5/3/span 1/span 1;--d:6}
.pv-acc .t:nth-child(13){grid-area:5/4/span 1/span 1;--d:7}.pv-about .t:nth-child(13){grid-area:5/4/span 1/span 1;--d:7}
.pv-coop .t:nth-child(1){grid-area:1/1/span 1/span 1;--d:0}
.pv-coop .t:nth-child(2){grid-area:1/2/span 1/span 1;--d:1}
.pv-coop .t:nth-child(3){grid-area:1/3/span 1/span 1;--d:2}
.pv-coop .t:nth-child(4){grid-area:1/4/span 1/span 1;--d:3}
.pv-coop .t:nth-child(5){grid-area:2/1/span 1/span 1;--d:1}
.pv-coop .t:nth-child(6){grid-area:2/2/span 2/span 2;--d:2}
.pv-coop .t:nth-child(7){grid-area:2/4/span 1/span 1;--d:4}
.pv-coop .t:nth-child(8){grid-area:3/1/span 1/span 1;--d:2}
.pv-coop .t:nth-child(9){grid-area:3/4/span 1/span 1;--d:5}
.pv-coop .t:nth-child(10){grid-area:4/1/span 1/span 1;--d:3}
.pv-coop .t:nth-child(11){grid-area:4/2/span 1/span 1;--d:4}
.pv-coop .t:nth-child(12){grid-area:4/3/span 1/span 1;--d:5}
.pv-coop .t:nth-child(13){grid-area:4/4/span 1/span 1;--d:6}
.pv-coop .t:nth-child(14){grid-area:5/1/span 1/span 1;--d:4}
.pv-coop .t:nth-child(15){grid-area:5/2/span 1/span 1;--d:5}
.pv-coop .t:nth-child(16){grid-area:5/3/span 1/span 1;--d:6}
.pv-coop .t:nth-child(17){grid-area:5/4/span 1/span 1;--d:7}
.pv-login .t:nth-child(1){grid-area:1/1/span 1/span 1;--d:0}
.pv-login .t:nth-child(2){grid-area:1/2/span 1/span 1;--d:1}
.pv-login .t:nth-child(3){grid-area:1/3/span 1/span 1;--d:2}
.pv-login .t:nth-child(4){grid-area:1/4/span 1/span 1;--d:3}
.pv-login .t:nth-child(5){grid-area:2/1/span 1/span 1;--d:1}
.pv-login .t:nth-child(6){grid-area:2/2/span 1/span 1;--d:2}
.pv-login .t:nth-child(7){grid-area:2/3/span 1/span 1;--d:3}
.pv-login .t:nth-child(8){grid-area:2/4/span 1/span 1;--d:4}
.pv-login .t:nth-child(9){grid-area:3/1/span 2/span 2;--d:2}
.pv-login .t:nth-child(10){grid-area:3/3/span 1/span 1;--d:4}
.pv-login .t:nth-child(11){grid-area:3/4/span 1/span 1;--d:5}
.pv-login .t:nth-child(12){grid-area:4/3/span 1/span 1;--d:5}
.pv-login .t:nth-child(13){grid-area:4/4/span 1/span 1;--d:6}
.pv-login .t:nth-child(14){grid-area:5/1/span 1/span 1;--d:4}
.pv-login .t:nth-child(15){grid-area:5/2/span 1/span 1;--d:5}
.pv-login .t:nth-child(16){grid-area:5/3/span 1/span 1;--d:6}
.pv-login .t:nth-child(17){grid-area:5/4/span 1/span 1;--d:7}
/*pv:end*/
}

@media (max-width:360px){
  .m-foot :is(a,button){padding:0 10px}
  .m-foot :is(.m-ic,.m-search){padding:0}
}
@media (prefers-reduced-motion:reduce){
  .menu-panel,.m-row,.pv .t,.fh .hd.menu-button:before,.fh .hd.menu-button:after,.fh .menu-button .ic,.m-foot :is(a,button),.menu-lang :is(.lg-en,.lg-fa),.menu-theme>span{transition:none!important}
  .pv-ring{animation:none}
  .m-row{opacity:1;translate:none}
}
/* short landscape phones: tighter rows so the links and the switches fit without scrolling (the rows stay 44px or more) */
@media (max-height:480px) and (max-width:899px){
  .menu-panel{--rh:48px;padding-top:52px}
  .m-top{padding-block:4px}
  .m-main{padding-block:0 2px}
  .m-foot{padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .m-fa{line-height:1.1}
}
@media print{.menu-panel{display:none!important}}

/* Persian menu: one label per row (no small description under it) */
.m-fa{display:none!important}

/* phones: the language and theme switches sit on the Home row in Persian (English: the bottom bar), at the far end, smaller */
@media not all and (min-width:901px) and (min-aspect-ratio:4/5){
  .menu-panel{--sb:32px}
  .m-top{position:absolute;top:56px;inset-inline:20px;width:auto;max-width:none;margin:0;height:var(--rh);padding:0;justify-content:flex-end;gap:8px;pointer-events:none;z-index:2}
  .m-top :is(.menu-lang,.menu-theme){pointer-events:auto;grid-template-columns:repeat(2,var(--sb));width:calc(var(--sb) * 2);height:var(--sb)}
  .menu-lang .lg-g{height:13px}
  .menu-theme svg{width:16px;height:16px}
  /* on the home page the Home row is the dark band: the switches swap their colours on it (cream frame, cream active cell with green text) */
  :is(html[lang=fa],html[data-lang=fa]) .menu-panel:has(.mr-home[aria-current=page]) .m-top{--green:#fff0e1;--cream:#285746;--ink:#fff0e1}
  /* English: the switches go to the bottom bar instead, at its far end (the search / Instagram / WhatsApp boxes stay at the start) */
  html:not([lang=fa]):not([data-lang=fa]) .m-top{top:calc(56px + 7 * var(--rh) + 24px);height:var(--box)}
}