/* ==========================================================================
   برند زر ماکارون  —  /brands/zar/
   شورت‌کد: [hug_brand_zar]
   همهٔ قاعده‌ها زیر .hug-scope.hug-brand-zar اسکوپ شده‌اند؛ با استایل آسترا تداخل ندارند.
   font-family عمداً تعریف نشده تا فونت از سفارشی‌سازی آسترا ارث برسد.
   ========================================================================== */

/* ── تنظیمات محلی ───────────────────────────────────────────────────── */
.hug-scope.hug-brand-zar{
  /* آفست اسکرول برای هدر چسبانِ وردپرس — با ارتفاع هدر خودتان تنظیم کنید */
  --hug-anchor-offset: 110px;
  /* علامتِ جهت: جابه‌جایی‌های افقی در چپ‌چین آینه می‌شوند */
  --hug-dx: 1;
}
.hug-scope.hug-brand-zar.hug-ltr{ --hug-dx: -1; }
.hug-scope.hug-brand-zar [id]{scroll-margin-top:var(--hug-anchor-offset)}

/* اگر برگه را «تمام‌عرض / Stretched» نکردید و نوارهای رنگی بریده می‌شوند،
   کامنت سه خط زیر را بردارید. (اول تنظیم آسترا را امتحان کنید؛ بهتر است.)
.hug-scope.hug-brand-zar{
  margin-inline: calc(50% - 50vw); width: 100vw; max-width: 100vw;
} */

.hug-scope.hug-brand-zar{--accent:#F59E1B; --accent-hi:#FFB84D; --accent-soft:#FEF6E9; --accent-ink:#B45309;
  --ink:#2E3D5C; --ink-soft:#41527A; --ink-2:#3A4A6B; --ink-deep:#22304A;
  --bg:#F7F8FA; --surface:#FFFFFF; --surface-2:#EEF1F5; --line:#E2E6EC; --line-2:#D6DCE5;
  --muted:#6B7280; --muted-2:#5F6672; --on-dark:#F3F6FA; --on-dark-2:#C2C9D2; --on-dark-3:#A8B1BC;
  --r-card:12px; --r-btn:8px; --r-pill:999px;
  --focus:0 0 0 3px rgba(245,158,11,.45);
  --dur-fast:160ms; --dur-base:220ms; --dur-mod:360ms;
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --maxw:1280px; --pad-x:80px; --measure:66ch;

  /* زر ماکارون — اُخرایی گندم */
  --brand-deep:#6B5313; --brand-mid:#7E6B3E; --brand-tint:#F6F2E8; --brand-on:#E4D8B8;
  --rail:#78869C; --rail-2:#E4E9F1;}
@media (max-width:768px){
.hug-scope.hug-brand-zar{--pad-x:24px}
}
.hug-scope.hug-brand-zar, .hug-scope.hug-brand-zar *{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
.hug-scope.hug-brand-zar{background:var(--bg);
  color:var(--ink-deep); line-height:1.6; -webkit-font-smoothing:antialiased}
.hug-scope.hug-brand-zar::selection, .hug-scope.hug-brand-zar ::selection{background:var(--accent-soft); color:var(--accent-ink)}
.hug-scope.hug-brand-zar a{color:inherit; text-decoration:none}
.hug-scope.hug-brand-zar :focus-visible{outline:none; box-shadow:var(--focus); border-radius:6px}
.hug-scope.hug-brand-zar .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x)}
.hug-scope.hug-brand-zar section{padding-block:96px}
@media (max-width:768px){
.hug-scope.hug-brand-zar section{padding-block:60px}
}
.hug-scope.hug-brand-zar h1, .hug-scope.hug-brand-zar h2, .hug-scope.hug-brand-zar h3{line-height:1.22; letter-spacing:-.01em}
.hug-scope.hug-brand-zar .rv{opacity:0; transform:translateY(14px); transition:opacity var(--dur-mod) var(--ease-out), transform var(--dur-mod) var(--ease-out)}
.hug-scope.hug-brand-zar .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
.hug-scope.hug-brand-zar .rv{opacity:1; transform:none; transition:none}
}
.hug-scope.hug-brand-zar .assume{display:inline-block; font-size:11.5px; font-weight:700; color:var(--accent-ink);
  background:var(--accent-soft); border-radius:var(--r-pill); padding:2px 10px; vertical-align:2px}
