﻿:root{--ink:#1d1d1f;--mute:#6e6e73;--line:#e8e8ed;--soft:#f5f5f7;--acc:#e5283e;--ease:cubic-bezier(.32,.72,0,1)}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}

/* ---------- هدر ---------- */
:root{--bar:124px}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sep{width:1px;height:22px;background:var(--line);flex:none}
.hd{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.hd-top,.hd-nav{max-width:1400px;margin:auto;display:flex;align-items:center;padding:0 24px}
.hd-top{height:76px;gap:20px}
.hd-nav{height:48px;gap:18px}
.logo{flex:none;display:flex;align-items:center;font-weight:700;font-size:22px;color:var(--acc)}
.logo img{height:36px;display:block}
.search{flex:1;max-width:640px;height:46px;margin-inline-start:12px;padding:0 16px;display:flex;align-items:center;gap:10px;border-radius:14px;background:#f0f0f1;color:var(--mute);transition:background .3s,box-shadow .3s}
.search:focus-within{background:#fff;box-shadow:0 0 0 2px var(--acc)}
.search input{flex:1;min-width:0;border:0;background:none;font:inherit;color:var(--ink);outline:0}
.search button{display:grid;place-items:center;color:inherit}
.acts{margin-inline-start:auto;display:flex;align-items:center;gap:14px}
.login{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:1px solid var(--line);border-radius:12px;font-size:14px;font-weight:500;transition:background .25s}
.login:hover{background:var(--soft)}
.cart{position:relative;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;transition:background .25s}
.cart:hover{background:var(--soft)}
.badge{position:absolute;top:3px;left:3px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--acc);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.badge:empty{display:none}
.trigger{display:flex;align-items:center;gap:10px;height:100%;padding:0 4px;font-weight:700;position:relative}
.trigger::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--acc);transform:scaleX(0);transition:transform .4s var(--ease)}
.trigger[aria-expanded=true]::after{transform:scaleX(1)}
.hd-nav nav{display:flex;align-items:center;gap:22px;height:100%}
.hd-nav nav a{position:relative;display:flex;align-items:center;gap:6px;height:100%;color:var(--mute);font-size:14px;transition:color .25s}
.hd-nav nav a::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.hd-nav nav a:hover,.hd-nav nav a:focus-visible{color:var(--ink)}
.hd-nav nav a:hover::after,.hd-nav nav a:focus-visible::after{transform:scaleX(1)}

/* ---------- پس‌زمینه‌ی محو (مثل اپل) ---------- */
.ov{position:fixed;inset:var(--bar) 0 0;z-index:30;background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.ov.show{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}

/* ---------- مگامنو: باز شدن با انیمیشن ارتفاع ---------- */
.mm{position:fixed;inset:var(--bar) 0 auto;z-index:40;display:grid;grid-template-rows:0fr;visibility:hidden;background:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.35);transition:grid-template-rows .55s var(--ease),visibility 0s .55s}
.mm.open{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .55s var(--ease)}
.mm{grid-template-columns:minmax(0,1fr)}
.mm-clip{overflow:hidden;min-height:0;min-width:0}
.mm-body,.tabs,.panels{min-width:0}
.mm-body{max-width:1400px;margin:auto;height:min(500px,calc(100dvh - var(--bar) - 32px));display:grid;grid-template-columns:260px 1fr}

.tabs{list-style:none;margin:0;padding:12px;border-inline-end:1px solid var(--line);overflow-y:auto;background:#fafafc}
.tab{width:100%;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;text-align:start;font-weight:500;transition:background .25s,color .25s}
.tab[aria-selected=true]{background:#fff;color:var(--acc);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.tab .dot{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}

.panels{position:relative;overflow-y:auto}
.panel{padding:28px 36px;display:grid;grid-template-columns:repeat(3,1fr) 320px;gap:36px;opacity:0;visibility:hidden;position:absolute;inset:0 0 auto;transition:opacity .2s}
.panel.on{opacity:1;visibility:visible;position:relative;transition:opacity .35s .05s}

/* ورود مرحله‌ای ستون‌ها بعد از باز شدن پنل */
.col,.media{opacity:0;transform:translateY(-10px);transition:opacity .2s,transform .2s}
.mm.open .panel.on .col,.mm.open .panel.on .media{opacity:1;transform:none;transition:opacity .5s var(--ease) calc(var(--i)*70ms + 120ms),transform .6s var(--ease) calc(var(--i)*70ms + 120ms)}

.h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.h a{font-weight:700;padding-inline-start:10px;border-inline-start:3px solid var(--acc);line-height:1.2}
.h a::after{content:"‹";margin-inline-start:8px;color:var(--mute)}
.tg{display:none}
.col ul{list-style:none;margin:0;padding:0}
.col li a{display:block;padding:5px 0;font-size:14px;color:var(--mute);transition:color .2s,transform .3s var(--ease)}
.col li a:hover,.col li a:focus-visible{color:var(--ink);transform:translateX(-4px)}

.col li.all{display:none}
.media{margin:0;position:relative;border-radius:18px;overflow:hidden;min-height:260px;background:var(--g)}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media a{position:absolute;inset:auto 0 0;padding:44px 18px 16px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6));font-weight:700}
.media small{display:block;font-weight:400;opacity:.85}

/* ---------- موبایل ---------- */
.mm-head,.mm-quick{display:none}
.close{width:38px;height:38px;border-radius:50%;background:var(--soft);display:grid;place-items:center;transition:background .25s,transform .4s var(--ease)}
.close:hover{background:#ffe3e6;color:var(--acc);transform:rotate(90deg)}
@media (max-width:900px){
  :root{--bar:108px}
  .hd{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:56px 52px;grid-template-areas:"trg logo acts" "srch srch srch";align-items:center;padding:0 12px}
  .hd-top,.hd-nav{display:contents}
  .trigger{grid-area:trg;width:44px;height:44px;padding:0;justify-content:center}
  .trigger span,.trigger::after,.hd-nav .sep,.hd-nav nav,.acts .sep,.login span{display:none}
  .logo{grid-area:logo;justify-self:center}
  .acts{grid-area:acts;margin:0;gap:2px}
  .login{width:44px;padding:0;justify-content:center;border:0}
  .search{grid-area:srch;max-width:none;margin:0;height:42px}
  .ov{inset:0;z-index:55}
  .mm-quick{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:none;max-height:34%;overflow-y:auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fafafc}
  .mm-quick a{padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);border-inline-start:3px solid var(--acc);font-size:14px;font-weight:500;transition:background .25s}
  .mm-quick a:active{background:#ffe3e6}
  .col li.all{display:block}
  .col li.all a{color:var(--acc);font-weight:500}
  .mm{top:0;z-index:60;left:auto;right:0;width:min(88vw,440px);grid-template-rows:1fr;transform:translateX(100%);box-shadow:-20px 0 50px -20px rgba(0,0,0,.4);transition:transform .5s var(--ease),visibility 0s .5s}
  .mm.open{transform:none;transition:transform .5s var(--ease)}
  .mm-head{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--line);flex:none;font-weight:700}
  .mm-body{display:flex;flex-direction:column;height:100dvh}
  .tabs{display:flex;gap:8px;padding:10px 12px;border:0;border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;background:#fff;flex:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs li{flex:none;scroll-snap-align:center}
  .tab{width:auto;padding:8px 16px;border-radius:999px;background:var(--soft);white-space:nowrap;font-size:14px}
  .tab[aria-selected=true]{background:var(--acc);color:#fff;box-shadow:none}
  .tab .dot{display:none}
  .panels{flex:1;min-height:0;padding-bottom:env(safe-area-inset-bottom)}
  .panel{grid-template-columns:1fr;gap:6px;padding:16px}
  .media{order:-1;min-height:0;aspect-ratio:16/9;margin-bottom:8px}
  .col{border-bottom:1px solid var(--line)}
  .h{padding:10px 0;margin:0}
  .tg{display:block;width:32px;height:32px;position:relative}
  .h a::after{display:none}
  .h{cursor:pointer;min-height:44px}
  .tg::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/20px no-repeat;transition:transform .35s var(--ease)}
  .col.exp .tg::before{transform:rotate(180deg)}
  .col ul{display:none;padding-bottom:10px}
  .col.exp ul{display:block}
  .col li a{padding:8px 0}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;transition-delay:0s!important}}

/* ورود + سبد خرید کنار هم، با ترتیب راست‌به‌چپ */
.acts .divUserMenu{width:auto;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:10px;direction:rtl}
.acts .divUserMenu > *{flex:none}
.acts .cart-trigger{position:relative;flex:none}
#divpoh{white-space:nowrap}

/* خنثی کردن قوانین سراسری Style28.css */
.hd-nav nav,.mm-quick{float:none;width:auto}
.tabs{margin:0;box-shadow:none}

@media (max-width:900px){
  .acts .divUserMenu{gap:6px}
  #divpoh{padding:5px 10px;font-size:12px}
}

/* ورود + سبد خرید: هم‌قد و کنار هم */
.acts .divUserMenu{display:flex !important;flex-direction:row !important;align-items:center !important;gap:6px !important;width:auto !important;direction:rtl !important}

/* دکمه ورود */
a#divpoh{display:flex !important;align-items:center;justify-content:center;height:40px !important;padding:0 14px !important;box-sizing:border-box;border:1px solid #cfcfcf;border-radius:7px !important;font-size:13px !important;white-space:nowrap;background:#fff}

/* سبد خرید */
.cart-trigger{position:relative !important;display:grid !important;place-items:center;width:40px !important;height:40px !important;padding:0 !important;margin:0 !important;box-sizing:border-box;border:1px solid #cfcfcf !important;border-radius:7px !important;background:#fff !important;box-shadow:none !important}
.cart-trigger:hover{background:#f5f5f7 !important}
.cart-trigger svg{width:22px !important;height:22px !important;stroke:#2b2b4a;fill:none}

/* نشان تعداد */
.cart-badge{position:absolute !important;top:-6px !important;left:-6px !important;right:auto !important;min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;border-radius:9px;background:#ef4056;color:#fff;font-size:10px;line-height:17px;text-align:center}