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

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

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

.hug-scope.hug-brand-arko{--accent:#F59E1B; --accent-hi:#FFB84D; --accent-soft:#FEF6E9; --accent-btn:#F59E1B; --accent-ink:#B45309;
  --ink:#2E3D5C; --ink-soft:#41527A; --ink-deep:#22304A;
  --bg:#F7F8FA; --surface:#FFFFFF; --surface-2:#EEF1F5; --line:#E2E6EC; --line-2:#D6DCE5; --muted-2:#5F6672;
  --text:#22304A; --muted:#6B7280; --on-dark:#F3F6FA;
  --success:#16A34A; --success-bg:#EAF6EC;
  --r-card:12px; --r-btn:8px; --r-pill:999px;
  --shadow-md:0 8px 24px rgba(30,42,56,.10);
  --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; --gutter:24px; --measure:66ch;

  /* ---- BRAND TINT: تنها توکن‌هایی که در هر لندینگ برند عوض می‌شوند ----
     قاعده: رنگ برند فقط برای بند هیرو و لهجه‌های بسیار کوچک همان صفحه.
     CTA و همهٔ عناصر رابط از توکن‌های سیستم می‌آیند. دورو: خانوادهٔ زیتونی. */
  /* آرکو: قرمز — تنها رنگ برندی که در این پروژه حدس نیست.
     بستهٔ استوانه‌ای قرمز ۱۹۵۷ سند دارد؛ فقط تُنِ دقیقش بعد از «تولد دوبارهٔ ۲۰۲۵» باید تأیید شود. */
  --brand-deep:#8A1C24;   /* سفید روی آن ۹٫۲۴ · accent-hi روی آن ۵٫۳۸ */
  --brand-mid:#7E4448;    /* روی tint ۶٫۶۹ */
  --brand-tint:#FCF1F1;   /* accent-ink روی آن ۴٫۵۴ */
  --brand-on:#E9C7C9;     /* روی بند تیره ۵٫۹۳ */
  --brand-ink:#4A1418;}
@media (max-width:768px){
.hug-scope.hug-brand-arko{--pad-x:24px;}
}
.hug-scope.hug-brand-arko, .hug-scope.hug-brand-arko *{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
.hug-scope.hug-brand-arko{background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased}
.hug-scope.hug-brand-arko .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x)}
.hug-scope.hug-brand-arko section{padding-block:96px}
@media (max-width:768px){
.hug-scope.hug-brand-arko section{padding-block:60px}
}
.hug-scope.hug-brand-arko h1, .hug-scope.hug-brand-arko h2, .hug-scope.hug-brand-arko h3{line-height:1.15; color:var(--ink); font-weight:700}
.hug-scope.hug-brand-arko h2{font-size:clamp(25px,3vw,31px); font-weight:600}
.hug-scope.hug-brand-arko h3{font-size:20px; font-weight:600}
.hug-scope.hug-brand-arko .overline{color:var(--accent-ink); font-size:13px; font-weight:600; letter-spacing:.06em; margin-bottom:12px}
.hug-scope.hug-brand-arko .muted{color:var(--muted)}
.hug-scope.hug-brand-arko a{color:inherit; text-decoration:none}
.hug-scope.hug-brand-arko .sec-head{max-width:660px; margin-bottom:40px}
.hug-scope.hug-brand-arko .prose{max-width:var(--measure); color:var(--ink-soft)}
.hug-scope.hug-brand-arko .prose p + p{margin-top:16px}
.hug-scope.hug-brand-arko .prose a{color:var(--accent-ink); border-bottom:1px solid rgba(180,83,9,.32)}
.hug-scope.hug-brand-arko .prose a:hover{border-bottom-color:var(--accent-ink)}
.hug-scope.hug-brand-arko .prose b{color:var(--ink); font-weight:600}
.hug-scope.hug-brand-arko .assume{display:inline-block; font-size:11px; color:var(--accent-ink); background:var(--accent-soft); border-radius:var(--r-pill); padding:2px 9px; vertical-align:middle}
.hug-scope.hug-brand-arko .ph{background:repeating-linear-gradient(45deg,#E8ECF2,#E8ECF2 10px,#F1F4F8 10px,#F1F4F8 20px);
  border:1px dashed #C3CBD8; border-radius:var(--r-card); display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#78859A; font-size:13px; text-align:center; padding:16px}
.hug-scope.hug-brand-arko .ph small{display:block; color:#94A0B2; margin-top:4px}
.hug-scope.hug-brand-arko .ph.dark{background:repeating-linear-gradient(45deg,#9B2830,#9B2830 10px,#A63039 10px,#A63039 20px); border-color:rgba(255,255,255,.22); color:#e9c7c9}
.hug-scope.hug-brand-arko .ph.dark small{color:#d3aaad}
.hug-scope.hug-brand-arko .btn{display:inline-flex; align-items:center; gap:8px; height:44px; padding-inline:22px; border-radius:var(--r-btn);
  font-weight:500; font-size:15px; border:1px solid transparent; cursor:pointer; font-family:inherit;
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast)}
.hug-scope.hug-brand-arko .btn:focus-visible{outline:none; box-shadow:var(--focus)}
.hug-scope.hug-brand-arko .btn-accent{background:var(--accent-btn); color:var(--ink-deep); font-weight:600}
.hug-scope.hug-brand-arko .btn-accent:hover{transform:translateY(-1px); background:var(--accent-hi)}
.hug-scope.hug-brand-arko .btn-onBrand{background:transparent; border-color:rgba(255,255,255,.3); color:#fff}
.hug-scope.hug-brand-arko .btn-onBrand:hover{background:rgba(255,255,255,.09)}
.hug-scope.hug-brand-arko .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-arko .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
.hug-scope.hug-brand-arko .rv{opacity:1; transform:none; transition:none}
html{scroll-behavior:auto}
}
.hug-scope.hug-brand-arko :where(a,button,[tabindex]):focus-visible{outline:none; box-shadow:var(--focus); border-radius:var(--r-btn)}
.hug-scope.hug-brand-arko[id], .hug-scope.hug-brand-arko [id]{scroll-margin-top:88px}
.hug-scope.hug-brand-arko .bh{background:var(--brand-deep); color:#fff; padding-block:26px 0; overflow:hidden}
.hug-scope.hug-brand-arko .bh .crumb{font-size:13px; color:rgba(255,255,255,.55); margin-bottom:44px}
.hug-scope.hug-brand-arko .bh .crumb a:hover{color:#fff}
.hug-scope.hug-brand-arko .bh .crumb span{margin-inline:6px; color:rgba(255,255,255,.28)}
.hug-scope.hug-brand-arko .bh .grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; align-items:end}
.hug-scope.hug-brand-arko .bh .blogo{width:132px; height:52px; margin-bottom:26px; font-size:11px; padding:6px}
.hug-scope.hug-brand-arko .bh h1{color:#fff; font-size:clamp(30px,4.4vw,52px); letter-spacing:-.015em; max-width:15ch}
.hug-scope.hug-brand-arko .bh .tag{color:var(--brand-on); font-size:clamp(17px,1.9vw,20px); margin-top:18px; max-width:44ch}
.hug-scope.hug-brand-arko .bh .cta{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; padding-bottom:64px}
.hug-scope.hug-brand-arko .bh .visual .ph{aspect-ratio:4/3; margin-bottom:0; border-radius:var(--r-card) var(--r-card) 0 0; border-bottom:0}
@media (max-width:900px){
.hug-scope.hug-brand-arko .bh .grid{grid-template-columns:minmax(0,1fr); gap:28px; align-items:start}
.hug-scope.hug-brand-arko .bh .cta{padding-bottom:32px}
}
.hug-scope.hug-brand-arko .facts{background:var(--brand-tint); border-bottom:1px solid var(--line)}
.hug-scope.hug-brand-arko .facts .row{display:flex; flex-wrap:wrap; gap:0}
.hug-scope.hug-brand-arko .facts .f{flex:1 1 190px; padding:20px 24px; border-inline-start:1px solid rgba(138,28,36,.14)}
.hug-scope.hug-brand-arko .facts .f:first-child{border-inline-start:0; padding-inline-start:0}
.hug-scope.hug-brand-arko .facts dt{font-size:12px; color:var(--brand-mid); margin-bottom:5px}
.hug-scope.hug-brand-arko .facts dd{font-size:16px; font-weight:600; color:var(--brand-ink); font-variant-numeric:tabular-nums}
@media (max-width:768px){
.hug-scope.hug-brand-arko .facts .f{flex:1 1 50%; padding-inline:14px}
.hug-scope.hug-brand-arko .facts .f:nth-child(odd){border-inline-start:0; padding-inline-start:0}
}
.hug-scope.hug-brand-arko .story{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:60px; align-items:start}
.hug-scope.hug-brand-arko .story .side{position:sticky; top:104px}
@media (max-width:900px){
.hug-scope.hug-brand-arko .story{grid-template-columns:minmax(0,1fr); gap:26px}
.hug-scope.hug-brand-arko .story .side{position:static}
}
.hug-scope.hug-brand-arko .dot{position:absolute; width:34px; height:34px; border-radius:50%; border:2px solid #fff; background:var(--ink);
  color:#fff; font-size:14px; font-weight:600; display:grid; place-items:center; cursor:pointer;
  box-shadow:var(--shadow-md); transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast)}
.hug-scope.hug-brand-arko .dot:hover{transform:scale(1.12)}
.hug-scope.hug-brand-arko .dot.on{background:var(--accent); color:var(--ink-deep); transform:scale(1.12)}
.hug-scope.hug-brand-arko .dot:focus-visible{outline:none; box-shadow:var(--focus)}
@keyframes brand-arko-hsin{from{opacity:0; transform:translateY(6px)}
to{opacity:1; transform:none}}
.hug-scope.hug-brand-arko .faq{max-width:820px}
.hug-scope.hug-brand-arko .qa{border-bottom:1px solid var(--line)}
.hug-scope.hug-brand-arko .qa summary{list-style:none; cursor:pointer; padding:19px 0; font-size:17px; font-weight:600; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:16px}
.hug-scope.hug-brand-arko .qa summary::-webkit-details-marker{display:none}
.hug-scope.hug-brand-arko .qa summary:hover{color:var(--accent-ink)}
.hug-scope.hug-brand-arko .qa summary:focus-visible{outline:none; box-shadow:var(--focus); border-radius:var(--r-btn)}
.hug-scope.hug-brand-arko .qa .chev{flex:0 0 auto; width:18px; height:18px; stroke:var(--muted); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--dur-base) var(--ease-out)}
.hug-scope.hug-brand-arko .qa[open] .chev{transform:rotate(180deg)}
.hug-scope.hug-brand-arko .qa .ans{padding:0 0 22px; color:var(--ink-soft); max-width:var(--measure); font-size:16px}
.hug-scope.hug-brand-arko .qa .ans a{color:var(--accent-ink); border-bottom:1px solid rgba(180,83,9,.32)}
.hug-scope.hug-brand-arko .buy{background:var(--brand-deep); color:#fff; padding-block:80px}
.hug-scope.hug-brand-arko .buy h2{color:#fff}
.hug-scope.hug-brand-arko .buy .grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:0; margin-top:36px}
.hug-scope.hug-brand-arko .buy .b{padding:4px 26px 4px 0; border-inline-start:1px solid rgba(255,255,255,.16)}
.hug-scope.hug-brand-arko .buy .b:first-child{border-inline-start:0; padding-inline-end:26px}
.hug-scope.hug-brand-arko .buy .b:not(:first-child){padding-inline-start:26px}
.hug-scope.hug-brand-arko .buy .b h3{color:#fff; font-size:17px; margin-bottom:8px}
.hug-scope.hug-brand-arko .buy .b p{color:var(--brand-on); font-size:14.5px; margin-bottom:16px}
.hug-scope.hug-brand-arko .buy .b .lnk{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:500; color:var(--accent-hi)}
@media (max-width:860px){
.hug-scope.hug-brand-arko .buy .grid{grid-template-columns:minmax(0,1fr); gap:26px}
.hug-scope.hug-brand-arko .buy .b{border-inline-start:0; padding:0; border-top:1px solid rgba(255,255,255,.16); padding-top:22px}
.hug-scope.hug-brand-arko .buy .b:first-child{border-top:0; padding-top:0; padding-inline-end:0}
.hug-scope.hug-brand-arko .buy .b:not(:first-child){padding-inline-start:0}
}
.hug-scope.hug-brand-arko .tl{margin-top:12px}
.hug-scope.hug-brand-arko .tlwrap{position:relative; padding:150px 0 12px}
.hug-scope.hug-brand-arko .tlrail{position:relative; height:3px; border-radius:2px; background:#B8C2D1}
.hug-scope.hug-brand-arko .tlrail::before{content:""; position:absolute; inset-block:0; inset-inline-start:51.47%; width:22.06%;
  background:var(--brand-deep); border-radius:2px}
.hug-scope.hug-brand-arko .tlp{position:absolute; top:0; transform:translateX(calc(var(--hug-dx,1) * 50%))}
.hug-scope.hug-brand-arko .tlp .stem{position:absolute; left:50%; width:1px; background:#C7CFDB; transform:translateX(-50%)}
.hug-scope.hug-brand-arko .tlp .dot{position:absolute; left:50%; top:-6px; width:13px; height:13px; border-radius:50%; border:2.5px solid #fff;
  transform:translateX(-50%); box-shadow:0 1px 4px rgba(30,42,56,.22)}
.hug-scope.hug-brand-arko .tlp .lab{position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap; text-align:center}
.hug-scope.hug-brand-arko .tlp .lab b{display:block; font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.4}
.hug-scope.hug-brand-arko .tlp .lab i{font-style:normal; display:block; font-size:11.5px; color:var(--muted); margin-top:1px}
.hug-scope.hug-brand-arko .tlp.pre .dot{background:var(--brand-deep)}
.hug-scope.hug-brand-arko .tlp.pre .lab b{color:var(--brand-ink)}
.hug-scope.hug-brand-arko .tlp.blade .dot{background:var(--ink)}
.hug-scope.hug-brand-arko tlp.post .dot{background:var(--brand-mid)}
.hug-scope.hug-brand-arko .tlp.mark .dot{background:#fff; border:3px solid var(--brand-deep); width:15px; height:15px; top:-7px}
.hug-scope.hug-brand-arko .tlp.mark .lab b{color:var(--brand-deep)}
.hug-scope.hug-brand-arko .tlp.h1 .stem{top:-42px; height:42px}
.hug-scope.hug-brand-arko .tlp.h1 .lab{bottom:calc(100% + 44px)}
.hug-scope.hug-brand-arko .tlp.h2 .stem{top:-96px; height:96px}
.hug-scope.hug-brand-arko .tlp.h2 .lab{bottom:calc(100% + 98px)}
.hug-scope.hug-brand-arko .tlp.dn .stem{top:6px; height:32px}
.hug-scope.hug-brand-arko .tlp.dn .lab{top:calc(100% + 36px)}
.hug-scope.hug-brand-arko .tlp.dn2 .stem{top:6px; height:86px}
.hug-scope.hug-brand-arko .tlp.dn2 .lab{top:calc(100% + 90px)}
.hug-scope.hug-brand-arko .brk{position:absolute; top:calc(100% + 132px); height:auto; border-top:1px solid var(--line-2);
  padding-top:9px; text-align:center; font-size:12.5px; color:var(--muted-2,#5F6672); line-height:1.6; direction:rtl}
.hug-scope.hug-brand-arko .brk::before, .hug-scope.hug-brand-arko .brk::after{content:""; position:absolute; top:0; width:1px; height:8px; background:var(--line-2)}
.hug-scope.hug-brand-arko .brk::before{inset-inline-start:0}
.hug-scope.hug-brand-arko .brk::after{inset-inline-end:0}
.hug-scope.hug-brand-arko .brk b{display:block; color:var(--ink); font-weight:600; font-size:13.5px}
.hug-scope.hug-brand-arko .tlkey{display:flex; gap:20px; flex-wrap:wrap; font-size:12.5px; color:var(--muted-2)}
.hug-scope.hug-brand-arko .tlkey span{display:inline-flex; align-items:center; gap:7px}
.hug-scope.hug-brand-arko .tlkey i{width:11px; height:11px; border-radius:50%; display:inline-block}
@media (max-width:900px){
.hug-scope.hug-brand-arko .tlkey{display:none}
}
.hug-scope.hug-brand-arko .tlnote{margin-top:214px; font-size:15px; color:var(--ink-soft); line-height:1.9; max-width:70ch;
  border-inline-start:2px solid var(--brand-deep); padding-inline-start:16px}
.hug-scope.hug-brand-arko .tlnote b{color:var(--ink); font-weight:600}
.hug-scope.hug-brand-arko .tlm{display:none}
@media (max-width:900px){
.hug-scope.hug-brand-arko .tlwrap{display:none}
.hug-scope.hug-brand-arko .tlnote{margin-top:26px}
.hug-scope.hug-brand-arko .tlm{display:grid; gap:0; margin-top:8px}
.hug-scope.hug-brand-arko .tlm div{display:grid; grid-template-columns:62px minmax(0,1fr); gap:14px; padding:13px 0; border-top:1px solid var(--line); align-items:baseline}
.hug-scope.hug-brand-arko .tlm div:first-child{border-top:0}
.hug-scope.hug-brand-arko .tlm i{font-style:normal; font-size:14px; font-weight:700; color:var(--brand-deep); font-variant-numeric:tabular-nums}
.hug-scope.hug-brand-arko .tlm b{font-size:15px; font-weight:600; color:var(--ink)}
.hug-scope.hug-brand-arko .tlm b s{text-decoration:none; display:block; font-size:12.5px; font-weight:500; color:var(--muted); margin-top:2px}
.hug-scope.hug-brand-arko .tlm div.gap{grid-template-columns:minmax(0,1fr); background:var(--brand-tint); padding:11px 14px; border-radius:var(--r-btn); margin-block:6px}
.hug-scope.hug-brand-arko .tlm div.gap b{font-size:13.5px; color:var(--brand-ink)}
}
.hug-scope.hug-brand-arko .rit{background:var(--brand-tint); border-block:1px solid var(--line)}
.hug-scope.hug-brand-arko .rtabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px}
.hug-scope.hug-brand-arko .rtabs button{font-family:inherit; font-size:14.5px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:10px 20px; cursor:pointer; color:var(--ink-soft); display:inline-flex; align-items:center; gap:9px;
  transition:background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast)}
.hug-scope.hug-brand-arko .rtabs button em{font-style:normal; width:20px; height:20px; border-radius:50%; background:var(--surface-2); color:var(--muted); font-size:11px; font-weight:700; display:grid; place-items:center}
.hug-scope.hug-brand-arko .rtabs button:hover{border-color:var(--brand-mid); color:var(--brand-ink)}
.hug-scope.hug-brand-arko .rtabs button[aria-selected="true"]{background:var(--brand-deep); border-color:var(--brand-deep); color:#fff}
.hug-scope.hug-brand-arko .rtabs button[aria-selected="true"] em{background:rgba(255,255,255,.2); color:#fff}
.hug-scope.hug-brand-arko .rpane{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:30px 32px}
.hug-scope.hug-brand-arko .rpane + .rpane{margin-top:20px}
.hug-scope.hug-brand-arko .rpane .skin{background:var(--brand-tint); border-radius:var(--r-btn); padding:15px 18px; margin-bottom:24px;
  font-size:14.5px; color:var(--brand-ink); line-height:1.85; max-width:76ch}
.hug-scope.hug-brand-arko .rpane .skin b{font-weight:600}
.hug-scope.hug-brand-arko .rgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px}
.hug-scope.hug-brand-arko .rc{border:1px solid var(--line); border-radius:var(--r-btn); padding:17px 19px; background:var(--surface)}
.hug-scope.hug-brand-arko .rc h4{font-size:15.5px; font-weight:600; color:var(--ink); margin-bottom:4px}
.hug-scope.hug-brand-arko .rc .yr{font-size:11.5px; color:var(--brand-mid); font-weight:600; margin-bottom:8px; display:block}
.hug-scope.hug-brand-arko .rc p{font-size:13.5px; color:var(--ink-soft); line-height:1.8}
.hug-scope.hug-brand-arko .rc .who{margin-top:11px; padding-top:10px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-soft); line-height:1.75}
.hug-scope.hug-brand-arko .rc .who b{color:var(--brand-ink); font-weight:600; display:block; font-size:11.5px; margin-bottom:3px}
@media (max-width:520px){
.hug-scope.hug-brand-arko .rgrid{grid-template-columns:minmax(0,1fr)}
.hug-scope.hug-brand-arko .rpane{padding:22px 18px}
}
.hug-scope.hug-brand-arko .rtabs{display:none}
.hug-scope.hug-brand-arko .rjs .rtabs{display:flex}
.hug-scope.hug-brand-arko .rjs .rpane{display:none; margin-top:0}
.hug-scope.hug-brand-arko .rjs .rpane.on{display:block; animation:brand-arko-rin var(--dur-base) var(--ease-out)}
@keyframes brand-arko-rin{from{opacity:0; transform:translateY(6px)}
to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
.hug-scope.hug-brand-arko .rjs .rpane.on{animation:none}
}
.hug-scope.hug-brand-arko .rpane > h3{font-size:19px; margin-bottom:6px}
.hug-scope.hug-brand-arko .rpane > .sub{font-size:13.5px; color:var(--muted); margin-bottom:20px}
.hug-scope.hug-brand-arko .rangebox{margin-top:34px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:30px 30px 26px}
.hug-scope.hug-brand-arko .rangebox > h3{font-size:20px; line-height:1.5; margin-bottom:10px}
.hug-scope.hug-brand-arko .rangebox > p{font-size:15px; line-height:1.85; color:var(--muted); max-width:70ch}
.hug-scope.hug-brand-arko .rangebox > p b{color:var(--ink); font-weight:700}
.hug-scope.hug-brand-arko .tblwrap{overflow-x:auto; margin:20px 0 4px; border:1px solid var(--line); border-radius:10px}
.hug-scope.hug-brand-arko table.range{width:100%; border-collapse:collapse; font-size:14px; min-width:640px}
.hug-scope.hug-brand-arko table.range th{background:var(--surface-2); text-align:start; font-size:12.5px; font-weight:700;
  color:var(--muted); padding:12px 16px; border-bottom:1px solid var(--line); white-space:nowrap}
.hug-scope.hug-brand-arko table.range td{padding:13px 16px; border-bottom:1px solid var(--line); line-height:1.7; vertical-align:top}
.hug-scope.hug-brand-arko table.range tbody tr:last-child td{border-bottom:0}
.hug-scope.hug-brand-arko table.range td.n{font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink); white-space:nowrap}
.hug-scope.hug-brand-arko table.range td:last-child{color:var(--muted)}
.hug-scope.hug-brand-arko .rangebox .note{margin-top:16px; font-size:14px; line-height:1.9; color:var(--muted); max-width:76ch}
.hug-scope.hug-brand-arko .rangebox .note b{color:var(--ink)}
.hug-scope.hug-brand-arko .rangebox .note i{font-style:normal; border-bottom:1.5px solid var(--accent); padding-bottom:1px}
@media (max-width:640px){
.hug-scope.hug-brand-arko .rangebox{padding:22px 18px 20px}
}
.hug-scope.hug-brand-arko .skline + .skline{margin-top:34px; padding-top:30px; border-top:1px solid var(--line)}
.hug-scope.hug-brand-arko .skline > h3{font-size:18px; margin-bottom:4px}
.hug-scope.hug-brand-arko .skline .skmeta{font-size:13px; color:var(--muted); margin-bottom:16px; font-variant-numeric:tabular-nums}
.hug-scope.hug-brand-arko .skus{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:16px}
.hug-scope.hug-brand-arko .sku{margin:0}
.hug-scope.hug-brand-arko .sku figcaption{margin-top:9px; font-size:13px; line-height:1.55}
.hug-scope.hug-brand-arko .sku figcaption b{display:block; color:var(--ink); font-weight:600}
.hug-scope.hug-brand-arko .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-arko .hug-fig{display:block; width:100%; border-radius:9px; background:var(--surface-2); object-fit:cover}
.hug-scope.hug-brand-arko .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-arko .hug-fig--empty b{font-weight:600; color:#55637A}
.hug-scope.hug-brand-arko .hug-fig--empty small{color:#8A94A6; font-size:10.5px; font-variant-numeric:tabular-nums}
@media (max-width:520px){
.hug-scope.hug-brand-arko .skus{grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px}
}