.hug-scope.hug-brand-zar .mast{background:var(--brand-deep); color:var(--on-dark); padding-block:76px 0; position:relative; overflow:hidden}
.hug-scope.hug-brand-zar .mast::after{content:""; position:absolute; inset-inline-end:-150px; top:-125px; width:470px; height:470px;
  border-radius:50%; background:radial-gradient(circle at 42% 42%, rgba(255,214,120,.16), transparent 62%)}
.hug-scope.hug-brand-zar .crumb{font-size:13px; color:var(--brand-on); margin-bottom:26px; position:relative; z-index:1}
.hug-scope.hug-brand-zar .crumb a:hover{color:var(--accent-hi)}
.hug-scope.hug-brand-zar .crumb span{margin-inline:7px; opacity:.5}
.hug-scope.hug-brand-zar .mast h1{font-size:clamp(30px,4.4vw,52px); font-weight:800; max-width:17ch; position:relative; z-index:1}
.hug-scope.hug-brand-zar .mast .lede{margin-top:20px; font-size:clamp(16px,1.5vw,19px); color:var(--brand-on); max-width:60ch;
  line-height:1.78; position:relative; z-index:1}
.hug-scope.hug-brand-zar .mast .lede b{color:#fff; font-weight:600}
.hug-scope.hug-brand-zar .facts{margin-top:50px; display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.16); position:relative; z-index:1}
.hug-scope.hug-brand-zar .facts div{padding:22px 0 30px; border-inline-start:1px solid rgba(255,255,255,.13); padding-inline-start:20px}
.hug-scope.hug-brand-zar .facts div:first-child{border-inline-start:0; padding-inline-start:0}
.hug-scope.hug-brand-zar .facts dt{font-size:12.5px; color:var(--on-dark-3); margin-bottom:7px}
.hug-scope.hug-brand-zar .facts dd{font-size:17px; font-weight:700; color:#fff}
.hug-scope.hug-brand-zar .facts dd small{display:block; font-size:12.5px; font-weight:400; color:var(--brand-on); margin-top:4px}
@media (max-width:860px){
.hug-scope.hug-brand-zar .facts{grid-template-columns:1fr 1fr}
.hug-scope.hug-brand-zar .facts div:nth-child(3){border-inline-start:0; padding-inline-start:0}
}
@media (max-width:520px){
.hug-scope.hug-brand-zar .facts{grid-template-columns:1fr}
.hug-scope.hug-brand-zar .facts div{border-inline-start:0; padding-inline-start:0;
  padding-block:16px 18px; border-top:1px solid rgba(255,255,255,.10)}
.hug-scope.hug-brand-zar .facts div:first-child{border-top:0}
}
.hug-scope.hug-brand-zar .overline{font-size:12.5px; font-weight:700; color:var(--accent-ink); letter-spacing:.04em; margin-bottom:12px}
.hug-scope.hug-brand-zar .h2{font-size:clamp(24px,3vw,36px); font-weight:800; color:var(--ink-deep); max-width:21ch}
.hug-scope.hug-brand-zar .lead{margin-top:16px; font-size:16.5px; color:var(--ink-soft); max-width:var(--measure); line-height:1.85}
.hug-scope.hug-brand-zar .lead b{color:var(--ink-deep); font-weight:600}
.hug-scope.hug-brand-zar .prose{font-size:16px; color:var(--ink-2); line-height:1.95; max-width:var(--measure)}
.hug-scope.hug-brand-zar .prose p + p{margin-top:16px}
.hug-scope.hug-brand-zar .prose b{color:var(--ink-deep); font-weight:700}
.hug-scope.hug-brand-zar #why{background:var(--surface)}
.hug-scope.hug-brand-zar #shelf{background:var(--brand-tint)}
.hug-scope.hug-brand-zar .sw{display:flex; gap:8px; flex-wrap:wrap; margin-top:30px}
.hug-scope.hug-brand-zar .sw button{appearance:none; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  font:inherit; font-size:14.5px; font-weight:600; padding:11px 20px; border-radius:var(--r-pill); cursor:pointer;
  transition:background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast)}
