/* سربرگ مشترک سایت (templates/shop/_top.html، js/top.js) -- بازطراحی ۱۴۰۵/۰۷/۲۲.
   دو حالت، هر دو کامل: شفاف روی هیروی قرمز (متن سفید) و سفیدِ شیشه‌ای بعد از اسکرول یا در صفحه‌های
   دیگر (متن تیره). ورود و سبد خرید در هر دو حالت دیده می‌شوند -- قبلاً بعد از اسکرول پنهان می‌شدند. */
:root { --top-h: 60px; }
@media (min-width: 900px) { :root { --top-h: 104px; } }

.top { --top-ink: #221b1a; --top-muted: #857a76; --top-line: #eadfdb; --top-red: #a51d2d; --top-red-deep: #6d0a14; --top-hot: #d2242f; --top-gold: #ffd08a;
  position: fixed; inset: 0 0 auto; z-index: 40; box-sizing: border-box; color: #fff; font: 15px/1.5 Vazirmatn, Tahoma, sans-serif; direction: rtl;
  transition: background .28s ease, color .28s ease, box-shadow .28s ease, transform .28s ease; }
.top *, .top-drawer * { box-sizing: border-box; }
.top svg, .top-drawer svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
:where(.top) a { color: inherit; text-decoration: none; }
.top [hidden], .top-drawer[hidden] { display: none !important; }

/* نوار باریکِ بالا (فقط دسکتاپ، فقط روی هیرو؛ با اسکرول جمع می‌شود) */
.top__strip { display: none; }
@media (min-width: 900px) {
  .top__strip { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 36px; padding: 0 clamp(16px, 4vw, 44px); overflow: hidden;
    background: rgba(0, 0, 0, .22); border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .92);
    transition: height .28s ease, opacity .2s ease, border-color .28s ease; }
  .top.is-scrolled .top__strip { height: 0; opacity: 0; border-bottom-color: transparent; }
}
.top__live { display: inline-flex; align-items: center; gap: 8px; }
.top__live i { width: 8px; height: 8px; border-radius: 50%; background: #7dff9e; box-shadow: 0 0 0 4px rgba(125, 255, 158, .22); animation: top-pulse 2.4s ease-in-out infinite; }
.top__strip-mid { opacity: .85; }
.top__strip-end { display: inline-flex; align-items: center; gap: 14px; }
.top__strip-end b { color: var(--top-gold); font-weight: 800; }
.top__strip-end a { font-weight: 900; letter-spacing: .3px; font-variant-numeric: tabular-nums; }
.top__strip-end a:hover { color: var(--top-gold); }
@keyframes top-pulse { 50% { box-shadow: 0 0 0 7px rgba(125, 255, 158, .08); } }

/* نوار اصلی */
.top__bar { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 clamp(14px, 4vw, 44px); }
@media (min-width: 900px) { .top__bar { height: 68px; gap: 20px; } }
.top__brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: inherit; }
.top__brand img { display: block; width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 3px 12px rgba(0, 0, 0, .18); }
.top__brand span { display: grid; line-height: 1.25; }
.top__brand b { font-size: 17px; font-weight: 900; }
.top__brand small { font-size: 11px; font-weight: 700; opacity: .72; }
@media (min-width: 900px) { .top__brand img { width: 46px; height: 46px; } .top__brand b { font-size: 18.5px; } }

.top__nav { display: none; align-items: center; gap: 4px; margin-inline: auto; }
@media (min-width: 900px) { .top__nav { display: flex; } }
.top__nav a { position: relative; padding: 8px 12px; border-radius: 999px; font-size: 14.5px; font-weight: 800; opacity: .92; transition: background .2s ease, opacity .2s ease, color .2s ease; }
.top__nav a:hover { background: rgba(255, 255, 255, .12); opacity: 1; }
.top__nav a.is-on::after { content: ""; position: absolute; inset: auto 12px 3px; height: 2.5px; border-radius: 2px; background: currentColor; }

.top__actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
@media (min-width: 900px) { .top__actions { margin-inline-start: 0; } }
.top__icon, .top__account, .top__cart, .top__install { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; margin: 0; border: 1.5px solid rgba(255, 255, 255, .45);
  border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 13.5px; font-weight: 800; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease; }
.top__icon { width: 42px; padding: 0; }
.top__icon:hover, .top__account:hover, .top__install:hover { background: rgba(255, 255, 255, .14); }
.top__icon:active, .top__account:active, .top__cart:active { transform: scale(.95); }
.top__icon svg, .top__account svg, .top__cart svg { width: 20px; height: 20px; flex: none; }
.top__account { padding: 0 14px; }
.top__account span { display: none; }
@media (min-width: 1100px) { .top__account span { display: inline; } }
.top__install { padding: 0 14px; }
.top__cart { position: relative; padding: 0 14px 0 12px; border-color: #fff; background: #fff; color: var(--top-red-deep); box-shadow: 0 6px 18px rgba(0, 0, 0, .16); }
.top__cart span { display: none; }
@media (min-width: 900px) { .top__cart span { display: inline; } }
.top__cart b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--top-hot); color: #fff; font-size: 12.5px; font-weight: 900; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.top__cart:hover { background: #fff5f0; }
.top .top__cart.is-cart-hit { animation: top-cart-hit .46s cubic-bezier(.2, .9, .28, 1); }
@keyframes top-cart-hit { 0%, 100% { transform: scale(1); } 42% { transform: scale(1.14) rotate(-5deg); } }
.top__menu { display: inline-flex; }
@media (min-width: 900px) { .top__menu { display: none; } }
@media (max-width: 899px) { .top__account { display: none; } .top__cart { width: auto; padding: 0 11px; } }
@media (max-width: 380px) { .top__brand small { display: none; } .top__brand b { font-size: 15.5px; } .top__actions { gap: 6px; } .top__icon { width: 40px; height: 40px; } .top__cart { height: 40px; } }