.hug-scope.hug-brand-zar .sw button:hover{border-color:var(--brand-mid)}
.hug-scope.hug-brand-zar .sw button[aria-pressed="true"]{background:var(--brand-deep); border-color:var(--brand-deep); color:#fff}
.hug-scope.hug-brand-zar .shelfbox{margin-top:22px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:26px 24px}
.hug-scope.hug-brand-zar .facings{display:grid; grid-template-columns:repeat(12,1fr); gap:7px}
@media (max-width:760px){
.hug-scope.hug-brand-zar .facings{grid-template-columns:repeat(6,1fr); gap:6px}
}
.hug-scope.hug-brand-zar .fc{aspect-ratio:.62; border-radius:5px 5px 3px 3px; background:var(--rail-2); border:1px solid var(--rail);
  position:relative; transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out)}
.hug-scope.hug-brand-zar .fc::after{content:""; position:absolute; inset-inline:14%; top:22%; height:3px; border-radius:2px;
  background:var(--rail); opacity:.55; transition:background var(--dur-base) var(--ease-out)}
.hug-scope.hug-brand-zar .fc.sp{background:var(--brand-deep); border-color:var(--brand-deep)}
.hug-scope.hug-brand-zar .fc.sp::after{background:var(--brand-on); opacity:1}
.hug-scope.hug-brand-zar .board{height:9px; border-radius:0 0 4px 4px; background:var(--rail); margin-top:6px}
.hug-scope.hug-brand-zar .take{margin-top:20px; font-size:15.5px; color:var(--ink-2); line-height:1.85; max-width:74ch; min-height:3em}
.hug-scope.hug-brand-zar .take b{color:var(--brand-deep); font-weight:700}
.hug-scope.hug-brand-zar .slegend{display:flex; gap:20px; flex-wrap:wrap; margin-top:16px; font-size:12.5px; color:var(--muted-2)}
.hug-scope.hug-brand-zar .slegend b{display:inline-block; width:11px; height:11px; border-radius:3px; margin-inline-end:7px; vertical-align:-1px}
.hug-scope.hug-brand-zar #price{background:var(--surface)}
.hug-scope.hug-brand-zar .axwrap{margin-top:34px; overflow-x:auto; padding-inline:8px}
.hug-scope.hug-brand-zar .axhead{display:flex; justify-content:space-between; gap:20px; min-width:640px;
  font-size:13px; font-weight:700; color:var(--ink-2); margin-bottom:34px}
.hug-scope.hug-brand-zar .axis{position:relative; min-width:640px; padding-inline:52px}
.hug-scope.hug-brand-zar .axis .up, .hug-scope.hug-brand-zar .axis .dn{position:relative; height:66px}
.hug-scope.hug-brand-zar .axis .rail{position:relative; height:2px; background:var(--rail); border-radius:2px; margin-block:4px}
.hug-scope.hug-brand-zar .axis .dot{position:absolute; top:50%; width:13px; height:13px; border-radius:50%; background:var(--rail);
  transform:translate(50%,-50%); border:2px solid var(--surface)}
.hug-scope.hug-brand-zar .axis .dot.sp{background:var(--brand-deep); width:16px; height:16px}
.hug-scope.hug-brand-zar .axis .lb{position:absolute; width:13ch; transform:translateX(calc(var(--hug-dx,1) * 50%)); font-size:12.5px; color:var(--ink-2);
  line-height:1.4; text-align:center}
.hug-scope.hug-brand-zar .axis .lb.sp{color:var(--brand-deep); font-weight:700}
.hug-scope.hug-brand-zar .axis .lb.up{bottom:12px}
.hug-scope.hug-brand-zar .axis .lb.dn{top:12px}
.hug-scope.hug-brand-zar .axis .lb u{position:absolute; inset-inline-start:50%; width:1px; background:var(--line-2);
  text-decoration:none; height:11px}
.hug-scope.hug-brand-zar .axis .lb.up u{bottom:-13px}
.hug-scope.hug-brand-zar .axis .lb.dn u{top:-13px}
.hug-scope.hug-brand-zar .axnote{margin-top:16px; font-size:13px; color:var(--muted-2); line-height:1.8; max-width:78ch}
.hug-scope.hug-brand-zar #codes{background:var(--brand-tint)}
.hug-scope.hug-brand-zar .cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:34px}
@media (max-width:980px){
.hug-scope.hug-brand-zar .cards{grid-template-columns:minmax(0,1fr)}
}
.hug-scope.hug-brand-zar .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:24px 26px}
.hug-scope.hug-brand-zar .card .code{font-size:12.5px; font-weight:700; color:var(--brand-mid); font-variant-numeric:tabular-nums;
  letter-spacing:.03em}
.hug-scope.hug-brand-zar .card h3{font-size:19px; font-weight:800; color:var(--ink-deep); margin-top:8px; line-height:1.35}
.hug-scope.hug-brand-zar .card .w{display:inline-block; margin-top:10px; font-size:12.5px; font-weight:700; color:var(--brand-deep);
  background:var(--brand-tint); border-radius:var(--r-pill); padding:4px 12px}
.hug-scope.hug-brand-zar .card dl{margin-top:20px; border-top:1px solid var(--line)}
.hug-scope.hug-brand-zar .card dl > div{padding-block:14px; border-bottom:1px solid var(--line)}
.hug-scope.hug-brand-zar .card dt{font-size:12px; font-weight:700; color:var(--muted-2); margin-bottom:6px}
.hug-scope.hug-brand-zar .card dd{font-size:14.5px; color:var(--ink-2); line-height:1.8}
.hug-scope.hug-brand-zar .card dd b{color:var(--ink-deep); font-weight:700}
.hug-scope.hug-brand-zar .card .q{margin-top:16px; background:var(--accent-soft); border-radius:10px; padding:14px 16px;
  font-size:13.5px; color:var(--accent-ink); line-height:1.8}
.hug-scope.hug-brand-zar .card .q b{font-weight:700}
.hug-scope.hug-brand-zar #claims{background:var(--surface)}
.hug-scope.hug-brand-zar .claims{margin-top:30px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-card);
  padding:26px 28px; max-width:82ch}
.hug-scope.hug-brand-zar .claims li{list-style:none; position:relative; padding-inline-start:26px; padding-block:9px; font-size:15px;
  color:var(--ink-2); line-height:1.8; border-bottom:1px solid var(--line)}
.hug-scope.hug-brand-zar .claims li:last-child{border-bottom:0}
.hug-scope.hug-brand-zar .claims li::before{content:""; position:absolute; inset-inline-start:0; top:19px; width:11px; height:2px;
  background:var(--rail); border-radius:2px}
.hug-scope.hug-brand-zar .claims b{color:var(--ink-deep); font-weight:700}
.hug-scope.hug-brand-zar #faq{background:var(--brand-tint)}
.hug-scope.hug-brand-zar .qa{margin-top:28px; max-width:88ch}
.hug-scope.hug-brand-zar .qa details{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); margin-bottom:10px}
.hug-scope.hug-brand-zar .qa summary{cursor:pointer; list-style:none; padding:17px 20px; font-size:15.5px; font-weight:700;
  color:var(--ink-deep); display:flex; align-items:center; justify-content:space-between; gap:14px}