/* حالت سفید: بعد از اسکرول روی هیرو، و همیشه در صفحه‌های دیگر */
.top.is-solid { background: rgba(255, 255, 255, .97); color: var(--top-ink); box-shadow: 0 1px 0 var(--top-line), 0 10px 28px rgba(54, 20, 18, .07);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.top.is-static { position: sticky; top: 0; }
.top.is-solid .top__strip { background: var(--top-red-deep); }
.top.is-solid .top__nav a:hover { background: #fbf1ee; color: var(--top-red); }
.top.is-solid .top__nav a.is-on { color: var(--top-red); }
.top.is-solid .top__icon, .top.is-solid .top__account, .top.is-solid .top__install { border-color: var(--top-line); background: #fff; color: var(--top-ink); }
.top.is-solid .top__icon:hover, .top.is-solid .top__account:hover, .top.is-solid .top__install:hover { border-color: var(--top-red); color: var(--top-red); }
.top.is-solid .top__cart { border-color: var(--top-red); background: var(--top-red); color: #fff; box-shadow: 0 8px 20px rgba(165, 29, 45, .25); }
.top.is-solid .top__cart:hover { background: #8f1826; }
.top.is-solid .top__cart b { background: #fff; color: var(--top-red); }
.top.is-solid .top__brand small { color: var(--top-muted); opacity: 1; }

/* جست‌وجو: زیر سربرگ باز می‌شود؛ روی صفحهٔ اصلی همان لحظه کالاها را صاف می‌کند */
.top__find { padding: 0 clamp(14px, 4vw, 44px) 14px; }
.top__find form { display: flex; align-items: center; gap: 10px; max-width: 760px; margin: 0 auto; padding: 0 8px 0 16px; min-height: 54px; border: 1.5px solid var(--top-line); border-radius: 999px;
  background: #fff; color: var(--top-ink); box-shadow: 0 18px 40px rgba(54, 20, 18, .16); animation: top-drop .22s ease; }
.top__find form:focus-within { border-color: var(--top-red); }
.top__find svg { width: 21px; height: 21px; color: var(--top-muted); flex: none; }
.top__find input { flex: 1; min-width: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 15.5px; font-weight: 600; outline: 0; }
.top__find input::-webkit-search-cancel-button { display: none; }
.top__find button { height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--top-red); color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.top.is-finding:not(.is-solid) { background: rgba(70, 8, 14, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@keyframes top-drop { from { opacity: 0; transform: translateY(-6px); } }

/* منوی کشویی گوشی */
.top-drawer { position: fixed; inset: 0; z-index: 60; direction: rtl; font: 15px/1.6 Vazirmatn, Tahoma, sans-serif; }
.top-drawer__shade { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(25, 10, 10, .48); cursor: pointer; animation: top-fade .2s ease; }
.top-drawer__panel { position: absolute; inset: 0 auto 0 0; display: flex; flex-direction: column; gap: 14px; width: min(340px, 88vw); padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
  overflow-y: auto; background: #fff; color: #221b1a; box-shadow: 0 0 40px rgba(0, 0, 0, .22); animation: top-slide .26s cubic-bezier(.2, .8, .2, 1); }
.top-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #eadfdb; }
.top-drawer__head .top__brand { color: #221b1a; text-decoration: none; }
.top-drawer__head .top__brand small { color: #857a76; opacity: 1; }
.top-drawer__head .top__icon { border-color: #eadfdb; color: #221b1a; }
.top-drawer__links { display: grid; gap: 4px; }
.top-drawer__links a { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 12px; border-radius: 14px; color: #221b1a; font-size: 15.5px; font-weight: 800; text-decoration: none; }
.top-drawer__links a:hover, .top-drawer__links a.is-on { background: #fbf1ee; color: #a51d2d; }
.top-drawer__links svg { width: 21px; height: 21px; color: #a51d2d; flex: none; }
.top-drawer__links b { margin-inline-start: auto; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: #a51d2d; color: #fff; font-size: 12.5px; line-height: 24px; text-align: center; }
.top-drawer__call { display: grid; gap: 2px; margin-top: auto; padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, #6d0a14, #b91f2d); color: #fff; text-decoration: none; }
.top-drawer__call small { font-size: 12px; opacity: .85; }
.top-drawer__call span { font-size: 21px; font-weight: 900; letter-spacing: .5px; text-align: right; font-variant-numeric: tabular-nums; }
.top-drawer__note { margin: 0; color: #a51d2d; font-size: 13px; font-weight: 800; text-align: center; }
@keyframes top-slide { from { transform: translateX(-100%); } }
@keyframes top-fade { from { opacity: 0; } }
html.top-locked, html.top-locked body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .top, .top__strip, .top-drawer__panel, .top-drawer__shade, .top__find form, .top__live i { animation: none !important; transition: none !important; } }

/* صفحهٔ محصول (app.css) خودش فاصلهٔ کناری دارد؛ سربرگ از لبه تا لبه می‌رود. */
.storefront--detail { padding-top: 0 !important; }
.storefront--detail > .top { margin: 0 calc(-1 * clamp(18px, 2.6vw, 50px)) 6px; }
@media (max-width: 1023px) { .storefront--detail > .top { margin-inline: -16px; } }
@media (max-width: 600px) { .storefront--detail > .top { margin-inline: -11px; } }