.hug-scope.hug-brand-zar .qa summary::-webkit-details-marker{display:none}
.hug-scope.hug-brand-zar .qa summary::after{content:""; width:9px; height:9px; border-inline-end:2px solid var(--brand-mid);
  border-block-end:2px solid var(--brand-mid); transform:rotate(45deg); flex:0 0 auto; margin-top:-4px;
  transition:transform var(--dur-fast) var(--ease-out)}
.hug-scope.hug-brand-zar .qa details[open] summary::after{transform:rotate(-135deg); margin-top:3px}
.hug-scope.hug-brand-zar .qa .ans{padding:0 20px 19px; font-size:15px; color:var(--ink-2); line-height:1.9}
.hug-scope.hug-brand-zar .qa .ans b{color:var(--ink-deep); font-weight:700}
.hug-scope.hug-brand-zar .qa .ans a{color:var(--accent-ink); border-bottom:1px solid rgba(180,83,9,.35)}
.hug-scope.hug-brand-zar .endband{background:var(--brand-deep); color:var(--on-dark); padding-block:66px}
.hug-scope.hug-brand-zar .endband .row{display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap}
.hug-scope.hug-brand-zar .endband h2{font-size:clamp(21px,2.6vw,30px); font-weight:800; color:#fff; max-width:22ch}
.hug-scope.hug-brand-zar .endband p{margin-top:11px; font-size:15px; color:var(--brand-on); max-width:52ch; line-height:1.8}
.hug-scope.hug-brand-zar .btns{display:flex; gap:12px; flex-wrap:wrap}
.hug-scope.hug-brand-zar .btn{display:inline-block; font-size:15px; font-weight:700; padding:13px 26px; border-radius:var(--r-btn);
  transition:background var(--dur-fast), color var(--dur-fast)}
.hug-scope.hug-brand-zar .btn-accent{background:var(--accent); color:#3A2A05}
.hug-scope.hug-brand-zar .btn-accent:hover{background:var(--accent-hi)}
.hug-scope.hug-brand-zar .btn-ghost{border:1px solid rgba(255,255,255,.34); color:#fff}
.hug-scope.hug-brand-zar .btn-ghost:hover{background:rgba(255,255,255,.10)}
.hug-scope.hug-brand-zar .skline + .skline{margin-top:34px; padding-top:30px; border-top:1px solid var(--line)}
.hug-scope.hug-brand-zar .skline > h3{font-size:18px; margin-bottom:4px}
.hug-scope.hug-brand-zar .skline .skmeta{font-size:13px; color:var(--muted); margin-bottom:16px; font-variant-numeric:tabular-nums}
.hug-scope.hug-brand-zar .skus{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:16px}
.hug-scope.hug-brand-zar .sku{margin:0}
.hug-scope.hug-brand-zar .sku figcaption{margin-top:9px; font-size:13px; line-height:1.55}
.hug-scope.hug-brand-zar .sku figcaption b{display:block; color:var(--ink); font-weight:600}
.hug-scope.hug-brand-zar .sku figcaption i{font-style:normal; display:block; color:var(--muted); font-size:12px;
  font-variant-numeric:tabular-nums; margin-top:2px}
.hug-scope.hug-brand-zar .hug-fig{display:block; width:100%; border-radius:9px; background:var(--surface-2); object-fit:cover}
.hug-scope.hug-brand-zar .hug-fig--empty{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; text-align:center; padding:12px 10px;
  background:repeating-linear-gradient(45deg,#E8ECF2,#E8ECF2 9px,#F1F4F8 9px,#F1F4F8 18px);
  border:1px dashed #C3CBD8; color:#6A7688; font-size:11.5px; line-height:1.5}
.hug-scope.hug-brand-zar .hug-fig--empty b{font-weight:600; color:#55637A}
.hug-scope.hug-brand-zar .hug-fig--empty small{color:#8A94A6; font-size:10.5px; font-variant-numeric:tabular-nums}
@media (max-width:520px){
.hug-scope.hug-brand-zar .skus{grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px}
}