/* استایل مشترک صفحه‌های لوند. از index.html استخراج شده. */
:root{font-family:Vazirmatn,Tahoma,sans-serif}
body{font-family:Vazirmatn,Tahoma,sans-serif}
.logo b{font-family:Georgia,serif}
/* sprite tiles from products-grid.png (3x3) */
.tile{background-image:url('../img/products-grid.png');background-size:300% 300%;background-repeat:no-repeat;background-color:#f7e3df}
.t00{background-position:0 0}.t01{background-position:50% 0}.t02{background-position:100% 0}
.t10{background-position:0 50%}.t11{background-position:50% 50%}.t12{background-position:100% 50%}
.t20{background-position:0 100%}.t21{background-position:50% 100%}.t22{background-position:100% 100%}
/* ریل تک‌سطری «منتخب لوند» */
.head-tools{display:flex;align-items:center;gap:12px;flex-shrink:0}
.sl-track>.product{scroll-snap-align:start;flex:0 0 calc((100% - 66px)/4);min-width:0}
@media(max-width:1000px){.sl-track>.product{flex-basis:calc((100% - 44px)/3)}}
@media(max-width:760px){.sl-track>.product{flex-basis:calc((100% - 22px)/2)}}
@media(max-width:480px){.sl-track>.product{flex-basis:78%}.head-tools{gap:8px}.head-tools .btn{padding:9px 14px;font-size:12px}}
/* ===== مجله: چهار ستون ===== */
.journal{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.jr-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(184,24,89,.05),0 6px 16px rgba(184,24,89,.07);transition:border-color .2s,box-shadow .2s,transform .2s}
.jr-card:hover{border-color:#f6c4d9;box-shadow:0 4px 9px rgba(184,24,89,.09),0 18px 36px rgba(184,24,89,.16);transform:translateY(-5px)}
.jr-media{position:relative;display:block;aspect-ratio:16/11;background:linear-gradient(158deg,#fffafc,#fbe4ee);overflow:hidden}
.jr-media .tile{position:absolute;inset:0;display:block;transition:transform .3s}
.jr-card:hover .jr-media .tile{transform:scale(1.06)}
.jr-cat{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.94);color:var(--pink);font-size:11px;border-radius:20px;padding:4px 12px;box-shadow:0 3px 10px rgba(184,24,89,.16)}
.jr-body{display:flex;flex-direction:column;gap:7px;flex:1;padding:16px 18px 16px}
.jr-body h3{font-size:15.5px;font-weight:600;line-height:1.85;margin:0}
.jr-body h3 a{display:block}
.jr-card:hover .jr-body h3 a{color:var(--pink)}
.jr-body p{font-size:12.5px;color:var(--muted);line-height:1.95;margin:0}
.jr-meta{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--muted)}
.jr-go{color:var(--pink)}
@media(max-width:1000px){.journal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.journal{grid-template-columns:1fr}}
/* ===== نوار خدمات ===== */
.svc-ic{font-size:26px;line-height:1}
/* ===== باشگاه لوند ===== */
.club-band{position:relative;z-index:2;display:grid;grid-template-columns:1.4fr .9fr;align-items:center;gap:34px;border-radius:22px;overflow:hidden;padding:38px 40px;color:#fff;background:linear-gradient(135deg,#5d0f34 0%,#b81859 42%,#e92878 72%,#ff9d86 130%);box-shadow:0 26px 60px rgba(60,8,34,.32)}
.club-art{position:absolute;inset:0;pointer-events:none}
.cl-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.22)}
.cl-ring{left:-90px;top:-120px;width:330px;height:330px;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 62%)}
.cl-ring2{left:60px;top:40px;width:210px;height:210px;background:none}
.club-copy{position:relative;z-index:1}
.club-badge{display:inline-block;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.38);border-radius:30px;padding:5px 14px;font-size:12px;margin-bottom:14px}
.club-copy h2{font-size:30px;line-height:1.6;margin:0 0 10px;color:#fff}
.club-copy h2 em{font-style:normal;color:#ffe0d6}
.club-copy>p{font-size:14px;line-height:2;color:rgba(255,255,255,.92);margin:0 0 16px;max-width:460px}
.club-perks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px 24px}
.club-perks li{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.95)}
.club-perks span{color:#ffd9c7}
/* پنل شیشه‌ای سمت چپ: فرم عضویت را از متن جدا می‌کند و به آن وزن می‌دهد. */
.club-action{position:relative;z-index:1;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);border-radius:16px;padding:22px}
.club-form{display:flex;flex-direction:column;gap:11px}
.club-form label{font-size:12.5px;color:rgba(255,255,255,.9)}
.club-form input{width:100%;border:0;border-radius:10px;padding:13px 16px;font-size:14px;background:rgba(255,255,255,.97);color:var(--ink);direction:ltr;text-align:right}
.club-form input::placeholder{color:#b99aa8}
.club-form .btn{border-radius:10px;padding:13px 24px;width:100%;justify-content:center}
.club-note{display:block;margin-top:14px;font-size:11px;color:rgba(255,255,255,.78);line-height:1.9}
@media(max-width:900px){.club-band{grid-template-columns:1fr;gap:22px}}
/* ── باشگاه روی گوشی ──
*
* اندازه‌گیری در ۳۹۰: کل بخش ۶۰۲ پیکسل بود، یعنی ۷۷ درصد یک
* صفحهٔ کامل — در هر صفحهٔ سایت، چون این باند در فوتر است. روی
* دسکتاپ ۳۷۵ است و مشکلی ندارد؛ ایراد فقط از ستونی‌شدن است.
*
* چه رفت و چرا:
* • پاراگراف معرفی: همان چیزی را می‌گوید که سه مزیت زیرش دقیق‌تر
* می‌گویند. از HTML حذف نشده، فقط روی گوشی دیده نمی‌شود.
* • برچسب فیلد: placeholder همان جمله را دارد.
* • ورودی و دکمه کنار هم: یک ردیف به‌جای دو.
*
* چه ماند: نشان «عضویت رایگان»، عنوان، سه مزیت، فرم، و لینک
* «باشگاه چطور کار می‌کند» — آن لینک از هر صفحه به /club/ وصل
* می‌شود و برای جدی‌گرفتن آن صفحه توسط گوگل لازم است. */
@media(max-width:700px){
#club{padding-top:18px}
.club-band{padding:20px 17px;gap:15px;border-radius:18px}
.club-badge{margin-bottom:9px;padding:4px 12px;font-size:11.5px}
.club-copy h2{font-size:21px;line-height:1.5;margin-bottom:8px}
.club-copy>p{display:none}
.club-perks{gap:6px 14px}
.club-perks li{font-size:12.5px;gap:6px}
.club-more{display:inline-block;margin-top:10px;font-size:13px}
.club-action{padding:15px;border-radius:13px}
.club-form{flex-direction:row;align-items:stretch;gap:8px}
.club-form label{display:none}
.club-form input{flex:1;min-width:0;padding:11px 13px;font-size:13.5px}
.club-form .btn{width:auto;flex-shrink:0;padding:11px 16px;font-size:13px}
.club-note{margin-top:10px;font-size:10.5px;line-height:1.75}
}
/* ===== فوتر: هم‌زبان با هیرو ===== */
/* باند باشگاه ۸۸ پیکسل روی فوتر سوار می‌شود، پس فوتر همان اندازه
فضای بالا می‌گیرد تا محتوایش زیر باند نرود. */
#club{padding-bottom:0}
.club-band{margin-bottom:-88px}
.lv-footer{position:relative;overflow:hidden;color:rgba(255,255,255,.88);background:linear-gradient(165deg,#2e0a1d 0%,#5d0f34 46%,#8e1145 100%);padding-top:140px;border:0}
.foot-glow{position:absolute;left:-140px;top:-160px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(233,40,120,.38),transparent 64%);pointer-events:none}
.foot-top{position:relative;z-index:1;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:36px}
/* فایل لوگو پس‌زمینه‌ی کرمِ توکار دارد و شفاف نیست، پس روی فوتر تیره
عمداً داخل یک پلاک روشن می‌نشیند تا تمیز دیده شود. */
/* لوگوی بدون زمینه؛ سایه‌ی تیره برای برجستگی و هاله‌ی صورتی ملایم تا روی زمینه‌ی زرشکی گم نشود */
.foot-logo{position:relative;display:inline-block;margin-bottom:18px;isolation:isolate}
.foot-logo:before{content:"";position:absolute;inset:-26px -34px;z-index:-1;background:radial-gradient(closest-side,rgba(255,214,230,.30),rgba(255,214,230,.10) 55%,transparent);pointer-events:none}
.foot-logo img{display:block;width:240px;max-width:100%;height:auto;filter:brightness(1.18) drop-shadow(0 2px 2px rgba(20,0,10,.45)) drop-shadow(0 8px 14px rgba(20,0,10,.5))}
.foot-brand p{font-size:13px;line-height:2.1;color:rgba(255,255,255,.72);margin:0 0 18px;max-width:280px}
.foot-social{display:flex;gap:10px}
.foot-social a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;transition:background .18s,transform .18s,border-color .18s}
.foot-social a:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4);transform:translateY(-3px)}
.foot-social svg{width:19px;height:19px;stroke:none;fill:none;stroke-width:initial}
.foot-col h3,.foot-contact h3{font-size:14px;color:#fff;margin:0 0 14px}
.foot-col a{display:block;font-size:13px;line-height:1.9;margin:0 0 9px;color:rgba(255,255,255,.7);transition:color .16s}
.foot-col a:hover{color:#ffb9d1}
.foot-contact .fc-line{display:flex;gap:9px;font-size:12.5px;line-height:1.95;color:rgba(255,255,255,.72);margin:0 0 12px}
.foot-contact .fc-line span{flex-shrink:0;opacity:.8}
.foot-contact a{color:rgba(255,255,255,.88)}
.foot-contact a:hover{color:#ffb9d1}
/* اینماد و ساماندهی — جای‌نگهدار تا اسکریپت واقعی نصب شود. */
.foot-trust{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.trust-badges{display:flex;gap:12px;flex-wrap:wrap}
.tb{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.95);border-radius:12px;padding:10px 14px;min-width:210px;transition:transform .18s,box-shadow .18s}
.tb:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.24)}
.tb-ic{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;font-size:18px;color:#fff;background:linear-gradient(145deg,#ff74ab,#c31a63);flex-shrink:0}
.tb:last-child .tb-ic{background:linear-gradient(145deg,#8fb6ff,#3a63c4)}
.tb-tx b{display:block;font-size:12.5px;color:var(--ink);line-height:1.7}
.tb-tx small{display:block;font-size:11px;color:var(--muted)}
.pay-badges{display:flex;gap:9px;flex-wrap:wrap}
.pb{font-size:11.5px;color:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:6px 13px}
.foot-bottom{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 0 22px;font-size:12px;color:rgba(255,255,255,.6)}
.fb-mark{font-family:Georgia,serif;letter-spacing:2px;color:rgba(255,255,255,.4)}
@media(max-width:1000px){.foot-top{grid-template-columns:1fr 1fr 1fr;gap:28px}.foot-brand{grid-column:1/-1}}
@media(max-width:640px){.foot-top{grid-template-columns:1fr 1fr}.foot-trust{justify-content:flex-start}.tb{min-width:0;flex:1}}
@media(max-width:430px){.foot-top{grid-template-columns:1fr}}
/* کارت برند */
/* ریل برندها: شش کارت در یک نما، به‌جای سه ردیف گرید. */
.sl-track>.brand-card{scroll-snap-align:start;flex:0 0 calc((100% - 110px)/6)}
@media(max-width:1100px){.sl-track>.brand-card{flex-basis:calc((100% - 88px)/5)}}
@media(max-width:900px){.sl-track>.brand-card{flex-basis:calc((100% - 66px)/4)}}
@media(max-width:700px){.sl-track>.brand-card{flex-basis:calc((100% - 44px)/3)}}
@media(max-width:520px){.sl-track>.brand-card{flex-basis:44%;padding:18px 10px 16px}.bc-mark{width:46px;height:46px;font-size:15px}}
.brand-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:24px 14px 20px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(184,24,89,.05),0 6px 16px rgba(184,24,89,.07);transition:border-color .2s,box-shadow .2s,transform .2s}
/* نوار رنگی بالای کارت، فقط در هاور — همان لهجه‌ی بصری کارت‌های محصول. */
.brand-card:before{content:"";position:absolute;top:0;right:0;left:0;height:3px;background:linear-gradient(90deg,#ff8dba,#e92878);opacity:0;transition:opacity .2s}
.brand-card.derm:before{background:linear-gradient(90deg,#ffc0a6,#ef7a63)}
.brand-card:hover{border-color:#f6c4d9;box-shadow:0 4px 9px rgba(184,24,89,.09),0 18px 36px rgba(184,24,89,.16);transform:translateY(-5px)}
.brand-card.derm:hover{border-color:#f3cdba}
.brand-card:hover:before{opacity:1}
/* مونوگرام: همان دایره‌ی گرادیانی کاشی‌های مشکل پوست، در مقیاس کوچک‌تر. */
.bc-mark{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-family:Georgia,serif;font-weight:700;font-size:17px;letter-spacing:.5px;color:#b81859;background:linear-gradient(150deg,#fff7fb 0%,#fce0ec 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 12px rgba(184,24,89,.13);transition:background .22s,color .22s,transform .22s}
.brand-card.derm .bc-mark{color:#a2512f;background:linear-gradient(150deg,#fffaf6 0%,#fbe4d7 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 12px rgba(162,81,47,.13)}
.brand-card:hover .bc-mark{background:linear-gradient(150deg,#ff8dba 0%,#e92878 100%);color:#fff;transform:scale(1.06)}
.brand-card.derm:hover .bc-mark{background:linear-gradient(150deg,#ffb9a0 0%,#ef7a63 100%);color:#fff}
.bc-name{font-family:Georgia,serif;font-size:14.5px;letter-spacing:.3px;color:var(--ink);line-height:1.5}
.bc-fa{font-size:12px;color:var(--muted);line-height:1.6}
.bc-tag{margin-top:auto;padding-top:0;font-size:10.5px;border-radius:20px;padding:3px 11px;background:var(--pale);color:#a33a6e}
.brand-card.derm .bc-tag{background:#fdf1e9;color:#9c5230}
/* کارت پک روتین */
.routines{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rt-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(184,24,89,.05),0 6px 16px rgba(184,24,89,.07);transition:box-shadow .2s,border-color .2s,transform .2s}
.rt-card:hover{border-color:#f6c4d9;box-shadow:0 4px 9px rgba(184,24,89,.09),0 18px 36px rgba(184,24,89,.16);transform:translateY(-4px)}
/* سربرگ رنگی: هر پک گرادیان خودش را از داده می‌گیرد. */
.rt-top{position:relative;padding:20px 22px 0;color:#fff;overflow:hidden}
.rt-top:after{content:"";position:absolute;left:-55px;top:-80px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none}
.rt-top>*{position:relative;z-index:1}
.rt-badge{display:inline-block;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4);color:#fff;font-size:11.5px;border-radius:20px;padding:4px 12px}
.rt-top h3{font-size:18px;line-height:1.7;margin:12px 0 6px;color:#fff}
.rt-top p{font-size:12.5px;color:rgba(255,255,255,.9);line-height:1.9;margin:0;min-height:46px}
.rt-thumbs{display:flex;padding:14px 0 0;transform:translateY(16px)}
.rt-thumbs i{width:62px;height:62px;border-radius:50%;border:3px solid #fff;background-color:#fdeef3;background-size:300% 300%;box-shadow:0 5px 14px rgba(60,10,35,.22);flex-shrink:0}
.rt-thumbs i+i{margin-inline-start:-18px}
.rt-list{list-style:none;margin:0;padding:30px 22px 6px;display:grid;gap:12px}
.rt-list li{display:flex;gap:11px;align-items:flex-start}
.rt-num{width:22px;height:22px;border-radius:50%;background:var(--pale);color:var(--pink);font-size:11.5px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:3px}
.rt-list b{display:block;font-size:13.5px;font-weight:500;line-height:1.75}
.rt-list small{display:block;color:var(--muted);font-size:11.5px;line-height:1.8}
.rt-foot{margin-top:auto;padding:14px 22px 0;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rt-price b{font-size:17px;display:block}
.rt-price i{font-style:normal;font-size:11px;font-weight:400}
.rt-price del{font-size:12px;color:#a6949c}
.rt-save{background:#eef8f1;color:#1a7f37;font-size:11.5px;border-radius:20px;padding:4px 11px;white-space:nowrap}
.rt-cta{margin:14px 22px 18px;border-radius:10px;justify-content:center}
@media(max-width:1000px){.routines{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.routines{grid-template-columns:1fr;gap:16px}.rt-thumbs i{width:56px;height:56px}}
/* اسلایدر پرفروش‌ها */
.slider{position:relative;margin:0 -8px}
.sl-track{display:flex;gap:22px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:8px;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.sl-track::-webkit-scrollbar{display:none}
.sl-track:focus-visible{outline:3px solid #7e2350;outline-offset:2px;border-radius:14px}
.sl-track>.bs-card{scroll-snap-align:start;flex:0 0 calc((100% - 66px)/4)}
.sl-nav{display:flex;gap:9px;flex-shrink:0}
.sl-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:22px;line-height:1;display:grid;place-items:center;transition:background .16s,color .16s,border-color .16s,opacity .16s}
.sl-btn:hover:not(:disabled){background:var(--pink);color:#fff;border-color:var(--pink)}
.sl-btn:disabled{opacity:.3;cursor:default}
.sl-bar{height:3px;background:#f0dde5;border-radius:3px;margin-top:24px;overflow:hidden}
.sl-bar span{display:block;height:100%;width:30%;background:var(--pink);border-radius:3px;transition:transform .18s ease-out}
/* کارت پرفروش: مثل کارت عادی، به‌علاوه‌ی نشان رتبه */
.bs-card .product-image{aspect-ratio:1/1.05;background:linear-gradient(160deg,#fffafc,#fbe8f0)}
.bs-rank{position:absolute;top:12px;right:12px;z-index:2;min-width:30px;height:30px;padding:0 8px;border-radius:15px;background:rgba(255,255,255,.92);backdrop-filter:blur(4px);color:var(--pink);font-weight:700;font-size:14px;display:grid;place-items:center;box-shadow:0 3px 10px rgba(184,24,89,.16)}
.bs-card .tag{top:auto;bottom:12px;right:12px}
.bs-card h3{min-height:50px;font-size:15px}
@media(max-width:1000px){.sl-track>.bs-card{flex-basis:calc((100% - 44px)/3)}}
@media(max-width:760px){.sl-track>.bs-card{flex-basis:calc((100% - 22px)/2)}.sl-track{gap:16px}}
@media(max-width:480px){.sl-track>.bs-card{flex-basis:78%}.sl-btn{width:38px;height:38px;font-size:19px}}
@media(prefers-reduced-motion:reduce){.sl-track{scroll-behavior:auto}.sl-bar span{transition:none}}
/* وضعیت موجودی روی کارت محصول */
.p-state{font-size:11.5px;margin-top:6px;display:inline-flex;align-items:center;gap:5px}
.p-state:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st-in{color:#1a7f37}.st-partner{color:#b26a00}.st-out{color:#a6949c}
.pd-badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 4px}
.pd-exp,.pd-vol{font-size:12px;background:var(--pale);color:#8d3760;border-radius:20px;padding:3px 11px}
.pd-guarantee{font-size:12.5px;color:#1a7f37;background:#eef8f1;border-radius:10px;padding:10px 14px;margin:14px 0}
/* بنر «چرا لوند»: مُهر اصالت سمت چپ */
.trust-band{overflow:hidden}
.trust-copy{position:relative;z-index:1;max-width:56%}
.trust-band>.trust-art{position:absolute;left:4%;top:50%;transform:translateY(-50%);width:288px;height:288px;display:grid;place-items:center;z-index:0}
.ta-glow{position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.3) 0%,rgba(255,255,255,.08) 45%,transparent 66%)}
.ta-seal{position:relative;width:232px;height:232px;display:grid;place-items:center}
.ta-spin{position:absolute;inset:0;width:100%;height:100%;animation:sealspin 24s linear infinite;transform-origin:center}
.ta-spin text{fill:#fff;font-family:Georgia,"Times New Roman",serif;font-size:15px;font-weight:700;letter-spacing:.6px;direction:ltr;paint-order:stroke;stroke:rgba(88,8,46,.5);stroke-width:2.4px;stroke-linejoin:round;filter:drop-shadow(0 1.5px 1.5px rgba(70,5,36,.5))}
.ta-core{width:86px;height:86px;border-radius:50%;background:rgba(255,255,255,.96);display:grid;place-items:center;box-shadow:0 12px 32px rgba(80,6,40,.34)}
.ta-core svg{width:42px;height:42px;fill:none;stroke:var(--pink);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.ta-chip{position:absolute;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.96);color:#8d3760;font-size:12px;border-radius:30px;padding:7px 14px;box-shadow:0 8px 22px rgba(80,6,40,.26);white-space:nowrap}
.ta-chip i{width:7px;height:7px;border-radius:50%;background:#1a7f37;flex-shrink:0}
.ta-chip-1{top:6%;left:-4%}
.ta-chip-2{bottom:8%;right:-8%}
@media(prefers-reduced-motion:reduce){.ta-spin{animation:none}}
@media(max-width:1000px){.trust-band>.trust-art{width:228px;height:228px;left:1%}.ta-seal{width:186px;height:186px}.ta-core{width:72px;height:72px}.ta-core svg{width:34px;height:34px}.trust-copy{max-width:62%}}
/* روی موبایل مهر پشت متن می‌رود و کم‌رنگ می‌شود تا شلوغ نشود. */
@media(max-width:820px){.trust-copy{max-width:100%}.trust-band>.trust-art{left:auto;right:-46px;top:auto;bottom:-46px;transform:none;width:190px;height:190px;opacity:.22}.ta-chip{display:none}}
/* بنر اعتماد */
.trust-band{background:linear-gradient(115deg,#a81252,#e92878 60%,#ff9d86)}
.trust-points{display:flex;gap:30px;flex-wrap:wrap;margin-top:26px}
.trust-points span{display:block}
.trust-points b{display:block;font-size:16px}
.trust-points small{font-size:12px;color:#ffdcea}
@media(max-width:1000px){.routines{grid-template-columns:repeat(3,1fr)}.brand-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){.routines{grid-template-columns:repeat(2,1fr)}.brand-grid{grid-template-columns:repeat(3,1fr)}.trust-points{gap:18px}}
@media(max-width:430px){.routines{grid-template-columns:1fr}.brand-grid{grid-template-columns:repeat(2,1fr)}}
/* مودال مشاوره و سفارش */
/* ارتفاع باید به اندازه‌ی محتوا باشد، نه ثابت. specificity بالاتر لازم است
چون .sheet پایین‌تر در صفحه تعریف شده و گرنه بر .cs-sheet غالب می‌شود. */
.ov .sheet.cs-sheet{width:min(470px,92vw);height:auto;max-height:90vh;overflow-y:auto;border-radius:22px}
@media(max-width:559px){.ov .sheet.cs-sheet{width:100%;max-width:none;max-height:88vh;border-radius:22px 22px 0 0}}
.cs-sheet{width:min(470px,92vw);padding:0;overflow:hidden;border-radius:22px;background:#fff;box-shadow:0 30px 90px rgba(69,17,39,.32);animation:csIn .28s cubic-bezier(.2,.8,.3,1)}
@keyframes csIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cs-sheet{animation:none}}
.cs-head{position:relative;padding:30px 28px 26px;background:linear-gradient(135deg,#c31a63 0%,#e92878 55%,#ff9d86 130%);color:#fff;overflow:hidden}
.cs-head:after{content:"";position:absolute;left:-40px;top:-70px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.12)}
.cs-head>*{position:relative;z-index:1}
.cs-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);border-radius:30px;padding:5px 13px;font-size:12px;margin-bottom:14px}
.cs-badge i{width:7px;height:7px;border-radius:50%;background:#7bf0a8;box-shadow:0 0 0 3px rgba(123,240,168,.3);font-style:normal}
.cs-head h2{font-size:23px;margin:0 0 8px;color:#fff}
.cs-head p{margin:0;font-size:13.5px;line-height:2;color:rgba(255,255,255,.92);max-width:340px}
.cs-close{position:absolute;top:16px;left:16px;z-index:2;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:15px;display:grid;place-items:center}
.cs-close:hover{background:rgba(255,255,255,.32)}
.cs-body{padding:20px 22px 22px}
.cs-row{display:flex;align-items:center;gap:14px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:#fff;transition:border-color .16s,box-shadow .16s,transform .16s}
.cs-row:hover{border-color:#f6c4d9;box-shadow:0 8px 20px rgba(184,24,89,.1);transform:translateY(-2px)}
.cs-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.14)}
.cs-ic svg{width:23px;height:23px;stroke:none;fill:none;stroke-width:initial}
.cs-ic.wa{background:linear-gradient(145deg,#39d26a,#1da851)}
.cs-ic.ig{background:linear-gradient(45deg,#f09433,#dc2743 55%,#bc1888)}
.cs-ic.ph{background:linear-gradient(145deg,#ff74ab,#c31a63)}
.cs-txt{flex:1;min-width:0}
.cs-txt b{display:block;font-size:15px;line-height:1.9}
.cs-txt small{display:block;color:var(--muted);font-size:12px;line-height:1.8}
.cs-arrow{color:#d59ab4;font-size:17px;transition:transform .16s,color .16s}
.cs-row:hover .cs-arrow{color:var(--pink);transform:translateX(-4px)}
.cs-foot{margin-top:16px;padding-top:15px;border-top:1px solid var(--line);display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--muted);line-height:1.9}
.cs-foot span:first-child{color:var(--pink);font-size:14px}
@media(max-width:480px){.cs-head{padding:24px 20px 22px}.cs-head h2{font-size:20px}.cs-body{padding:16px 16px 18px}}
/* آیکون‌های سه‌بعدی نیاز پوستی. عکس واقعی اینجا جواب نمی‌دهد: تصویر جوش یا
لک روی سایت زیبایی دافعه می‌سازد و عکس استوکش هم کلیشه‌ای است. */
.lv-defs{position:absolute;width:0;height:0;overflow:hidden}
#concern-grid .circle{display:grid;place-items:center;background:linear-gradient(158deg,#fffafc 0%,#fdecf3 55%,#fadfeb 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 18px rgba(184,24,89,.09);transition:transform .25s,box-shadow .25s}
#concern-grid .category:nth-child(2n) .circle{background:linear-gradient(158deg,#fffbf9 0%,#fdeee6 55%,#fbe2d6 100%)}
#concern-grid .circle svg{width:70%;height:70%;fill:initial;stroke:none;stroke-width:initial;overflow:visible}
#concern-grid .category:hover .circle{transform:translateY(-6px);box-shadow:0 14px 28px rgba(184,24,89,.18)}
#concern-grid b{font-size:15px}
/* کاشی‌های نیاز پوستی: هفت‌تا هستند، پس گرید شش‌ستونه‌ی دسته‌ها جواب نمی‌دهد. */
#concern-grid{grid-template-columns:repeat(9,1fr);gap:14px}
#concern-grid .circle{height:112px;width:112px}
#concern-grid small{min-height:34px}
@media(max-width:1200px){#concern-grid{grid-template-columns:repeat(5,1fr);row-gap:28px}#concern-grid .circle{height:120px;width:120px}}
@media(max-width:800px){#concern-grid{grid-template-columns:repeat(3,1fr);row-gap:24px}#concern-grid .circle{height:104px;width:104px}}
/* ۹ نیاز = سه ستون در موبایل؛ دایره و متن کوچک‌تر تا در ۳۶۰ پیکسل هم جا شود */
@media(max-width:420px){#concern-grid{grid-template-columns:repeat(3,1fr);gap:10px 8px}#concern-grid .circle{height:88px;width:88px}#concern-grid b{font-size:13px}#concern-grid small{font-size:10.5px;line-height:1.7}}
/* hero */
.lv-hero{position:relative;min-height:clamp(780px,84vh,900px);display:flex;align-items:center;overflow:hidden;isolation:isolate}
.lv-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;z-index:-2}
/* ویدیوی هیرو روی عکس می‌نشیند و فقط وقتی واقعاً پخش شد محو می‌شود تو.
تا آن لحظه نامرئی است، پس اگر نیامد یا مرورگر پخشش نکرد، همان عکس
دیده می‌شود نه یک مستطیل سیاه. */
.lv-hero video.bg{opacity:0;transition:opacity .7s ease}
.lv-hero video.bg.on{opacity:1}
@media(prefers-reduced-motion:reduce){.lv-hero video.bg{display:none}}
.lv-hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}
.lv-hero .wrap{padding:70px 0}
.lv-hero-copy{max-width:560px;color:#fff}
.lv-pill{display:inline-flex;align-items:center;gap:12px;background:#ffffffdd;color:#8a2350;border-radius:40px;padding:9px 20px;font-size:15px;margin-bottom:24px}
.lv-pill span{font-size:19px;color:var(--pink)}
.lv-hero h1{font-size:clamp(34px,4.4vw,58px);line-height:1.5;letter-spacing:-1.4px;margin:0 0 18px;font-weight:800;text-shadow:0 2px 22px rgba(80,6,40,.5)}
.lv-hero h1 em{font-style:normal;color:#ffdccf}
.lv-hero p{font-size:17px;line-height:2;color:#fff;max-width:430px;margin:0 0 32px;text-shadow:0 1px 14px rgba(80,6,40,.55)}
.lv-hero .btn.white{background:#fff;color:var(--darkpink);border-color:#fff}
.lv-hero .btn.ghost{background:transparent;color:#fff;border:1px solid #ffffff88}
.lv-hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.lv-seal{position:absolute;left:30px;top:40px;width:92px;height:92px;border-radius:50%;z-index:2;
background:radial-gradient(circle,rgba(95,6,46,.66),rgba(45,3,22,.82));
box-shadow:0 10px 28px rgba(45,3,22,.5),inset 0 0 0 2px rgba(255,255,255,.42)}
.lv-seal .seal-spin{position:absolute;inset:0;width:100%;height:100%;animation:sealspin 16s linear infinite;transform-origin:center}
.lv-seal .seal-ring{stroke:rgba(255,255,255,.55);stroke-width:1}
.lv-seal .seal-spin text{fill:#fff;font-family:Vazirmatn,Georgia,sans-serif;font-size:14px;font-weight:800;letter-spacing:.6px;direction:ltr;paint-order:stroke;stroke:rgba(60,4,30,.45);stroke-width:1.6px;stroke-linejoin:round}
.lv-seal .seal-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;
background:linear-gradient(145deg,var(--pink),var(--peach));color:#fff;display:grid;place-items:center;font-size:23px;font-weight:800;box-shadow:0 4px 14px rgba(140,10,60,.5)}
@keyframes sealspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.lv-seal .seal-spin{animation:none}}
@media(max-width:800px){.lv-hero{align-items:flex-end;min-height:600px}.lv-hero .bg{object-position:36% 18%}.lv-hero .wrap{padding:24px 0 0;margin-top:auto;margin-bottom:24px}.lv-hero-copy{max-width:82%}.lv-hero h1{font-size:34px;text-shadow:0 2px 22px rgba(35,2,18,.9),0 1px 2px rgba(35,2,18,.6)}.lv-hero p{text-shadow:0 1px 16px rgba(35,2,18,.95),0 1px 2px rgba(35,2,18,.65)}.lv-hero::after{background:linear-gradient(180deg,transparent 48%,rgba(120,8,55,.4) 100%)}.lv-hero .btn.ghost{background:rgba(255,255,255,.15);border-color:#fff}.lv-seal{width:96px;height:96px;left:auto;right:14px;top:14px;bottom:auto}}
@media(max-width:540px){.lv-hero-copy{max-width:100%}.lv-hero p{max-width:300px}.lv-hero::after{background:linear-gradient(180deg,transparent 40%,rgba(110,8,52,.52) 100%)}.lv-seal{width:90px;height:90px;right:12px;top:12px}}
/* category circle uses tile */
.categories .circle.tile{background-color:#faeef0}
/* product image square + tile */
.product-image{aspect-ratio:1}
.product-image .tile{position:absolute;inset:0}
/* promo with tile */
.promo .tile{position:absolute;left:0;bottom:0;width:46%;height:100%;border-radius:0}
.promo>div{position:relative;z-index:1;max-width:56%}
/* AI advisor band reuse wide-banner */
/* Levand box */
/* AI FAB + sheet */
.fab{position:fixed;bottom:22px;left:22px;z-index:80;display:flex;align-items:center;gap:11px;padding:13px 22px 13px 15px;
border-radius:40px;background:var(--pink);color:#fff;font-size:14px;font-weight:600;box-shadow:0 14px 36px #b81c5c66;border:0}
.fab:hover{background:var(--darkpink)}
.fab .d{width:26px;height:26px;border-radius:50%;background:#ffffff33;display:grid;place-items:center;font-size:15px}
.ov{position:fixed;inset:0;z-index:90;background:#2c122b66;backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:440px;height:min(86vh,720px);background:#fff;border-radius:24px 24px 0 0;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -20px 80px #45112730;animation:up .3s}
@keyframes up{from{transform:translateY(40px)}to{transform:none}}
@media(min-width:560px){.ov{align-items:center;padding:20px}.sheet{border-radius:22px;height:min(82vh,700px)}}
.shd{padding:16px 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);background:#fff4f8}
.shd .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--peach));display:grid;place-items:center;color:#fff;font-size:20px}
.shd b{font-size:15px}.shd small{color:var(--pink);font-size:12px}
.shd .x{margin-inline-start:auto;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);font-size:15px}
.sb{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;background:#fffafc}
.msg{max-width:86%;padding:11px 15px;border-radius:16px;font-size:14px;line-height:1.8}
.msg.b{background:#fff;border:1px solid var(--line);align-self:flex-start;border-top-right-radius:5px}
.msg.u{background:var(--pink);color:#fff;align-self:flex-end;border-top-left-radius:5px}
.qc{display:flex;flex-wrap:wrap;gap:8px}
.qc button{background:#fff;border:1px solid #f0cfdd;color:var(--pink);border-radius:30px;padding:8px 15px;font-size:13px}
.qc button:hover{background:var(--pale)}
.rc{display:flex;gap:11px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:9px}
.rc .th{width:54px;height:54px;border-radius:11px;flex:none}
.rc .in{flex:1;min-width:0}.rc .in b{font-size:12.5px;display:block;line-height:1.5}
.rc .in .br{font-size:11px;color:var(--muted)}
.rc .pr{font-size:13px;font-weight:700;color:var(--pink)}
.rc .ad{align-self:center;background:var(--pink);color:#fff;border-radius:9px;padding:8px 12px;font-size:12px;font-weight:600;flex:none}
.sf{padding:12px;border-top:1px solid var(--line);display:flex;gap:9px;background:#fff}
.sf input{flex:1;border:1px solid var(--line);border-radius:30px;padding:12px 18px;font-size:14px;outline:0;font-family:inherit}
.sf input:focus{border-color:var(--pink)}
.sf .snd{width:46px;height:46px;border-radius:50%;background:var(--pink);color:#fff;font-size:17px;flex:none;border:0}
.typ{display:flex;gap:4px;padding:5px 2px}.typ i{width:7px;height:7px;border-radius:50%;background:#d9b6c5;animation:bl 1.2s infinite}
.typ i:nth-child(2){animation-delay:.2s}.typ i:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,60%,100%{opacity:.3}30%{opacity:1}}
/* ===== modern mega menu ===== */
header{position:sticky;top:0;z-index:40}
header .nav>nav{flex:1;min-width:0;display:flex;justify-content:center}
.lvmega-bar{display:flex;align-items:center;gap:clamp(8px,1.5vw,24px);list-style:none;margin:0;padding:0}
.lvmega-item{position:static}
.lvmega-trig,.lvmega-link{font:inherit;font-size:14px;font-weight:500;color:#4a2f3c;background:none;border:0;padding:20px 2px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;position:relative;text-decoration:none}
.lvmega-trig i{font-style:normal;font-size:10px;opacity:.55;transition:transform .22s}
.lvmega-trig:hover,.lvmega-link:hover,.lvmega-item.open .lvmega-trig{color:var(--pink)}
.lvmega-item.open .lvmega-trig i{transform:rotate(180deg)}
.lvmega-trig:after,.lvmega-link:after{content:'';position:absolute;bottom:13px;right:0;left:0;height:2px;background:var(--pink);border-radius:2px;transform:scaleX(0);transition:transform .22s}
.lvmega-item.open .lvmega-trig:after,.lvmega-link:hover:after{transform:scaleX(1)}
.lvmega-panel{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:2px solid var(--pink);border-radius:0 0 26px 26px;box-shadow:0 34px 60px -22px #4a123033;z-index:60;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .22s,transform .22s,visibility .22s;overflow:hidden}
.lvmega-item.open .lvmega-panel{opacity:1;visibility:visible;transform:none}
.lvmega-top,.lvmega-inner,.lvmega-brands{max-width:1180px;margin-inline:auto}
.lvmega-top{display:flex;align-items:center;gap:16px;padding:15px 30px;border-bottom:1px solid #f4e6ec}
.lvmega-top b{font-size:16px;color:var(--darkpink)}
.lvmega-search{margin-right:auto;border:1px solid #ecd7e0;border-radius:30px;padding:9px 16px;font:inherit;font-size:13px;width:min(280px,42%);background:#fffafc;outline-offset:2px}
.lvmega-inner{display:grid;grid-template-columns:1fr 288px;gap:32px;padding:26px 30px;max-height:min(68vh,540px);overflow:auto}
.lvmega-cols{display:grid;grid-template-columns:repeat(var(--lvcols,4),minmax(0,1fr));gap:22px 20px}
.lvmega-col h4{font-size:13px;font-weight:700;color:var(--darkpink);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid #f2e2e9}
.lvmega-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.lvmega-col a{display:block;font-size:12.5px;color:#5c4550;padding:6px 9px;border-radius:8px;transition:background .14s,color .14s,padding .14s}
.lvmega-col a:hover{background:#fff0f6;color:var(--pink);padding-right:14px}
.lvmega-feat{border-radius:18px;overflow:hidden;position:relative;display:flex;flex-direction:column;min-height:270px;border:1px solid #f4e0e9}
.lvmega-feat .m{flex:1;min-height:150px;background-color:#f7e3df}
.lvmega-feat .b{padding:18px 20px;background:linear-gradient(160deg,#fff,#fff3f8)}
.lvmega-feat span{font-size:11px;letter-spacing:1.5px;color:var(--pink);font-weight:600}
.lvmega-feat h5{font-size:17px;margin:6px 0 14px;color:var(--ink);line-height:1.5}
.lvmega-feat .btn{font-size:13px;padding:9px 20px}
.lvmega-brands{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:13px 30px;border-top:1px solid #f4e6ec;background:#fffafc}
.lvmega-brands>span{font-size:12px;color:var(--muted)}
.lvmega-brands a{font-size:12px;font-weight:600;color:#7a3a56;border:1px solid #ecd7e0;border-radius:20px;padding:5px 14px;letter-spacing:.05em;text-decoration:none;transition:.15s}
.lvmega-brands a:hover{background:var(--pink);color:#fff;border-color:var(--pink)}
/* Shared navigation palette and type. */
header nav .lvmega-inner{display:block}
header nav .lvmega-cols{grid-template-columns:repeat(var(--lvcols,4),minmax(0,1fr))}
header nav .lvmega-all{color:var(--darkpink);font-size:13px;font-weight:600;margin-inline-start:auto;text-underline-offset:4px}
header nav .lvmega-panel[hidden],#mobile-nav[hidden]{display:none!important}
header nav :is(button,a,input):focus-visible,#mobile-nav :is(a,summary):focus-visible{outline:2px solid var(--pink);outline-offset:3px}
#mobile-nav .mn-group>a{display:block;padding:8px 6px;color:#5c4550;font-size:13px;text-decoration:none}
#mobile-nav .mn-group>a.mn-all{color:var(--pink);font-weight:600;text-decoration:underline;text-underline-offset:4px}
@media(prefers-reduced-motion:reduce){header nav .lvmega-panel,header nav .lvmega-trig:after,header nav .lvmega-trig i{transition:none}}
@media(max-width:1200px){.lvmega-inner{grid-template-columns:1fr 240px;gap:22px}.lvmega-cols{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1100px){header .nav>nav{display:none}.mobile-menu{display:inline-flex!important}}
@media(min-width:1101px){#mobile-nav{display:none!important}.mobile-menu{display:none!important}}
#mobile-nav{max-height:80vh;overflow:auto;padding:6px 5% 20px}
#mobile-nav details{border-bottom:1px solid #f0dbe4}
#mobile-nav summary{cursor:pointer;padding:14px 6px;font-weight:600;color:#94204d;list-style:none;display:flex;justify-content:space-between;align-items:center}
#mobile-nav summary::-webkit-details-marker{display:none}
#mobile-nav summary:after{content:'+';font-size:20px;font-weight:400}
#mobile-nav details[open]>summary{color:var(--pink)}
#mobile-nav details[open]>summary:after{content:'−'}
#mobile-nav .mm{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:4px 6px 18px}
#mobile-nav .mm h4{font-size:12.5px;font-weight:700;color:var(--darkpink);margin:0 0 4px}
#mobile-nav .mm a{display:block;font-size:12.5px;color:#5c4550;padding:5px 2px;text-decoration:none}
#mobile-nav>a{display:block;padding:14px 6px;font-weight:600;color:#94204d;border-bottom:1px solid #f0dbe4;text-decoration:none}
/* ===== header scroll ===== */
header.scrolled{box-shadow:0 10px 34px -20px #45112750}
/* ===== cart drawer ===== */
.cart-ov{position:fixed;inset:0;z-index:95;background:#2c122b55;backdrop-filter:blur(3px);transition:opacity .2s}
.cart-dr{position:fixed;top:0;bottom:0;left:0;width:min(400px,92%);background:#fff;z-index:96;display:flex;flex-direction:column;box-shadow:24px 0 70px -20px #45112740;border-radius:0 22px 22px 0;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.cart-hd{display:flex;align-items:center;gap:10px;padding:20px 22px;border-bottom:1px solid var(--line)}
.cart-hd h3{font-size:18px;margin:0}
.cart-hd .x{margin-inline-start:auto;width:34px;height:34px;border-radius:50%;background:#f6e8f0;border:0;font-size:15px;cursor:pointer}
.cart-body{flex:1;overflow:auto;padding:8px 20px}
.cart-item{display:grid;grid-template-columns:60px 1fr auto;gap:13px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
.cart-item .th{width:60px;height:72px;border-radius:11px;background-color:var(--pale);background-size:300% 300%}
.cart-item b{font-size:13px;font-weight:600;display:block;line-height:1.6}
.cart-item .br{font-size:11px;color:var(--muted)}
.cart-item .pr{font-size:13px;font-weight:700;color:var(--pink);margin-top:5px}
.cart-item .rm{background:none;border:0;color:var(--muted);font-size:12px;cursor:pointer;margin-top:7px;padding:0}
.cart-item .rm:hover{color:var(--pink)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:22px;overflow:hidden}
.qty button{width:30px;height:30px;border:0;background:#fff;font-size:16px;color:var(--pink);cursor:pointer}
.qty span{min-width:26px;text-align:center;font-size:13px}
.cart-empty{text-align:center;color:var(--muted);padding:70px 20px}
.cart-empty .ic{font-size:44px;opacity:.5}
.cart-ft{border-top:1px solid var(--line);padding:18px 22px;background:#fffafc}
.cart-ft .row{display:flex;justify-content:space-between;align-items:baseline;font-size:14px}
.cart-ft .row b{font-size:19px}
.cart-ft .inst{font-size:12px;color:var(--pink);background:#fff0f6;border-radius:10px;padding:9px 13px;margin:12px 0;line-height:1.7}
/* ===== product modal ===== */
.pd-ov{position:fixed;inset:0;z-index:95;background:#2c122b66;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px}
.pd-card{width:min(880px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:24px;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 44px 100px -34px #45112755}
.pd-media{position:relative;background:linear-gradient(160deg,#fff0f5,#f7e3df);min-height:380px}
.pd-media .th{position:absolute;inset:0}
.pd-media .off{position:absolute;top:16px;right:16px;background:var(--pink);color:#fff;font-size:13px;padding:5px 14px;border-radius:20px}
.pd-info{padding:26px 30px;display:flex;flex-direction:column}
.pd-info .x{margin-inline-start:auto;width:34px;height:34px;border-radius:50%;background:#f6e8f0;border:0;font-size:15px;cursor:pointer}
.pd-info .brand{font-size:12px;letter-spacing:1px;color:var(--muted);direction:ltr}
.pd-info h2{font-size:23px;line-height:1.5;margin:6px 0 10px}
.pd-rate{color:#e6a02d;font-size:16px;letter-spacing:2px}
.pd-rate small{color:var(--muted);font-size:12px;letter-spacing:0}
.pd-tags{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0}
.pd-tags span{font-size:11.5px;background:#fff0f6;color:var(--pink);border:1px solid #f3d5e2;border-radius:20px;padding:5px 12px}
.pd-price{display:flex;align-items:baseline;gap:10px;margin:8px 0}
.pd-price b{font-size:26px;color:var(--pink)}
.pd-price del{color:var(--muted);font-size:15px}
.pd-inst{font-size:13px;color:#8d3760;background:var(--pale);border-radius:10px;padding:10px 14px;margin:12px 0}
.pd-buy{display:flex;gap:12px;align-items:center;margin-top:6px}
.pd-buy .btn{flex:1;border-radius:12px}
.pd-buy .icon-btn{width:46px;height:46px;border-radius:12px!important}
.pd-desc{font-size:13px;color:var(--muted);line-height:2.1;margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
@media(max-width:640px){.pd-card{grid-template-columns:1fr;max-width:420px}.pd-media{min-height:240px}}
/* wishlist badge + active heart */
/* آیکون مقایسه در هدر — همان ظاهر علاقه‌مندی، چون هم‌رده‌اند */
.wish-icon,.cmp-icon{position:relative}
.cmp-icon span{position:absolute;top:0;left:-3px;background:var(--pink);color:#fff;font-size:10px;min-width:16px;height:16px;line-height:16px;border-radius:50%;text-align:center;padding:0 3px}
.wish-icon span{position:absolute;top:0;left:-3px;background:var(--pink);color:#fff;font-size:10px;min-width:16px;height:16px;line-height:16px;border-radius:50%;text-align:center;padding:0 3px}
.icon-btn.wish.on span,.pd-buy .icon-btn.on span{color:var(--pink)}
.product .wish.on{color:var(--pink)}
/* ===== advanced search ===== */
.search-ov{position:fixed;inset:0;z-index:97;background:#2c122b40;backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:flex-start}
.search-box{width:100%;background:#fff;box-shadow:0 24px 60px -22px #45112740;border-radius:0 0 26px 26px;max-height:90vh;display:flex;flex-direction:column;animation:sdown .25s cubic-bezier(.2,.7,.3,1)}
@keyframes sdown{from{transform:translateY(-14px)}to{transform:none}}
.search-top{display:flex;align-items:center;gap:14px;padding:20px 26px;border-bottom:1px solid var(--line);max-width:880px;margin:auto;width:100%}
.search-top svg{width:22px;height:22px;color:var(--pink);flex:none;fill:none;stroke:currentColor;stroke-width:1.8}
.search-top input{flex:1;border:0;font:inherit;font-size:18px;outline:0;color:var(--ink);background:none}
.search-top button{width:36px;height:36px;border-radius:50%;background:#f6e8f0;border:0;font-size:15px;cursor:pointer;flex:none}
.search-res{overflow:auto;padding:16px 26px 30px;max-width:880px;margin:auto;width:100%}
.search-res h4{font-size:12px;color:var(--muted);letter-spacing:1px;margin:6px 0 12px}
.sr-prod{display:grid;grid-template-columns:54px 1fr auto;gap:13px;align-items:center;padding:9px 10px;border-radius:12px;cursor:pointer;text-decoration:none;color:inherit}
.sr-prod:hover{background:#fff0f6}
.sr-prod .th{width:54px;height:60px;border-radius:10px;background:var(--pale)}
.sr-prod b{font-size:13px;font-weight:600;display:block;line-height:1.6}
.sr-prod .br{font-size:11px;color:var(--muted)}
.sr-prod .pr{font-size:13px;font-weight:700;color:var(--pink);white-space:nowrap}
.sr-chips,.sr-cats{display:flex;flex-wrap:wrap;gap:9px}
.sr-chips button{font:inherit;font-size:13px;border:1px solid #ecd7e0;background:#fff;color:#7a3a56;border-radius:20px;padding:8px 15px;cursor:pointer}
.sr-chips button:hover{background:var(--pink);color:#fff;border-color:var(--pink)}
.sr-cats a{font-size:12.5px;background:#f6e8f0;color:#7a3a56;border-radius:8px;padding:6px 12px;text-decoration:none}
.sr-cats a:hover{background:var(--pink);color:#fff}
.sr-empty{text-align:center;color:var(--muted);padding:44px 20px}
/* ===== modern mobile menu (drill-down) ===== */
.mnav-ov{position:fixed;inset:0;z-index:97;background:#2c122b55;backdrop-filter:blur(3px)}
.mnav{position:fixed;top:0;bottom:0;right:0;width:min(410px,92%);background:#fff;z-index:98;display:flex;flex-direction:column;box-shadow:-24px 0 70px -20px #45112740;border-radius:22px 0 0 22px;overflow:hidden}
.mnav-hd{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.mnav-hd b{font-size:17px}
.mnav-hd .x{margin-inline-start:auto;width:34px;height:34px;border-radius:50%;background:#f6e8f0;border:0;font-size:15px;cursor:pointer}
.mnav-search{display:flex;align-items:center;gap:10px;margin:14px 20px;padding:12px 16px;border:1px solid var(--line);border-radius:30px;color:var(--muted);cursor:pointer;font-size:13px}
.mnav-search svg{width:18px;height:18px;color:var(--pink);fill:none;stroke:currentColor;stroke-width:1.8}
.mnav-scr{flex:1;position:relative;overflow:hidden}
.mnav-l1,.mnav-l2{position:absolute;inset:0;overflow:auto;transition:transform .3s cubic-bezier(.2,.7,.3,1);background:#fff}
.mnav.push .mnav-l1{transform:translateX(28%);visibility:hidden}
.mnav-l2{transform:translateX(-100%)}
.mnav.push .mnav-l2{transform:translateX(0)}
.mnav-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 22px;border-bottom:1px solid #f4e6ec;font-size:15px;font-weight:500;cursor:pointer;color:#3f2733;background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:start;font-family:inherit}
.mnav-row:hover{background:#fff7fb}
.mnav-row .c{color:var(--pink);font-size:20px;line-height:1}
.mnav-row.quick{color:#94204d;font-weight:600}
.mnav-back{display:flex;align-items:center;gap:8px;padding:15px 22px;border-bottom:1px solid var(--line);font-weight:700;color:var(--pink);cursor:pointer;background:#fffafc;width:100%;border:0;font-family:inherit;font-size:15px;text-align:start}
.mnav-l2 .grp{padding:16px 22px;border-bottom:1px solid #f4e6ec}
.mnav-l2 .grp h4{font-size:13px;color:var(--darkpink);margin:0 0 8px}
.mnav-l2 .grp a{display:inline-block;font-size:13px;color:#5c4550;padding:6px 14px 6px 0;text-decoration:none}
.mnav-l2 .grp a:hover{color:var(--pink)}
/* ===== صفحه‌ی فروشگاه ===== */
.pt-sub{font-size:13.5px;color:var(--muted);margin:8px 0 0}
.crumb a:hover{color:var(--pink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.f-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.f-head h2{font-size:16px;margin:0}
.f-reset{border:0;background:none;color:var(--pink);font-size:12px;padding:0}
.f-group{border-top:1px solid var(--line);padding:16px 0 4px}
.f-group h3{font-size:13.5px;margin:0 0 10px}
.f-opt{display:flex;align-items:center;gap:9px;margin:0 0 9px;font-size:13px;cursor:pointer}
.f-opt input{accent-color:var(--pink);margin:0;flex-shrink:0}
.f-opt span{flex:1;min-width:0}
.f-opt small{color:var(--muted);font-size:11px}
.f-opt:hover span{color:var(--pink)}
#f-price{width:100%;accent-color:var(--pink)}
.f-price-lbl{font-size:12.5px;color:var(--muted);margin:8px 0 0}
.shop-toolbar span b{color:var(--ink)}
.tb-right{display:flex;align-items:center;gap:10px}
.f-toggle{display:none}
.shop-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.s-chip{display:inline-flex;align-items:center;gap:7px;background:var(--pale);color:#8d3760;border:1px solid #f6d7e4;border-radius:20px;padding:5px 12px;font-size:12px}
.s-chip i{font-style:normal;color:var(--pink);font-size:11px}
.s-chip:hover{border-color:var(--pink)}
.s-chip.clear{background:none;border-style:dashed;color:var(--muted)}
.shop-empty{text-align:center;padding:50px 20px;border:1px dashed var(--line);border-radius:16px}
.shop-empty b{display:block;font-size:17px;margin-bottom:8px}
.shop-empty p{color:var(--muted);font-size:13.5px;margin:0 0 18px}
.shop-pager{display:flex;gap:8px;justify-content:center;margin-top:30px}
.pg{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;font-size:13px}
.pg:hover{border-color:var(--pink);color:var(--pink)}
.pg.on{background:var(--pink);color:#fff;border-color:var(--pink)}
@media(max-width:900px){
.shop-layout{grid-template-columns:1fr}
.f-toggle{display:inline-flex}
.filters{display:none}
.filters.open{display:block}
}
/* ===== صفحه‌ی محصول ===== */
.pdp-crumb{padding:18px 0 4px;font-size:12.5px;color:var(--muted)}
.pdp-crumb a:hover{color:var(--pink)}
.pdp-top{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:14px 0 34px}
.pdp-img{position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(158deg,#fffafc,#fbe4ee);aspect-ratio:1/1;display:block}
.pdp-img .tile{position:absolute;inset:0;display:block}
.pdp-thumbs{display:flex;gap:10px;margin-top:12px}
.pdp-th{width:72px;height:72px;border-radius:12px;background-color:#fdeef3;border:2px solid transparent;cursor:pointer;display:block}
.pdp-th.on{border-color:var(--pink)}
.pdp-brand{display:inline-block;font-size:12.5px;color:var(--muted);letter-spacing:.4px}
.pdp-brand:hover{color:var(--pink)}
.pdp-buy h1{font-size:27px;line-height:1.7;margin:6px 0 10px}
.pdp-lead{font-size:14px;line-height:2.1;color:var(--muted);margin:0 0 16px}
.pdp-badges{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:16px}
.pdp-chip{font-size:12px;background:var(--pale);color:#8d3760;border-radius:20px;padding:4px 12px}
.pdp-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pdp-price b{font-size:26px}
.pdp-price i{font-style:normal;font-size:13px;font-weight:400}
.pdp-price del{font-size:14px;color:#a6949c}
.pdp-actions{display:flex;gap:12px;align-items:center;margin:20px 0 8px;flex-wrap:wrap}
.pdp-add{flex:1;min-width:190px;border-radius:10px;justify-content:center;padding:14px 22px}
.wish.pdp-wish{position:static;width:46px;height:46px;flex-shrink:0}
.wish.pdp-wish svg{width:20px;height:20px}
.pdp-limit{font-size:12px;color:var(--muted);margin:0 0 18px}
.pdp-guarantee{display:grid;gap:9px;background:#f4fbf6;border:1px solid #d9eee0;border-radius:12px;padding:15px 17px}
.pdp-guarantee span{font-size:12.5px;color:#1a7f37;display:flex;gap:8px;line-height:1.85}
.pdp-guarantee span:before{content:"✓";flex-shrink:0}
.pdp-body{display:grid;grid-template-columns:1fr 300px;gap:40px;padding-bottom:34px;align-items:start}
.pdp-sec{padding:0 0 26px}
.pdp-sec h2{font-size:19px;margin:0 0 12px}
.pdp-sec p{font-size:14px;line-height:2.2;color:var(--muted);margin:0}
.pdp-ing{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.pdp-ing li{background:var(--pale);color:#8d3760;border-radius:20px;padding:7px 15px;font-size:13px}
.pdp-faq details{border:1px solid var(--line);border-radius:12px;padding:14px 17px;margin-bottom:10px;background:#fff}
.pdp-faq summary{cursor:pointer;font-weight:500;font-size:14px}
.pdp-faq details[open]{border-color:#f6c4d9}
.pdp-faq p{margin-top:10px;font-size:13.5px}
.pdp-reviews-empty{border:1px dashed var(--line);border-radius:14px;padding:26px;text-align:center}
.pdp-reviews-empty b{display:block;font-size:15px;margin-bottom:8px}
.pdp-reviews-empty p{font-size:13px;color:var(--muted);margin:0;line-height:2}
.pdp-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:16px;box-shadow:0 1px 2px rgba(184,24,89,.05),0 6px 16px rgba(184,24,89,.06)}
.pdp-card h3{font-size:15px;margin:0 0 14px}
.pdp-spec{margin:0}
.pdp-spec>div{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:8px 0;border-bottom:1px solid var(--line)}
.pdp-spec>div:last-child{border-bottom:0}
.pdp-spec dt{color:var(--muted);margin:0}
.pdp-spec dd{margin:0;text-align:left}
.pdp-tags{display:flex;flex-wrap:wrap;gap:8px}
.pdp-tags a{background:var(--pale);color:#8d3760;border-radius:20px;padding:6px 13px;font-size:12.5px}
.pdp-tags a:hover{background:var(--pink);color:#fff}
@media(max-width:900px){
.pdp-top{grid-template-columns:1fr;gap:24px}
.pdp-body{grid-template-columns:1fr;gap:22px}
.pdp-buy h1{font-size:22px}
.pdp-price b{font-size:22px}
}
/* ===== صفحه‌ی نیاز پوست و مو ===== */
.cn-top{background:linear-gradient(168deg,#fffafc 0%,#fdecf3 60%,#fbe1ec 100%);padding:16px 0 26px;border-bottom:1px solid var(--line)}
.cn-top .crumb{font-size:12.5px;color:var(--muted);margin-bottom:18px}
.cn-top .crumb a:hover{color:var(--pink)}
.cn-hero-copy{display:grid;grid-template-columns:96px 1fr;gap:22px;align-items:start;max-width:900px}
.cn-icon{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(158deg,#fff 0%,#fde3ee 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 22px rgba(184,24,89,.12)}
.cn-icon svg{width:68%;height:68%;fill:initial;stroke:none;stroke-width:initial;overflow:visible}
.cn-hero-copy h1{font-size:30px;line-height:1.6;margin:4px 0 12px}
.cn-hero-copy p{font-size:14.5px;line-height:2.2;color:#6b5a63;margin:0}
.cn-nav{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.cn-pill{background:#fff;border:1px solid var(--line);border-radius:30px;padding:7px 16px;font-size:13px;transition:.16s}
.cn-pill:hover{border-color:var(--pink);color:var(--pink)}
.cn-pill.on{background:var(--pink);border-color:var(--pink);color:#fff}
.cn-tier{margin-bottom:34px}
.cn-tier:last-child{margin-bottom:0}
.cn-tier-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cn-tier-head h3{font-size:17px;margin:0}
.cn-tier-head small{color:var(--muted);font-size:12.5px}
.cn-none{color:var(--muted);font-size:14px}
.cn-routine-card{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;border-radius:20px;padding:30px 34px;color:#fff;background:linear-gradient(135deg,#5d0f34 0%,#b81859 46%,#e92878 78%,#ff9d86 130%);box-shadow:0 18px 44px rgba(60,8,34,.22)}
.cn-routine-card .overline{color:#ffd9e6}
.cn-routine-card h2{font-size:23px;margin:6px 0 8px;color:#fff}
.cn-routine-card p{font-size:13.5px;line-height:2;color:rgba(255,255,255,.9);margin:0;max-width:460px}
.cn-guide-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.cn-guide-item{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:0 1px 2px rgba(184,24,89,.05),0 6px 16px rgba(184,24,89,.06)}
.cn-gn{width:28px;height:28px;border-radius:50%;background:var(--pale);color:var(--pink);font-weight:700;font-size:13px;display:grid;place-items:center;flex-shrink:0}
.cn-guide-item b{display:block;font-size:14.5px;margin-bottom:5px}
.cn-guide-item p{font-size:13px;line-height:2;color:var(--muted);margin:0}
.cn-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cn-post{display:flex;flex-direction:column;gap:7px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;transition:.2s;box-shadow:0 1px 2px rgba(184,24,89,.05),0 6px 16px rgba(184,24,89,.06)}
.cn-post:hover{border-color:#f6c4d9;transform:translateY(-4px);box-shadow:0 4px 9px rgba(184,24,89,.09),0 18px 36px rgba(184,24,89,.16)}
.cn-post small{color:var(--pink);font-size:11.5px}
.cn-post b{font-size:15px;line-height:1.85}
.cn-post span{margin-top:auto;padding-top:10px;font-size:12px;color:var(--muted)}
@media(max-width:820px){
.cn-hero-copy{grid-template-columns:1fr;gap:14px}
.cn-icon{width:76px;height:76px}
.cn-hero-copy h1{font-size:24px}
.cn-guide-grid{grid-template-columns:1fr}
.cn-posts{grid-template-columns:1fr}
.cn-routine-card{padding:24px 22px}
}
/* ===== صفحه‌ی دسته‌بندی ===== */
.ct-top .ct-hero{max-width:760px}
.ct-hero h1{font-size:30px;line-height:1.6;margin:4px 0 12px}
.ct-hero p{font-size:14.5px;line-height:2.2;color:#6b5a63;margin:0}
.ct-empty{border:1px dashed var(--line);border-radius:18px;padding:36px 28px;text-align:center;background:#fff}
.ct-empty b{display:block;font-size:17px;margin-bottom:10px}
.ct-empty p{font-size:13.5px;color:var(--muted);line-height:2.1;margin:0 auto 22px;max-width:520px}
.ct-req{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:560px;margin:auto}
.ct-req input{flex:1;min-width:180px;border:1px solid #e5d5dd;border-radius:10px;padding:12px 15px;font-size:13.5px}
.ct-req .btn{border-radius:10px;padding:12px 24px}
.ct-cn-lead{font-size:13.5px;color:var(--muted);margin:0 0 18px}
.ct-cn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ct-cn{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;transition:.2s;box-shadow:0 1px 2px rgba(184,24,89,.05),0 6px 16px rgba(184,24,89,.06)}
.ct-cn:hover{border-color:#f6c4d9;transform:translateY(-4px);box-shadow:0 4px 9px rgba(184,24,89,.09),0 18px 36px rgba(184,24,89,.16)}
.ct-cn-ic{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(158deg,#fffafc,#fce0ec);flex-shrink:0}
.ct-cn-ic svg{width:66%;height:66%;fill:initial;stroke:none;stroke-width:initial;overflow:visible}
.ct-cn b{flex:1;font-size:14.5px;font-weight:500}
.ct-cn-go{color:#d59ab4;font-size:16px;transition:.16s}
.ct-cn:hover .ct-cn-go{color:var(--pink);transform:translateX(-4px)}
@media(max-width:820px){.ct-hero h1{font-size:24px}.ct-cn-grid{grid-template-columns:1fr}}
/* ===== صفحه‌ی برند ===== */
.br-hero{display:grid;grid-template-columns:104px 1fr;gap:24px;align-items:start;max-width:900px}
.br-mark{width:104px;height:104px;border-radius:26px;display:grid;place-items:center;font-family:Georgia,serif;font-weight:700;font-size:32px;letter-spacing:1px;color:#b81859;background:linear-gradient(150deg,#fff 0%,#fce0ec 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 26px rgba(184,24,89,.14)}
.br-origin{display:inline-block;background:#fff;color:var(--pink);border:1px solid #f6d7e4;border-radius:20px;padding:4px 13px;font-size:11.5px;margin-bottom:10px}
.br-hero-copy h1{font-size:29px;line-height:1.6;margin:0 0 12px}
.br-hero-copy>p{font-size:14.5px;line-height:2.2;color:#6b5a63;margin:0 0 12px}
.br-known{font-size:13px;color:var(--muted)}
.br-known b{color:var(--ink);font-weight:500}
.br-auth-card{display:grid;grid-template-columns:72px 1fr;gap:22px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 30px;box-shadow:0 1px 2px rgba(184,24,89,.05),0 6px 16px rgba(184,24,89,.07)}
.br-auth-ic{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(150deg,#fff6fa,#fbdde9)}
.br-auth-ic svg{width:38px;height:38px;fill:none;stroke:var(--pink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.br-auth-card h2{font-size:20px;margin:0 0 12px}
.br-auth-card p{font-size:14px;line-height:2.2;color:var(--muted);margin:0}
.br-auth-note{margin-top:14px!important;padding-top:14px;border-top:1px solid var(--line);font-size:13px!important;color:#1a7f37!important}
@media(max-width:820px){
.br-hero{grid-template-columns:1fr;gap:16px}
.br-mark{width:80px;height:80px;font-size:26px;border-radius:20px}
.br-hero-copy h1{font-size:23px}
.br-auth-card{grid-template-columns:1fr;gap:16px;padding:22px}
}
/* ===================== صفحه‌ی پک روتین ===================== */
.rt-pg{padding-bottom:6px}
.rt-hero{display:grid;grid-template-columns:1.25fr .85fr;gap:38px;align-items:center;padding:6px 0 26px}
/* The routine introduction is content, not the sticky site header. */
.rt-root>header.rt-hero{position:relative;top:auto;z-index:auto;display:block;padding:28px 0 30px;border-bottom:1px solid var(--line);background:#fff8fb}
.rt-root>header.rt-hero .rt-hero-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:36px;align-items:center;margin-block:18px 24px}
.rt-root>header.rt-hero .rt-hero-art{width:100%;max-width:460px;justify-self:center;aspect-ratio:1.2;margin:0}
.rt-root>header.rt-hero .rt-hero-tiles .tile.has-img{width:100px;height:100px;overflow:hidden;background:#fff}
.rt-root>header.rt-hero .rt-hero-tiles .tile.has-img img{width:100%;height:100%;object-fit:contain;display:block}
.rt-root>header.rt-hero .cn-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
@media(max-width:800px){.rt-root>header.rt-hero .rt-hero-in{grid-template-columns:1fr;gap:22px}.rt-root>header.rt-hero .rt-hero-art{aspect-ratio:1.8;max-width:520px}.rt-root>header.rt-hero .rt-hero-tiles .tile.has-img{width:82px;height:82px}}
.rt-hero-copy{min-width:0}
.rt-kicker{display:inline-block;background:var(--pale);color:var(--pink);font-size:11.5px;font-weight:600;border-radius:20px;padding:5px 14px}
.rt-hero-copy h1{font-size:30px;line-height:1.65;margin:14px 0 10px}
.rt-lead{font-size:14.5px;color:var(--muted);line-height:2.1;margin:0;max-width:60ch}
.rt-hero-buy{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 18px;box-shadow:0 1px 2px rgba(184,24,89,.05),0 8px 20px rgba(184,24,89,.07)}
.rt-hero-price b{font-size:22px;display:block;line-height:1.5}
.rt-hero-price i{font-style:normal;font-size:12px;font-weight:400}
.rt-hero-price del{font-size:13px;color:#a6949c}
.rt-hero-save{background:#eef8f1;color:#1a7f37;font-size:12px;border-radius:20px;padding:5px 12px;white-space:nowrap}
.rt-hero-cta{margin-inline-start:auto;border-radius:11px}
.rt-hero-art{position:relative;aspect-ratio:1/.82;border-radius:24px;overflow:hidden;display:grid;place-items:center;box-shadow:0 14px 40px rgba(120,20,70,.22)}
.rt-hero-art:after{content:"";position:absolute;left:-60px;top:-90px;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.14)}
.rt-hero-tiles{position:relative;z-index:1;display:flex}
.rt-hero-tiles .tile{width:84px;height:84px;border-radius:50%;border:4px solid #fff;background-size:300% 300%;box-shadow:0 8px 22px rgba(60,10,35,.26);flex-shrink:0}
.rt-hero-tiles .tile+.tile{margin-inline-start:-26px}
/* --- صبح و شب --- */
.rt-sched{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.rt-sc-col{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px 22px;box-shadow:0 1px 2px rgba(184,24,89,.05),0 6px 16px rgba(184,24,89,.06)}
.rt-sc-head{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.rt-sc-head h3{font-size:16px;margin:0}
.rt-sc-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex-shrink:0}
.rt-sc-ic svg{width:19px;height:19px;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rt-sc-am .rt-sc-ic{background:linear-gradient(150deg,#fff1d6,#ffd79b)}
.rt-sc-am .rt-sc-ic svg{stroke:#b5761a}
.rt-sc-pm .rt-sc-ic{background:linear-gradient(150deg,#e8e6ff,#c9c4f4)}
.rt-sc-pm .rt-sc-ic svg{stroke:#5b4fa8}
.rt-sc-list{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.rt-sc-list li{display:flex;gap:11px;align-items:flex-start}
.rt-sc-n{width:23px;height:23px;border-radius:50%;background:var(--pale);color:var(--pink);font-size:11.5px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:2px}
.rt-sc-b b{display:block;font-size:13.5px;font-weight:600;line-height:1.75}
.rt-sc-b small{display:block;color:var(--muted);font-size:11.5px;line-height:1.85}
/* --- مراحل پک --- */
.rt-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rt-st{position:relative;display:grid;grid-template-columns:auto 104px 1fr;gap:16px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 20px;box-shadow:0 1px 2px rgba(184,24,89,.05),0 6px 16px rgba(184,24,89,.06);transition:border-color .2s,box-shadow .2s}
.rt-st:hover{border-color:#f6c4d9;box-shadow:0 4px 9px rgba(184,24,89,.09),0 16px 32px rgba(184,24,89,.13)}
.rt-st-n{width:30px;height:30px;border-radius:50%;background:linear-gradient(145deg,#ff96c2,#e92878);color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center;flex-shrink:0;box-shadow:0 5px 13px rgba(233,40,120,.32)}
.rt-st-th{display:block;border-radius:14px;overflow:hidden;background:#fdeef3}
.rt-st-th .tile{display:block;width:100%;aspect-ratio:1/1;background-size:300% 300%}
.rt-st-body{min-width:0}
.rt-st-role{display:inline-block;background:var(--pale);color:var(--pink);font-size:11px;border-radius:20px;padding:4px 11px}
.rt-st-body h3{font-size:15.5px;line-height:1.75;margin:9px 0 2px}
.rt-st-body h3 a:hover{color:var(--pink)}
.rt-st-brand{font-size:11.5px;color:var(--muted);margin:0 0 9px}
.rt-st-body>p{font-size:13px;color:var(--muted);line-height:2.05;margin:0}
.rt-st-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}
.rt-st-foot b{font-size:15.5px}
.rt-st-foot i{font-style:normal;font-size:11px;font-weight:400}
.rt-st-add{margin-inline-start:auto;background:#fff;border:1px solid var(--line);color:var(--pink);border-radius:9px;padding:8px 16px;font-size:12.5px;font-family:inherit;cursor:pointer;transition:.16s}
.rt-st-add:hover{border-color:var(--pink);background:var(--pale)}
/* --- هشدار --- */
.rt-warn{display:flex;gap:16px;align-items:flex-start;background:linear-gradient(140deg,#fff8f0,#fdecef);border:1px solid #f6d3c4;border-radius:20px;padding:24px 26px}
.rt-warn-ic{width:44px;height:44px;border-radius:14px;background:linear-gradient(150deg,#ffd9a8,#f79b7a);display:grid;place-items:center;flex-shrink:0;box-shadow:0 6px 16px rgba(200,100,60,.22)}
.rt-warn-ic svg{width:23px;height:23px;fill:none;stroke:#8a3a12;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rt-warn h2{font-size:17px;margin:2px 0 8px}
.rt-warn p{font-size:13.5px;color:#6d4438;line-height:2.1;margin:0}
/* --- جدول قیمت --- */
.rt-price-box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:8px 24px 20px;box-shadow:0 1px 2px rgba(184,24,89,.05),0 6px 16px rgba(184,24,89,.06);max-width:640px}
.rt-price-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.rt-price-tbl td{padding:13px 2px;border-bottom:1px solid var(--line);color:var(--muted)}
.rt-price-tbl td:last-child{text-align:left;white-space:nowrap;color:#2b1420}
.rt-price-tbl tfoot td{font-weight:600;color:inherit}
.rt-tr-sum td{padding-top:16px}
.rt-tr-sum td:last-child{text-decoration:line-through;color:#a6949c}
.rt-tr-pack td{font-size:16px;border-bottom:0}
.rt-tr-pack td:last-child{color:var(--pink)}
.rt-tr-save td{border-bottom:0;padding-top:0;color:#1a7f37}
.rt-tr-save td:last-child{color:#1a7f37}
.rt-price-note{font-size:12px;color:var(--muted);line-height:2;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line)}
/* --- زمان‌بندی نتیجه --- */
.rt-time{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rt-time li{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px 22px;box-shadow:0 1px 2px rgba(184,24,89,.05),0 6px 16px rgba(184,24,89,.06)}
.rt-time li:before{content:"";position:absolute;top:0;inset-inline:22px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#ff96c2,#e92878)}
.rt-time-w{display:inline-block;font-size:12.5px;font-weight:700;color:var(--pink);margin-bottom:9px}
.rt-time p{font-size:13px;color:var(--muted);line-height:2.05;margin:0}
.rt-extra-note{font-size:13.5px;color:var(--muted);line-height:2.1;margin:0 0 20px;max-width:72ch}
.rt-req{margin:20px 0 0;justify-content:flex-start}
.rt-faq{max-width:820px}
@media(max-width:980px){
.rt-hero{grid-template-columns:1fr;gap:26px}
.rt-hero-art{order:-1;aspect-ratio:16/8;border-radius:20px}
.rt-hero-copy h1{font-size:25px}
.rt-time{grid-template-columns:1fr}
}
@media(max-width:700px){
.rt-sched{grid-template-columns:1fr}
.rt-st{grid-template-columns:auto 1fr;gap:12px}
.rt-st-th{grid-column:1/-1;max-width:150px}
.rt-hero-buy{padding:14px}
.rt-hero-cta{margin-inline-start:0;width:100%;justify-content:center}
.rt-price-box{padding:4px 16px 16px}
.rt-warn{padding:20px;gap:13px}
}
/* کارت روتین لندینگ: سربرگ حالا لینک صفحه‌ی پک است */
.rt-card .rt-top{display:block;color:#fff}
.rt-card:hover .rt-top h3{opacity:.93}
.rt-cta-row{display:flex;flex-direction:column;gap:9px;margin:14px 22px 18px}
.rt-more{order:2;align-self:center;font-size:12.5px;color:var(--pink);border-bottom:1px solid transparent;transition:.16s;white-space:nowrap}
.rt-more:hover{border-bottom-color:var(--pink)}
.rt-cta-row .rt-cta{margin:0;border-radius:10px;justify-content:center}
/* --- صفحه‌ی مادر پک‌ها --- */
.rh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rh-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(184,24,89,.05),0 6px 16px rgba(184,24,89,.07);transition:border-color .2s,box-shadow .2s,transform .2s}
.rh-card:hover{border-color:#f6c4d9;box-shadow:0 4px 9px rgba(184,24,89,.09),0 18px 36px rgba(184,24,89,.16);transform:translateY(-5px)}
.rh-art{position:relative;display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden}
.rh-art:after{content:"";position:absolute;left:-50px;top:-70px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.14)}
.rh-badge{position:absolute;top:13px;right:14px;z-index:2;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4);color:#fff;font-size:11px;border-radius:20px;padding:3px 11px}
.rh-tiles{position:relative;z-index:1;display:flex}
.rh-tiles i{width:58px;height:58px;border-radius:50%;border:3px solid #fff;background-size:300% 300%;box-shadow:0 6px 16px rgba(60,10,35,.24);flex-shrink:0}
.rh-tiles i+i{margin-inline-start:-18px}
.rh-body{display:flex;flex-direction:column;gap:7px;flex:1;padding:16px 19px 17px}
.rh-body b{font-size:15.5px;font-weight:600;line-height:1.75}
.rh-card:hover .rh-body b{color:var(--pink)}
.rh-body small{font-size:12.5px;color:var(--muted);line-height:1.95}
.rh-foot{margin-top:auto;padding-top:13px;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:9px}
.rh-foot em{font-style:normal;font-size:15.5px;font-weight:700}
.rh-foot del{font-size:12px;color:#a6949c}
@media(max-width:1000px){.rh-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.rh-grid{grid-template-columns:1fr}}
.cart-ft .row-off{color:#1a7f37}
.cart-ft .row-off b{color:#1a7f37}
.cart-ft .row-total{padding-top:10px;margin-top:4px;border-top:1px solid var(--line);font-size:15px}
.cart-note{font-size:11.5px;color:var(--muted);line-height:1.9;margin:8px 0 12px}
/* ===================== صفحه‌ی راهنمای اصالت ===================== */
.au-hero{display:grid;grid-template-columns:1.35fr .65fr;gap:40px;align-items:center;padding:6px 0 28px}
.au-hero-copy h1{font-size:30px;line-height:1.65;margin:14px 0 12px}
.au-answer{font-size:15px;line-height:2.15;color:#4b2a39;margin:0;max-width:64ch;background:#fff;border:1px solid var(--line);border-inline-start:4px solid var(--pink);border-radius:14px;padding:16px 20px;box-shadow:0 6px 16px rgba(184,24,89,.06)}
.au-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.au-jump a{background:#fff;border:1px solid var(--line);border-radius:30px;padding:6px 14px;font-size:12.5px;transition:.16s}
.au-jump a:hover{border-color:var(--pink);color:var(--pink)}
.au-hero-art{position:relative;aspect-ratio:1/1;border-radius:28px;display:grid;place-items:center;align-content:center;gap:16px;background:linear-gradient(150deg,#ff96c2 0%,#e92878 52%,#9e1450 100%);box-shadow:0 16px 40px rgba(120,20,70,.24);overflow:hidden}
.au-hero-art:after{content:"";position:absolute;left:-60px;top:-80px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.14)}
.au-seal{position:relative;z-index:1;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.55);box-shadow:0 12px 30px rgba(60,10,35,.25)}
.au-seal svg{width:66px;height:66px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.au-hero-lbl{position:relative;z-index:1;color:#fff;font-weight:700;font-size:15px}
.au-signs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.au-signs li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:0 1px 2px rgba(184,24,89,.05),0 6px 16px rgba(184,24,89,.06)}
.au-signs li:last-child:nth-child(odd){grid-column:1/-1}
.au-signs h3{font-size:15px;margin:3px 0 7px}
.au-signs p{font-size:13px;color:var(--muted);line-height:2.05;margin:0}
.au-table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 16px rgba(184,24,89,.06)}
.au-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.au-table th,.au-table td{padding:14px 18px;text-align:right;border-bottom:1px solid var(--line);line-height:1.9}
.au-table thead th{background:var(--pale);color:var(--pink);font-size:12.5px;font-weight:700}
.au-table tbody tr:last-child>*{border-bottom:0}
.au-table tbody th{font-weight:600}
.au-ok{color:#1a7f37}
.au-bad{color:#b3261e}
.au-brands{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.au-br{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;transition:.2s;box-shadow:0 1px 2px rgba(184,24,89,.05),0 6px 16px rgba(184,24,89,.06)}
.au-br:hover{border-color:#f6c4d9;transform:translateY(-3px);box-shadow:0 4px 9px rgba(184,24,89,.09),0 16px 32px rgba(184,24,89,.13)}
.au-br-mark{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;flex-shrink:0;font-family:Georgia,serif;font-weight:700;font-size:17px;color:#b81859;background:linear-gradient(150deg,#fff,#fce0ec);box-shadow:inset 0 1px 0 #fff,0 5px 13px rgba(184,24,89,.13)}
.au-br-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.au-br-head{display:flex;align-items:center;gap:8px}
.au-br-head b{font-size:14.5px}
.au-br-head small{font-size:11px;color:var(--pink);background:var(--pale);border-radius:20px;padding:2px 9px}
.au-br-tip{font-size:12.5px;color:var(--muted);line-height:1.95}
.au-br-go{font-size:12px;color:var(--pink);margin-top:2px}
.au-promise{grid-template-columns:repeat(4,1fr)}
.au-steps{margin:4px 0 0;padding-inline-start:20px;display:grid;gap:8px;font-size:13.5px;color:#6d4438;line-height:2}
.au-steps b{color:#4b2a39}
.au-upcoming{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.au-upcoming li{background:#fff;border:1px dashed #efc3d6;border-radius:12px;padding:13px 16px;font-size:13.5px;color:#6b4a58}
@media(max-width:980px){.au-hero{grid-template-columns:1fr;gap:24px}.au-hero-art{order:-1;aspect-ratio:16/7}.au-hero-copy h1{font-size:25px}.au-promise{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.au-signs,.au-brands,.au-upcoming{grid-template-columns:1fr}.au-promise{grid-template-columns:1fr}.au-seal{width:96px;height:96px}.au-seal svg{width:48px;height:48px}}
.pdp-auth-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:10px}
.pdp-auth-links a,.br-auth-more{color:var(--pink);font-size:13px}
.br-auth-more{display:inline-block;margin-top:10px}
.pdp-auth-links a:hover,.br-auth-more:hover{text-decoration:underline}
.cn-req{margin-top:22px}
/* جدول اصل/تقلبی در موبایل: هر ردیف یک کارت */
@media(max-width:600px){.au-table{min-width:0}.au-table thead{display:none}.au-table tr{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}.au-table tbody tr:last-child{border-bottom:0}.au-table th,.au-table td{border-bottom:0;padding:10px 14px}.au-table tbody th{grid-column:1/-1;padding-bottom:0}.au-table td{font-size:12.5px;padding-top:4px}.au-table td:before{content:attr(data-l);display:block;font-size:11px;color:var(--muted);margin-bottom:2px}}
/* ===================== انتخاب‌های اقتصادی ===================== */
.bp-pairs{display:grid;gap:16px}
.bp-pair{display:grid;grid-template-columns:1fr auto 1fr 1.3fr;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 1px 2px rgba(184,24,89,.05),0 6px 16px rgba(184,24,89,.06)}
.bp-side{display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto auto;column-gap:12px;align-items:center;border-radius:14px;padding:10px;transition:.18s}
.bp-side:hover{background:var(--pale)}
.bp-side .tile{grid-row:1/4;width:64px;height:64px;border-radius:12px;background-size:300% 300%}
.bp-side small{font-size:11px;color:var(--muted)}.bp-side b{font-size:13.5px;line-height:1.7}.bp-side em{font-style:normal;font-size:13px;font-weight:700}
.bp-exp em{color:#a6949c;text-decoration:line-through}.bp-eco em{color:var(--pink)}
.bp-vs{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--pale);color:var(--pink);font-weight:700}
.bp-why{border-inline-start:1px solid var(--line);padding-inline-start:16px;font-size:12.5px;color:var(--muted);line-height:1.95}
.bp-why p{margin:4px 0 0}.bp-why b{color:var(--ink)}
.bp-save{display:inline-block;background:#eef8f1;color:#1a7f37;font-size:12px;font-weight:600;border-radius:20px;padding:3px 11px}
.bp-routine{max-width:720px}.bp-routine h2{margin:4px 0 12px}
.bp-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bp-steps li{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.bp-steps a{flex:1;font-size:14px}.bp-steps a:hover{color:var(--pink)}.bp-steps b{font-size:14px}
@media(max-width:900px){.bp-pair{grid-template-columns:1fr auto 1fr}.bp-why{grid-column:1/-1;border-inline-start:0;border-top:1px solid var(--line);padding:12px 0 0}}
@media(max-width:560px){.bp-pair{grid-template-columns:1fr}.bp-vs{justify-self:center;transform:rotate(-90deg)}}
/* ===================== مجله ===================== */
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bl-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(184,24,89,.05),0 6px 16px rgba(184,24,89,.07);transition:.2s}
.bl-card:hover{border-color:#f6c4d9;transform:translateY(-5px);box-shadow:0 4px 9px rgba(184,24,89,.09),0 18px 36px rgba(184,24,89,.16)}
.bl-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden}.bl-media .tile{position:absolute;inset:0}
.bl-media i{position:absolute;top:12px;right:12px;font-style:normal;background:rgba(255,255,255,.94);color:var(--pink);font-size:11px;border-radius:20px;padding:3px 11px}
.bl-body{display:flex;flex-direction:column;gap:6px;flex:1;padding:16px 18px}
.bl-body b{font-size:16px;line-height:1.8}.bl-card:hover .bl-body b{color:var(--pink)}
.bl-body small{font-size:12.5px;color:var(--muted);line-height:1.95}
.bl-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.bl-foot em{font-style:normal;color:var(--pink)}
.bl-topics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bl-topics>div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.bl-topics h3{font-size:14.5px;margin:0 0 8px;color:var(--pink)}.bl-topics ul{margin:0;padding-inline-start:18px;font-size:13px;color:#6b4a58;line-height:2}
.ar-head{background:linear-gradient(180deg,#fff4f8,#fff);padding:18px 0 22px}
.ar-wrap{max-width:780px}
.ar-cat{display:inline-block;background:var(--pale);color:var(--pink);font-size:12px;border-radius:20px;padding:3px 12px;margin-top:8px}
.ar-head h1{font-size:30px;line-height:1.65;margin:10px 0 8px}
.ar-meta{font-size:12.5px;color:var(--muted);margin:0}
.ar-body{padding-bottom:30px}.ar-body>.au-answer{max-width:none;margin:8px 0 20px}
.ar-body h2{font-size:21px;margin:28px 0 10px}
.ar-body p,.ar-body li{font-size:15px;line-height:2.2;color:#3d2a33}
.ar-body a{color:var(--pink);border-bottom:1px solid #f6c4d9}.ar-body .pdp-faq a{border:0}
.ar-body ul,.ar-body ol{padding-inline-start:22px}
.ar-toc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;font-size:13.5px}
.ar-toc b{display:block;margin-bottom:4px}.ar-toc ol{margin:0;padding-inline-start:20px}.ar-toc a{border:0;color:var(--ink)}.ar-toc a:hover{color:var(--pink)}
.ar-pillar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:28px 0 8px;background:linear-gradient(135deg,#ff96c2,#e92878);color:#fff;border-radius:16px;padding:16px 20px}
.ar-pillar span{font-size:13px;opacity:.9}.ar-pillar a{color:#fff;border:0;font-weight:700;font-size:15px}
@media(max-width:900px){.bl-grid,.bl-topics{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.bl-grid,.bl-topics{grid-template-columns:1fr}.ar-head h1{font-size:24px}.ar-body p,.ar-body li{font-size:14.5px}}
/* ===================== صفحه‌های راهنما و قانونی ===================== */
mark.todo{background:#fff1c2;color:#7a5200;border-radius:6px;padding:0 6px;font-size:.92em}
.in-layout{display:grid;grid-template-columns:1fr 270px;gap:34px;align-items:start}
.in-body{min-width:0}.in-body section{margin-bottom:26px}
.in-body h2{font-size:20px;margin:0 0 10px}
.in-body p,.in-body li{font-size:14.5px;line-height:2.15;color:#3d2a33}
.in-body a{color:var(--pink)}
.in-list{padding-inline-start:22px;margin:0}.in-list li{margin-bottom:6px}
.in-facts{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--line);border-radius:14px}
.in-facts li{display:flex;justify-content:space-between;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line)}.in-facts li:last-child{border:0}.in-facts span{color:var(--muted);font-size:13px}
.in-side{position:sticky;top:110px;display:grid;gap:14px}
.in-side nav{display:grid;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.in-side nav a{padding:11px 16px;font-size:13.5px;border-bottom:1px solid var(--line);transition:.16s}.in-side nav a:last-child{border:0}
.in-side nav a:hover{background:var(--pale);color:var(--pink)}.in-side nav a.on{background:var(--pink);color:#fff}
.in-help{background:var(--pale);border-radius:16px;padding:16px;font-size:13px}.in-help p{margin:4px 0 10px;color:var(--muted)}.in-help .btn{width:100%;border-radius:10px}
.in-channels{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.in-channels a{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;transition:.18s;color:var(--ink)}
.in-channels a:hover{border-color:#f6c4d9;transform:translateY(-3px)}.in-channels b{font-size:14px}.in-channels span{font-size:13px;color:var(--muted)}
.in-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.in-form label{display:flex;flex-direction:column;gap:6px;font-size:13px}.in-form .full{grid-column:1/-1}
.in-form input,.in-form select,.in-form textarea{border:1px solid #e5d5dd;border-radius:10px;padding:11px 13px;font:inherit;font-size:14px}
.in-form .btn{grid-column:1/-1;justify-self:start;border-radius:10px}
.foot-bottom a{color:inherit;opacity:.85}.foot-bottom a:hover{opacity:1;text-decoration:underline}
@media(max-width:900px){.in-layout{grid-template-columns:1fr}.in-side{position:static}}
@media(max-width:560px){.in-channels,.in-form{grid-template-columns:1fr}}
/* ===== ارسال رایگان و پیشنهاد پک ===== */
.topline .top-pack{color:#ffe0ec;text-decoration:underline;text-underline-offset:3px}
.lvmega-hot{color:var(--pink)!important;font-weight:700}
.lvmega-hot i,.mnav-hot i{font-style:normal;font-size:10.5px;font-weight:700;background:linear-gradient(135deg,#ff96c2,#e92878);color:#fff;border-radius:20px;padding:1px 8px;margin-inline-start:4px}
.ship-bar{background:var(--pale);border-radius:12px;padding:10px 12px;margin-bottom:10px}
.sb-track{height:7px;background:#f6dce7;border-radius:9px;overflow:hidden}
.sb-track span{display:block;height:100%;background:linear-gradient(90deg,#ff96c2,#e92878);border-radius:9px;transition:width .3s}
.ship-bar p{margin:6px 0 0;font-size:12.5px;color:#6b4a58}.ship-bar b{color:var(--pink)}
.sb-done{background:#eef8f1;color:#1a7f37;border-radius:12px;padding:9px 12px;font-size:13px;font-weight:600;margin:0 0 10px}
.cart-pack{border:1px dashed #efb3cc;background:#fff;border-radius:12px;padding:11px 12px;margin-bottom:12px}
.cart-pack b{display:block;font-size:13px;line-height:1.8}.cart-pack small{display:block;color:var(--muted);font-size:11.5px;line-height:1.8}
.cp-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.cp-save{background:#eef8f1;color:#1a7f37;font-size:11.5px;font-weight:600;border-radius:20px;padding:2px 10px}
.cart-pack button{border:0;background:var(--pink);color:#fff;border-radius:9px;padding:6px 14px;font:inherit;font-size:12.5px;cursor:pointer}
.pdp-ship{font-size:12.5px;color:var(--muted);margin:8px 0 0}.pdp-ship.on{color:#1a7f37;font-weight:600}
.pdp-pack{display:flex;align-items:center;gap:12px;margin-top:14px;background:linear-gradient(135deg,#fff4f8,#fde6ef);border:1px solid #f6c4d9;border-radius:14px;padding:12px 14px;transition:.18s}
.pdp-pack:hover{border-color:var(--pink);transform:translateY(-2px)}
.pdp-pack-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;background:linear-gradient(145deg,#ff96c2,#e92878);color:#fff;font-weight:800;font-size:12px}
.pdp-pack-tx{flex:1;min-width:0}.pdp-pack-tx b{display:block;font-size:13.5px}.pdp-pack-tx small{display:block;font-size:12px;color:var(--muted)}
.pdp-pack em{font-style:normal;color:var(--pink);font-size:12.5px;white-space:nowrap}
/* پیام ارسال رایگان و پک در موبایل هم دیده شود (style.css قدیمی آن را پنهان می‌کرد) */
/* ─────────────────────────────────────────────────────────────
سربرگ بالا روی موبایل.
قبلاً هر دو جمله پشت سر هم و وسط‌چین بودند و هر جا که خط تمام
می‌شد می‌شکستند — یعنی «پک‌های روتین» می‌توانست وسط جمله‌ی اول
گیر کند. و «پیگیری سفارش» کلاً پنهان بود، در حالی که مسیر
پیگیری روی موبایل بیشتر از دسکتاپ لازم می‌شود.
حالا: دو جمله هر کدام خط خودشان، و «پیگیری سفارش» گوشه‌ی چپ
مثل دسکتاپ. «مشاوره و سفارش» روی موبایل نمی‌آید چون دکمه‌ی
شناورش پایین صفحه همیشه هست و دوباره‌کاری می‌شد.
───────────────────────────────────────────────────────────── */
@media(max-width:800px){
.topline .wrap{
display:flex;align-items:center;justify-content:space-between;
gap:10px;flex-wrap:nowrap
}
.topline .wrap>span.preview{
display:block;text-align:right;flex:1 1 auto;min-width:0;
font-size:11.5px;line-height:1.9;padding:2px 0
}
.topline .wrap>span.preview a{display:inline}
/* «·» بین دو جمله لازم نیست وقتی هر کدام خط خودشان را دارند */
.topline .wrap>span.preview .top-dot{display:none}
.topline .wrap>span.preview .top-pack{display:block}
/* قانون قبلی این span را کلاً پنهان می‌کرد؛ :last-child اینجا
برای این است که ویژگی‌اش از آن بالاتر بماند. */
.topline .wrap>span.top-links:last-child{
display:block;flex:0 0 auto;font-size:11.5px;white-space:nowrap
}
/* base.css زیر ۸۰۰ پیکسل `.topline a{display:none}` دارد و همه‌ی
لینک‌های سربرگ را می‌بندد. برای .preview قبلاً استثنا نوشته شده
بود؛ این یکی هم لازم است وگرنه span نمایان می‌شود ولی خودِ
لینک داخلش نامرئی می‌ماند و فقط یک فضای خالی می‌بینی. */
.topline .wrap>span.top-links a{display:inline}
.topline .wrap>span.top-links .top-extra{display:none}
}
/* ===================== درباره‌ی لوند (لندینگ) ===================== */
.ab{background:#fff5f8;padding:56px 0}
.ab-in{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.ab-collage{position:relative;display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:300px 240px;gap:18px;padding:18px;border-radius:130px 16px 130px 16px;background:linear-gradient(135deg,var(--pink) 12%,transparent 12%,transparent 84%,#ffb39f 84%)}
.ab-ph{width:100%;height:100%;object-fit:cover;border-radius:14px;display:block;box-shadow:0 10px 26px rgba(120,20,70,.12)}
.ab-ph0{border-top-right-radius:110px}
.ab-ph3{border-bottom-left-radius:100px}
.ab-seal{position:absolute;left:calc(43% - 56px);top:calc(56% - 56px);z-index:2;width:112px;height:112px;border-radius:50%;background:var(--darkpink);box-shadow:0 0 0 6px rgba(238,123,170,.35),0 12px 26px rgba(120,20,70,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;transition:transform .25s}
.ab-seal:hover{transform:scale(1.06)}
.ab-seal svg{position:absolute;inset:0;width:100%;height:100%;animation:ab-spin 22s linear infinite}
.ab-seal svg{direction:ltr}
.ab-seal text{fill:#fff;stroke:none;font-size:9.5px;font-weight:600;letter-spacing:2.2px;font-family:Vazirmatn,sans-serif;direction:ltr;unicode-bidi:plaintext}
.ab-seal b{position:relative;width:34px;height:34px;border-radius:50%;background:#ffb39f;color:var(--darkpink);display:grid;place-items:center;font-size:20px}
.ab-seal small{position:relative;font-size:10.5px;margin-top:3px}
@keyframes ab-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ab-seal svg{animation:none}}
.ab-copy h2{font-size:40px;line-height:1.6;margin:8px 0 16px;letter-spacing:-.5px}
.ab-copy h2 em{font-style:normal;color:var(--pink)}
.ab-copy p{font-size:16px;color:var(--muted);line-height:2.1;margin:0}
.ab-stats{display:flex;background:var(--pink);color:#fff;border-radius:20px;padding:22px 10px;margin-top:28px;box-shadow:0 14px 30px rgba(233,40,120,.25)}
.ab-stats a{flex:1;text-align:center;border-left:1px solid rgba(255,255,255,.22);color:#fff;transition:opacity .2s}
.ab-stats a:last-child{border:0}
.ab-stats a:hover{opacity:.85}
.ab-stats b{display:block;font-size:28px;color:#ffdfca;line-height:1.6}
.ab-stats span{font-size:13.5px}
.ab-sign{font-family:Georgia,serif;font-style:italic;font-size:27px;margin-top:30px;text-align:right;color:#815166}
@media(max-width:1100px){.ab-in{gap:36px}.ab-collage{grid-template-rows:240px 190px}.ab-copy h2{font-size:33px}.ab-stats b{font-size:23px}}
@media(max-width:800px){.ab{padding:40px 0}.ab-in{grid-template-columns:1fr;gap:34px}.ab-collage{max-width:460px;width:100%;margin:auto;grid-template-rows:230px 170px;gap:12px;padding:12px}.ab-seal{width:92px;height:92px;left:calc(43% - 46px);top:calc(56% - 46px)}.ab-seal b{width:28px;height:28px;font-size:17px}.ab-copy h2{font-size:29px}.ab-copy p{font-size:15px}.ab-stats{padding:16px 6px}.ab-stats b{font-size:21px}.ab-stats span{font-size:12px}.ab-sign{font-size:23px}}
/* ===================== پیگیری سفارش ===================== */
.trk-sheet{height:auto;max-height:min(90vh,760px)}
.trk-top{position:relative;text-align:center;padding:26px 24px 20px;background:linear-gradient(145deg,#ff77ae,#e92878 55%,#9e1450);color:#fff}
.trk-top h2{margin:10px 0 2px;font-size:21px;color:#fff}
.trk-top p{margin:0;font-size:13px;opacity:.9}
.trk-ic{width:56px;height:56px;border-radius:18px;margin:auto;display:grid;place-items:center;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4)}
.trk-ic svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.6}
.trk-x{position:absolute;top:14px;left:14px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.2);color:#fff;font-size:14px;cursor:pointer}
.trk-x:hover{background:rgba(255,255,255,.32)}
.trk-body{padding:20px 22px 22px;overflow-y:auto}
.trk-form{display:grid;gap:12px}
.trk-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500}
.trk-form input{border:1px solid #e5d5dd;border-radius:12px;padding:12px 14px;font:inherit;font-size:15px;transition:border-color .16s,box-shadow .16s}
.trk-form input:focus{outline:0;border-color:var(--pink);box-shadow:0 0 0 3px rgba(233,40,120,.12)}
.trk-err{margin:0;min-height:0;color:#b3261e;font-size:12.5px}.trk-err:empty{display:none}
.trk-go{border-radius:12px;padding:13px;justify-content:center}
.trk-res{margin-top:18px;border-top:1px solid var(--line);padding-top:16px;animation:up .3s}
.trk-demo{background:#fff1c2;color:#7a5200;font-size:11.5px;border-radius:10px;padding:6px 10px;margin-bottom:12px}
.trk-sum{display:grid;grid-template-columns:repeat(3,1fr);background:var(--pale);border-radius:14px;padding:10px 4px;text-align:center}
.trk-sum div+div{border-inline-start:1px solid #f3d6e2}
.trk-sum small{display:block;color:var(--muted);font-size:11px}.trk-sum b{font-size:14px}.trk-sum i{font-style:normal;font-size:10.5px;font-weight:400}
.trk-items{display:flex;align-items:center;gap:6px;margin:12px 0 4px;font-size:12px;color:var(--muted)}
.trk-items .tile{width:34px;height:34px;border-radius:9px;background-size:300% 300%;border:1px solid var(--line)}
.trk-steps{list-style:none;margin:14px 0 0;padding:0;position:relative}
.trk-steps li{position:relative;display:flex;gap:12px;padding-bottom:14px}
.trk-steps li:not(:last-child):before{content:"";position:absolute;right:13px;top:28px;bottom:0;width:2px;background:#eadbe2}
.trk-steps li.done:not(:last-child):before{background:var(--pink)}
.trk-dot{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:12px;font-weight:700;background:#f4eaef;color:#a8929c;position:relative;z-index:1}
.trk-steps li.done .trk-dot{background:var(--pink);color:#fff}
.trk-steps li.now .trk-dot{background:#fff;color:var(--pink);border:2px solid var(--pink);box-shadow:0 0 0 5px rgba(233,40,120,.14)}
.trk-steps b{display:block;font-size:13.5px;line-height:1.9;color:#a8929c}
.trk-steps li.done b,.trk-steps li.now b{color:var(--ink)}
.trk-steps li.now b{color:var(--pink)}
.trk-steps small{font-size:11.5px;color:var(--muted)}
.trk-code{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px dashed #efb3cc;border-radius:12px;padding:10px 12px}
.trk-code small{display:block;font-size:11px;color:var(--muted)}.trk-code b{font-size:15px;letter-spacing:1px}
.trk-code button{border:0;background:var(--pale);color:var(--pink);border-radius:9px;padding:7px 14px;font:inherit;font-size:12.5px;cursor:pointer}
.trk-eta{font-size:12px;color:var(--muted);margin:10px 0 0;line-height:1.9}
.trk-help{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.trk-help p{margin:0 0 8px;line-height:1.9}
.trk-help div{display:flex;flex-wrap:wrap;gap:6px 16px}.trk-help a{color:var(--pink)}
/* ===================== مجله — نسخه‌ی ۲ ===================== */
.bl-hero{background:linear-gradient(180deg,#fff0f6,#fff);padding:18px 0 22px;border-bottom:1px solid var(--line)}
.bl-hero-in{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:end;margin-top:8px}
.bl-hero h1{font-size:32px;line-height:1.6;margin:12px 0 8px}
.bl-hero h1 em{font-style:normal;color:var(--pink)}
.bl-hero p{margin:0;color:var(--muted);font-size:14.5px;line-height:2.1;max-width:60ch}
.bl-search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #edd6e0;border-radius:16px;padding:6px 16px;box-shadow:0 8px 22px rgba(184,24,89,.08)}
.bl-search svg{width:19px;height:19px;flex-shrink:0;color:var(--pink)}
.bl-search input{flex:1;border:0;outline:0;font:inherit;font-size:14px;padding:10px 0;background:transparent;min-width:0}
.bl-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.bl-chips button{font:inherit;font-size:13px;border:1px solid var(--line);background:#fff;border-radius:30px;padding:6px 16px;cursor:pointer;transition:.16s;color:var(--ink)}
.bl-chips button:hover{border-color:var(--pink);color:var(--pink)}
.bl-chips button.on{background:var(--pink);border-color:var(--pink);color:#fff}
.bl-feature-wrap{padding-bottom:6px}
.bl-feature{display:grid;grid-template-columns:1.25fr 1fr;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 14px 38px rgba(184,24,89,.1);transition:.25s}
.bl-feature:hover{transform:translateY(-4px);box-shadow:0 20px 46px rgba(184,24,89,.16)}
.bl-feature-img{position:relative;overflow:hidden;min-height:300px}
.bl-feature-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.bl-feature:hover .bl-feature-img img{transform:scale(1.04)}
.bl-feature-tx{display:flex;flex-direction:column;gap:12px;justify-content:center;padding:30px 34px}
.bl-feature-tx small{font-size:12.5px;color:var(--pink);font-weight:600}
.bl-feature-tx small i{font-style:normal;background:var(--pink);color:#fff;border-radius:20px;padding:2px 10px;margin-inline-end:6px}
.bl-feature-tx b{font-size:25px;line-height:1.7}
.bl-feature-dek{color:var(--muted);font-size:14px;line-height:2}
.bl-feature-meta{font-size:12.5px;color:var(--muted)}
.bl-feature-tx .btn{align-self:flex-start;border-radius:12px}
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bl-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 1px 2px rgba(184,24,89,.05),0 6px 16px rgba(184,24,89,.07);transition:.22s;color:inherit}
a.bl-card:hover{border-color:#f6c4d9;transform:translateY(-5px);box-shadow:0 4px 9px rgba(184,24,89,.09),0 18px 36px rgba(184,24,89,.16)}
.bl-card[hidden]{display:none}
.bl-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#fbe9ef}
.bl-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
a.bl-card:hover .bl-media img{transform:scale(1.05)}
.bl-media i{position:absolute;top:12px;right:12px;font-style:normal;background:rgba(255,255,255,.95);color:var(--pink);font-size:11px;font-weight:600;border-radius:20px;padding:3px 11px;box-shadow:0 3px 10px rgba(184,24,89,.14)}
.bl-soon{position:absolute;top:12px;left:12px;font-style:normal;background:rgba(48,35,43,.78);color:#fff;font-size:11px;border-radius:20px;padding:3px 11px}
.bl-card.soon{opacity:.82}
.bl-card.soon .bl-media img{filter:saturate(.75)}
.bl-body{display:flex;flex-direction:column;gap:6px;flex:1;padding:16px 18px 16px}
.bl-body b{font-size:16px;line-height:1.85}
a.bl-card:hover .bl-body b{color:var(--pink)}
.bl-body small{font-size:12.5px;color:var(--muted);line-height:1.95;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.bl-foot em{font-style:normal;color:var(--pink)}
.bl-empty{text-align:center;color:var(--muted);padding:30px 0}.bl-empty a{color:var(--pink)}
.bl-topics2{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bl-topics2 a{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;transition:.2s;color:inherit}
.bl-topics2 a:hover{border-color:#f6c4d9;transform:translateY(-3px);box-shadow:0 12px 26px rgba(184,24,89,.1)}
.bl-topics2 b{font-size:15.5px}.bl-topics2 small{color:var(--muted);font-size:12.5px;line-height:1.9}
.bl-topics2 span{margin-top:6px;font-size:12px;color:var(--pink)}
.bl-news{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:linear-gradient(135deg,#ff77ae,#e92878 55%,#9e1450);color:#fff;border-radius:22px;padding:24px 28px}
.bl-news b{font-size:19px}.bl-news p{margin:4px 0 0;opacity:.9;font-size:13.5px}
.bl-news form{display:flex;gap:8px;flex:1;max-width:420px;min-width:260px}
.bl-news input{flex:1;border:0;border-radius:12px;padding:12px 14px;font:inherit;min-width:0}
.bl-news .btn{border-radius:12px}
/* --- صفحه‌ی مقاله --- */
.ar-progress{position:fixed;top:0;right:0;left:0;height:3px;z-index:60;background:transparent}
.ar-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff96c2,#e92878);transition:width .1s}
.ar-hero{background:linear-gradient(180deg,#fff0f6,#fff);padding:16px 0 26px}
.ar-hero-in{max-width:900px}
.ar-cat{display:inline-block;background:var(--pink);color:#fff;font-size:12px;font-weight:600;border-radius:20px;padding:3px 13px;margin-top:10px}
.ar-hero h1{font-size:34px;line-height:1.6;margin:12px 0 10px;letter-spacing:-.3px}
.ar-dek{font-size:15.5px;color:#6b4a58;line-height:2.1;margin:0 0 18px;max-width:70ch}
.ar-byline{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line)}
.ar-avatar{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;flex-shrink:0;box-shadow:0 4px 12px rgba(184,24,89,.1)}
.ar-avatar img{width:86%;height:auto}
.ar-avatar.lg{width:60px;height:60px}
.ar-by b{display:block;font-size:14px}.ar-by small{font-size:12px;color:var(--muted)}
.ar-stat{border-inline-start:1px solid var(--line);padding-inline-start:18px}
.ar-stat small{display:block;font-size:11px;color:var(--muted)}.ar-stat b{font-size:13px}
.ar-cover{margin:0 auto;padding-top:4px}
.ar-cover img{display:block;width:100%;height:auto;border-radius:24px;box-shadow:0 18px 44px rgba(120,20,70,.14)}
.ar-cover figcaption{font-size:12.5px;color:var(--muted);text-align:center;margin-top:10px}
.ar-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start;padding-top:30px;padding-bottom:20px}
.ar-main{min-width:0;max-width:760px}
.ar-main h2{font-size:22px;line-height:1.7;margin:34px 0 10px;scroll-margin-top:110px}
.ar-main p,.ar-main li{font-size:15.5px;line-height:2.25;color:#3d2a33}
.ar-main ul,.ar-main ol{padding-inline-start:22px}
.ar-main a{color:var(--pink);border-bottom:1px solid #f6c4d9}
.ar-main .pdp-faq a,.ar-main .btn,.ar-main .ar-share a{border-bottom:0}
.ar-sum{background:#fff;border:1px solid var(--line);border-inline-start:4px solid var(--pink);border-radius:16px;padding:18px 22px;box-shadow:0 8px 22px rgba(184,24,89,.06)}
.ar-sum-h{display:block;color:var(--pink);font-size:13px;margin-bottom:4px}
.ar-sum p{margin:0 0 8px}
.ar-sum ul{margin:0;padding-inline-start:0;list-style:none;display:grid;gap:6px}
.ar-sum li{position:relative;padding-inline-start:26px;font-size:14.5px;line-height:1.95}
.ar-sum li:before{content:"✓";position:absolute;right:0;top:1px;width:18px;height:18px;border-radius:50%;background:var(--pale);color:var(--pink);font-size:11px;display:grid;place-items:center;font-weight:700}
.ar-toc-m{display:none;margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 16px}
.ar-toc-m summary{cursor:pointer;font-weight:600;color:var(--deep)}
.ar-toc-m ol{margin:8px 0 0;padding-inline-start:20px}.ar-toc-m a{border:0;color:var(--ink);font-size:14px}
.ar-tip{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,#fff7ef,#fdecef);border:1px solid #f6d6c8;border-radius:16px;padding:16px 18px;margin:26px 0}
.ar-tip-ic{width:34px;height:34px;border-radius:12px;background:linear-gradient(145deg,#ffcf9e,#f7917a);color:#fff;display:grid;place-items:center;flex-shrink:0}
.ar-tip b{color:#8a3a12}.ar-tip p{margin:4px 0 0;font-size:14.5px;line-height:2.05;color:#6d4438}
.ar-pillar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:34px 0 8px;background:linear-gradient(135deg,#ff96c2,#e92878 60%,#b81859);color:#fff;border-radius:18px;padding:18px 22px}
.ar-pillar span{display:block;font-size:12px;opacity:.9}.ar-pillar b{display:block;font-size:18px}.ar-pillar small{font-size:12.5px;opacity:.9}
.ar-pillar .btn{border-radius:12px}
.ar-share{display:flex;align-items:center;gap:8px;margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.ar-share span{font-size:13px;color:var(--muted);margin-inline-end:6px}
.ar-share a,.ar-share button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:#fff;color:var(--pink);cursor:pointer;transition:.16s}
.ar-share a:hover,.ar-share button:hover{background:var(--pink);color:#fff;border-color:var(--pink)}
.ar-share svg{width:17px;height:17px}
.ar-author{display:flex;gap:16px;align-items:flex-start;background:var(--pale);border-radius:18px;padding:18px 20px;margin-top:18px}
.ar-author b{font-size:15px}.ar-author p{margin:4px 0 0;font-size:13.5px;line-height:2;color:#6b4a58}
.ar-sticky{position:sticky;top:110px;display:grid;gap:16px}
.ar-toc{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px;box-shadow:0 6px 18px rgba(184,24,89,.05)}
.ar-toc b{display:block;font-size:13.5px;margin-bottom:8px}
.ar-toc ol{list-style:none;margin:0;padding:0;counter-reset:t;display:grid;gap:2px}
.ar-toc li{counter-increment:t}
.ar-toc a{display:flex;gap:8px;align-items:baseline;font-size:13px;line-height:1.8;color:var(--muted);padding:5px 8px;border-radius:10px;transition:.16s}
.ar-toc a:before{content:counter(t,persian);font-size:11px;color:#d59ab4;min-width:12px}
.ar-toc a:hover{color:var(--pink);background:var(--pale)}
.ar-toc a.on{color:var(--pink);background:var(--pale);font-weight:600}
.ar-side-prods{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.ar-side-prods>b{display:block;font-size:13.5px;margin-bottom:8px}
.ar-side-prods a{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);color:inherit;font-size:12.5px;line-height:1.7}
.ar-side-prods a:first-of-type{border-top:0}
.ar-side-prods .tile{width:48px;height:48px;border-radius:10px;flex-shrink:0;background-size:300% 300%}
.ar-side-prods em{display:block;font-style:normal;font-size:11px;color:var(--muted)}
.ar-side-prods i{display:block;font-style:normal;color:var(--pink);font-weight:600}
.ar-side-prods a:hover{color:var(--pink)}
.ar-side-cta{display:block;background:linear-gradient(145deg,#ff96c2,#e92878);color:#fff;border-radius:18px;padding:16px 18px;box-shadow:0 12px 26px rgba(233,40,120,.25)}
.ar-side-cta small{display:block;opacity:.9;font-size:12px}.ar-side-cta b{display:block;font-size:15px;line-height:1.8;margin:2px 0 6px}.ar-side-cta span{font-size:12.5px}
@media(max-width:1000px){
.bl-hero-in{grid-template-columns:1fr;gap:16px}
.bl-feature{grid-template-columns:1fr}.bl-feature-img{min-height:0;aspect-ratio:16/9}.bl-feature-tx{padding:22px}
.bl-grid,.bl-topics2{grid-template-columns:1fr 1fr}
.ar-layout{grid-template-columns:1fr}.ar-side{display:none}.ar-toc-m{display:block}
}
@media(max-width:600px){
.bl-hero h1{font-size:25px}.bl-feature-tx b{font-size:20px}
.bl-grid,.bl-topics2{grid-template-columns:1fr}
.ar-hero h1{font-size:25px}.ar-dek{font-size:14.5px}
.ar-byline{gap:12px}.ar-stat{padding-inline-start:12px}
.ar-cover img{border-radius:16px}
.ar-main p,.ar-main li{font-size:15px}
.bl-news{padding:20px}
}
/* --- کارت‌های مجله در صفحه‌ی اصلی: عکس واقعی به‌جای کاشی --- */
.jr-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.jr-card:hover .jr-media img{transform:scale(1.06)}
/* --- فوتر در موبایل: دو ستون، تا اسکرول طولانی نشود --- */
@media(max-width:640px){
.foot-top{grid-template-columns:1fr 1fr;gap:22px 18px}
.foot-brand{grid-column:1/-1}
.foot-contact{grid-column:auto}
.foot-contact .fc-line{font-size:12px;margin-bottom:8px}
.foot-col a{margin:0 0 6px;font-size:12.5px}
.foot-col h3,.foot-contact h3{margin-bottom:10px}
}
@media(max-width:430px){.foot-top{grid-template-columns:1fr 1fr}}
/* style.css قدیمی همه‌ی ها را چسبان می‌کند؛ سربرگ مقاله نباید بچسبد */
header.ar-hero{position:relative;top:auto;z-index:auto;border-bottom:0}
/* ===================== منوی موبایل — نسخه‌ی ۲ ===================== */
.mn2{background:#fffafc}
.mn-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;background:linear-gradient(180deg,#fff0f6,#fffafc)}
.mn-logo img{height:38px;width:auto;display:block;filter:drop-shadow(0 2px 3px rgba(120,20,70,.15))}
.mn-x{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:14px;cursor:pointer;box-shadow:0 4px 12px rgba(184,24,89,.08)}
.mn-search{display:flex;align-items:center;gap:10px;margin:4px 18px 12px;padding:12px 16px;border:1px solid #efdbe4;border-radius:14px;background:#fff;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;text-align:start;box-shadow:0 6px 16px rgba(184,24,89,.06)}
.mn-search svg{width:18px;height:18px;color:var(--pink);flex-shrink:0}
.mn2 .mnav-l1,.mn2 .mnav-l2{background:#fffafc;padding-bottom:10px}
.mn-promo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 18px 16px;padding:16px 18px;border-radius:18px;background:linear-gradient(135deg,#ff77ae,#e92878 55%,#9e1450);color:#fff;box-shadow:0 12px 26px rgba(233,40,120,.28);position:relative;overflow:hidden}
.mn-promo:after{content:"";position:absolute;left:-30px;top:-40px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.14)}
.mn-promo small{display:block;font-size:11.5px;opacity:.9}.mn-promo b{display:block;font-size:17px;line-height:1.7}
.mn-promo em{font-style:normal;font-size:12px;background:rgba(255,255,255,.22);border-radius:20px;padding:2px 10px}
.mn-promo i{font-style:normal;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--pink);display:grid;place-items:center;font-weight:700;position:relative;z-index:1;flex-shrink:0}
.mn-promo.sm{margin-top:14px}.mn-promo.sm b{font-size:15px}
.mn-sec{margin:0 18px 16px}
.mn-sec h4{font-size:12px;color:var(--muted);font-weight:600;margin:0 4px 8px}
.mn-cns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mn-cn{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 4px 8px;transition:.16s;color:inherit}
.mn-cn:active,.mn-cn:hover{border-color:#f6c4d9;background:#fff5f9}
.mn-cn span{width:40px;height:40px;border-radius:50%;background:linear-gradient(158deg,#fffafc,#fce0ec);display:grid;place-items:center}
.mn-cn span svg{width:74%;height:74%;fill:initial;stroke:none;overflow:visible}
.mn-cn small{font-size:10.5px;line-height:1.5;text-align:center;color:#5c4550}
.mn-list{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.mn-row{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;background:none;border:0;border-bottom:1px solid #f6e9ef;font:inherit;text-align:start;cursor:pointer;color:inherit}
.mn-row:last-child{border-bottom:0}
.mn-row:active,.mn-row:hover{background:#fff7fb}
.mn-ic{width:36px;height:36px;border-radius:11px;background:var(--pale);color:var(--pink);display:grid;place-items:center;flex-shrink:0}
.mn-ic svg{width:19px;height:19px}
.mn-tx{flex:1;min-width:0}.mn-tx b{display:block;font-size:14.5px;font-weight:600}.mn-tx small{display:block;font-size:11.5px;color:var(--muted)}
.mn-go{color:#d59ab4;font-size:20px;line-height:1}
.mn-quick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 18px 18px}
.mn-quick button,.mn-quick a{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 12px;font:inherit;font-size:12.5px;color:#4a2f3c;cursor:pointer;text-align:start}
.mn-quick span{color:var(--pink);display:grid}.mn-quick svg{width:18px;height:18px}
.mn-foot{margin:4px 0 0;padding:18px 18px 22px;background:linear-gradient(160deg,#2e0a1d,#5d0f34 55%,#8e1145);color:rgba(255,255,255,.85);border-radius:22px 22px 0 0}
.mn-foot>b{display:block;color:#fff;font-size:14px;margin-bottom:10px}
.mn-social{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mn-social a{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;transition:.18s}
.mn-social a:hover,.mn-social a:active{background:rgba(255,255,255,.16)}
.mn-social svg{width:24px;height:24px}
.mn-social small{font-size:11px;opacity:.85}
.mn-foot p{font-size:11.5px;margin:12px 0 8px;opacity:.8}
.mn-trust{display:flex;flex-wrap:wrap;gap:6px}
.mn-trust span{font-size:10.5px;background:rgba(255,255,255,.1);border-radius:20px;padding:2px 9px}
.mn-back{display:flex;align-items:center;gap:10px;width:calc(100% - 36px);margin:2px 18px 12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;font:inherit;cursor:pointer;color:var(--ink)}
.mn-back span{width:28px;height:28px;border-radius:50%;background:var(--pale);color:var(--pink);display:grid;place-items:center;font-size:18px}
.mn-back b{font-size:15px}
.mn-grp{margin:0 18px 14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.mn-grp h4{font-size:12px;color:var(--pink);margin:0 0 8px}
.mn-grp div{display:flex;flex-wrap:wrap;gap:6px}
.mn-grp a{font-size:12.5px;color:#4a2f3c;background:#fbf4f7;border-radius:20px;padding:5px 12px;transition:.16s}
.mn-grp a:hover,.mn-grp a:active{background:var(--pink);color:#fff}
/* فوتر: لوگو، متن و شبکه‌های اجتماعی دقیقاً وسط */
.foot-brand{display:flex;flex-direction:column;align-items:center;text-align:center}
.foot-brand p{margin-inline:auto}
.foot-social{justify-content:center}
/* نوار متحرک زیر هیرو — اصلاح جهت در صفحه‌ی راست‌چین.
در RTL نیمه‌ی کپی‌شده سمت چپ نیمه‌ی اصلی می‌نشیند؛ حرکت به چپ سمت راست
نوار را خالی می‌گذاشت. حرکت به راست تا ۵۰٪، کپی را دقیقاً جای اصلی
می‌نشاند و حلقه بی‌درز و بدون جای خالی تکرار می‌شود. */
.ribbon-track{animation-name:lv-ribbon-rtl}
@keyframes lv-ribbon-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
/* فوتر: همه‌ی متن‌ها وسط‌چین، هم‌تراز با لوگو */
.foot-col,.foot-contact{text-align:center}
.foot-contact .fc-line{justify-content:center}
.foot-trust{justify-content:center}
.trust-badges,.pay-badges{justify-content:center}
@media(max-width:640px){.foot-bottom{flex-direction:column;align-items:center;text-align:center;gap:6px}}
/* ===================== پنل کاربری ===================== */
#acc-root{background:linear-gradient(180deg,#fff0f6 0,#fbf7f9 240px);min-height:70vh;padding:22px 0 50px}
.acc-title{font-size:22px;margin:0 0 16px}
.acc-loading{color:var(--muted)}
.acc{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start}
.acc-side{position:sticky;top:110px;display:grid;gap:12px}
.acc-me{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 16px;box-shadow:0 6px 18px rgba(184,24,89,.06)}
.acc-av{width:46px;height:46px;border-radius:50%;background:linear-gradient(145deg,#ff96c2,#e92878);color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px;flex-shrink:0}
.acc-me b{display:block;font-size:15px}.acc-me small{font-size:12px;color:var(--muted)}
.acc-lvl{background:linear-gradient(135deg,#2e0a1d,#5d0f34 55%,#8e1145);color:#fff;border-radius:18px;padding:14px 16px}
.acc-lvl>div:first-child{display:flex;justify-content:space-between;align-items:center}
.acc-lvl span{font-weight:700}.acc-lvl small{font-size:11.5px;opacity:.85}
.acc-lvl-bar{height:7px;background:rgba(255,255,255,.18);border-radius:9px;overflow:hidden;margin:10px 0 6px}
.acc-lvl-bar span{display:block;height:100%;background:linear-gradient(90deg,#ffc4db,#ff77ae);border-radius:9px}
.acc-nav{display:grid;background:#fff;border:1px solid var(--line);border-radius:18px;padding:6px;box-shadow:0 6px 18px rgba(184,24,89,.05)}
.acc-nav a,.acc-nav button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:#4a2f3c;font:inherit;font-size:13.5px;background:none;border:0;cursor:pointer;text-align:start;transition:.15s}
.acc-nav svg{width:19px;height:19px;color:#c07a98;flex-shrink:0}
.acc-nav a:hover,.acc-nav button:hover{background:var(--pale)}
.acc-nav a.on{background:var(--pink);color:#fff}.acc-nav a.on svg{color:#fff}
.acc-nav a span,.acc-nav button span{flex:1}
.acc-nav i{font-style:normal;font-size:11px;background:var(--pale);color:var(--pink);border-radius:20px;padding:0 8px}
.acc-nav a.on i{background:rgba(255,255,255,.25);color:#fff}
.acc-nav button{color:#9a6b80;border-top:1px solid var(--line);border-radius:0 0 12px 12px;margin-top:4px}
.acc-main{min-width:0;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 24px;box-shadow:0 8px 24px rgba(184,24,89,.06)}
.acc-demo{background:#fff1c2;color:#7a5200;font-size:11.5px;border-radius:10px;padding:6px 12px;margin-bottom:16px}
.acc-h{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.acc-h h2{font-size:20px;margin:0}.acc-h p{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.9}
.acc-btn-sm{border:1px solid var(--line);background:#fff;color:var(--pink);border-radius:10px;padding:7px 12px;font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap}
.acc-btn-sm:hover{border-color:var(--pink)}
.acc-sub{font-size:15px;margin:24px 0 10px}
.acc-muted{color:var(--muted);font-size:12.5px;line-height:1.9}
.acc-empty{text-align:center;padding:26px 10px;background:#fbf7f9;border-radius:16px;color:var(--muted)}
.acc-empty p{margin:0 0 8px}
.acc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.acc-stats a{background:linear-gradient(160deg,#fff,#fff4f8);border:1px solid var(--line);border-radius:16px;padding:14px;color:inherit;transition:.18s}
.acc-stats a:hover{border-color:#f6c4d9;transform:translateY(-2px)}
.acc-stats small{display:block;color:var(--muted);font-size:12px}.acc-stats b{font-size:21px;color:var(--deep)}.acc-stats i{font-style:normal;font-size:11px;font-weight:400}
.acc-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.acc-promo{display:block;background:linear-gradient(135deg,#ff77ae,#e92878 55%,#9e1450);color:#fff;border-radius:18px;padding:16px 18px;margin-bottom:12px;box-shadow:0 10px 24px rgba(233,40,120,.22)}
.acc-promo.alt{background:linear-gradient(135deg,#ffcf9e,#f7917a 55%,#d8546e)}
.acc-promo small{display:block;opacity:.9;font-size:12px}.acc-promo b{display:block;font-size:16px;margin:2px 0 4px}.acc-promo span{font-size:12.5px}
.acc-chip{display:inline-block;font-size:11px;font-weight:600;border-radius:20px;padding:2px 10px;background:#f4eaef;color:#6b4a58;white-space:nowrap}
.acc-chip.ok{background:#eef8f1;color:#1a7f37}.acc-chip.run{background:#fff1d6;color:#8a5a00}.acc-chip.x{background:#f3e6e6;color:#9a3a3a}
.acc-filter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.acc-filter button{font:inherit;font-size:12.5px;border:1px solid var(--line);background:#fff;border-radius:30px;padding:5px 12px;cursor:pointer}
.acc-filter button.on{background:var(--pink);border-color:var(--pink);color:#fff}
.acc-filter i{font-style:normal;opacity:.75}
.acc-order{border:1px solid var(--line);border-radius:18px;padding:14px 16px;margin-bottom:12px;background:#fff}
.acc-order header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;position:static;border:0;background:none;z-index:auto}
.acc-order header b{display:block;font-size:14.5px}.acc-order header small{font-size:12px;color:var(--muted)}
.acc-order-items{display:flex;align-items:center;gap:8px;margin:12px 0;flex-wrap:wrap}
.acc-order-items a{position:relative;width:52px;height:52px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.acc-order-items .tile{display:block;width:100%;height:100%;background-size:300% 300%}
.acc-order-items i{position:absolute;bottom:2px;left:2px;font-style:normal;font-size:10px;background:rgba(48,35,43,.75);color:#fff;border-radius:8px;padding:0 5px}
.acc-order-sum{margin-inline-start:auto;text-align:left}.acc-order-sum small{display:block;font-size:11px;color:var(--muted)}.acc-order-sum b{font-size:14.5px}
.acc-steps{list-style:none;margin:6px 0 12px;padding:0;display:flex}
.acc-steps li{flex:1;position:relative;text-align:center}
.acc-steps li:before{content:"";position:absolute;top:6px;right:50%;left:-50%;height:2px;background:#eadbe2}
.acc-steps li:first-child:before{display:none}
.acc-steps li.done:before,.acc-steps li.now:before{background:var(--pink)}
.acc-steps span{position:relative;z-index:1;display:block;width:14px;height:14px;margin:0 auto 4px;border-radius:50%;background:#eadbe2}
.acc-steps li.done span{background:var(--pink)}
.acc-steps li.now span{background:#fff;border:3px solid var(--pink);box-shadow:0 0 0 4px rgba(233,40,120,.14)}
.acc-steps small{font-size:10.5px;color:var(--muted);line-height:1.5;display:block}
.acc-steps li.now small{color:var(--pink);font-weight:600}
.acc-steps.sm{margin-top:10px}
.acc-code{display:flex;align-items:center;gap:10px;border:1px dashed #efb3cc;border-radius:12px;padding:8px 12px;margin-bottom:10px;font-size:12.5px}
.acc-code b{letter-spacing:1px}.acc-code span{color:var(--muted)}
.acc-code button{margin-inline-start:auto;border:0;background:var(--pale);color:var(--pink);border-radius:8px;padding:4px 10px;font:inherit;font-size:12px;cursor:pointer}
.acc-note{font-size:12.5px;color:var(--muted);margin:0 0 10px}.acc-note.ok{color:#1a7f37}
.acc-order footer{display:flex;flex-wrap:wrap;gap:6px;padding-top:10px;border-top:1px solid var(--line)}
.acc-order footer button{font:inherit;font-size:12.5px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:6px 12px;cursor:pointer;color:#4a2f3c}
.acc-order footer button:hover{border-color:var(--pink);color:var(--pink)}
.acc-order footer button.pri{background:var(--pink);border-color:var(--pink);color:#fff}
.acc-order footer button.warn{color:#b3261e}
.acc-ret{border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:10px}
.acc-ret>div{display:flex;justify-content:space-between}
.acc-ret b{display:block;font-size:14px}.acc-ret small{font-size:12px;color:var(--muted)}
.acc-wallet{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:linear-gradient(135deg,#2e0a1d,#5d0f34 55%,#8e1145);color:#fff;border-radius:20px;padding:20px 22px}
.acc-wallet small{opacity:.8}.acc-wallet b{display:block;font-size:28px}.acc-wallet i{font-style:normal;font-size:13px;font-weight:400}
.acc-wallet-act{display:flex;gap:8px;flex-wrap:wrap}
.acc-ghost{border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;border-radius:30px;padding:10px 18px;font:inherit;font-size:13.5px;cursor:pointer}
.acc-table{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.acc-table>div{display:grid;grid-template-columns:90px 1fr auto;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px}
.acc-table>div:last-child{border:0}
.acc-table span{color:var(--muted);font-size:12px}.acc-table b{font-weight:500}
.acc-table em{font-style:normal;font-weight:700;white-space:nowrap}.acc-table em.in{color:#1a7f37}.acc-table em.out{color:#9a3a3a}
.acc-credit-hero{background:linear-gradient(135deg,#fff4f8,#fde6ef);border:1px solid #f6c4d9;border-radius:18px;padding:16px 18px}
.acc-credit-hero b{font-size:16px;color:var(--deep)}.acc-credit-hero p{font-size:13.5px;line-height:2;color:#6b4a58;margin:6px 0 10px}
.acc-partners{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.acc-partners div{border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:4px}
.acc-partners small{color:var(--muted);font-size:12px}.acc-partners .acc-chip{align-self:flex-start}
.acc-how{padding-inline-start:20px;margin:0;font-size:13.5px;line-height:2.1;color:#4a2f3c}
.acc-coupon-add{display:flex;gap:8px;margin-bottom:14px}
.acc-coupon-add input{flex:1;border:1px solid #e5d5dd;border-radius:12px;padding:11px 14px;font:inherit;min-width:0}
.acc-coupon-add .btn{border-radius:12px}
.acc-coupons{display:grid;gap:10px}
.acc-cp{display:flex;justify-content:space-between;align-items:center;gap:12px;border-radius:16px;padding:14px 16px;background:linear-gradient(135deg,#fff,#fff4f8);border:1px dashed #efb3cc;position:relative}
.acc-cp.used,.acc-cp.expired{opacity:.55;filter:grayscale(.4)}
.acc-cp-l b{display:block;font-size:14.5px}.acc-cp-l small{display:block;font-size:12px;color:var(--muted)}
.acc-cp-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.acc-cp-r code{font-family:ui-monospace,Consolas,monospace;font-size:14px;font-weight:700;color:var(--deep);background:#fff;border:1px solid var(--line);border-radius:8px;padding:3px 10px;letter-spacing:1px}
.acc-cp-r button{border:0;background:var(--pink);color:#fff;border-radius:9px;padding:5px 12px;font:inherit;font-size:12px;cursor:pointer}
.acc-cp-r span{font-size:11.5px;color:var(--muted)}
.acc-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.acc-levels div{border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center}
.acc-levels div.past{background:#fbf7f9}
.acc-levels div.on{background:linear-gradient(145deg,#ff96c2,#e92878);color:#fff;border-color:transparent;box-shadow:0 10px 22px rgba(233,40,120,.25)}
.acc-levels b{display:block}.acc-levels small{font-size:11.5px;opacity:.85}
.acc-rewards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.acc-rewards div{border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:6px}
.acc-rewards b{font-size:13.5px;line-height:1.8}.acc-rewards small{color:var(--pink);font-weight:600}
.acc-rewards button{border:0;background:var(--pink);color:#fff;border-radius:9px;padding:6px;font:inherit;font-size:12px;cursor:pointer;margin-top:auto}
.acc-rewards button:disabled{background:#eadbe2;color:#9a8490;cursor:not-allowed}
.acc-earn{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.acc-earn li{background:#fbf7f9;border-radius:12px;padding:10px 12px}.acc-earn b{display:block;font-size:13px}.acc-earn span{font-size:12px;color:var(--muted)}
.acc-skin fieldset,.acc-form fieldset{border:0;padding:0;margin:0 0 16px}
.acc-skin legend,.acc-form legend{font-weight:600;font-size:14px;margin-bottom:8px}
.acc-skin small{display:block;color:var(--muted);font-size:12px;margin-top:6px;line-height:1.9}
.acc-opts{display:flex;flex-wrap:wrap;gap:8px}
.acc-opts.col{flex-direction:column}
.acc-opts label{cursor:pointer}
.acc-opts input{position:absolute;opacity:0;pointer-events:none}
.acc-opts span{display:inline-block;border:1px solid var(--line);border-radius:30px;padding:7px 14px;font-size:13px;background:#fff;transition:.15s}
.acc-opts input:checked+span{background:var(--pink);border-color:var(--pink);color:#fff}
.acc-opts input:focus-visible+span{outline:3px solid #7e2350;outline-offset:2px}
.acc-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
.acc-edit{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}.acc-edit summary{cursor:pointer;color:var(--pink);font-weight:600;margin-bottom:12px}
.acc-notify{display:grid;gap:8px}
.acc-notify>div{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.acc-notify .tile{width:44px;height:44px;border-radius:10px;background-size:300% 300%;flex-shrink:0}
.acc-notify b{display:block;font-size:13px}.acc-notify small{font-size:11.5px;color:var(--muted)}
.acc-notify button{margin-inline-start:auto;border:1px solid var(--line);background:#fff;border-radius:9px;padding:5px 10px;font:inherit;font-size:12px;cursor:pointer;color:#9a3a3a}
.acc-addrs{display:grid;gap:10px}
.acc-addr{display:flex;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.acc-addr.def{border-color:#f6c4d9;background:#fff9fb}
.acc-addr b{font-size:14px}.acc-addr p{margin:4px 0;font-size:13px;line-height:1.9}.acc-addr small{font-size:12px;color:var(--muted)}
.acc-addr-act{display:flex;flex-direction:column;gap:6px}
.acc-addr-act button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:5px 10px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.acc-addr-act button.warn{color:#9a3a3a}
.acc-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.acc-form.one{grid-template-columns:1fr}
.acc-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500}
.acc-form .full,.acc-form fieldset,.acc-form>button,.acc-form>p{grid-column:1/-1}
.acc-form input,.acc-form select,.acc-form textarea{border:1px solid #e5d5dd;border-radius:12px;padding:11px 13px;font:inherit;font-size:14px;background:#fff}
.acc-form input:focus,.acc-form select:focus,.acc-form textarea:focus{outline:0;border-color:var(--pink);box-shadow:0 0 0 3px rgba(233,40,120,.12)}
.acc-form small{font-weight:400;color:var(--muted);font-size:11.5px}
.acc-form>button{justify-self:start;border-radius:12px}
.acc-switch{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;font-weight:400!important;cursor:pointer;margin-bottom:8px}
.acc-switch input{position:absolute;opacity:0}
.acc-switch span{width:40px;height:22px;border-radius:20px;background:#e3d3da;position:relative;transition:.2s;flex-shrink:0}
.acc-switch span:after{content:"";position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.acc-switch input:checked+span{background:var(--pink)}
.acc-switch input:checked+span:after{right:21px}
.acc-switch input:disabled+span{opacity:.6}
.acc-check{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;font-weight:400!important;margin-bottom:6px}
.acc-check .tile{width:36px;height:36px;border-radius:8px;background-size:300% 300%}
.acc-rate{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.acc-rate .tile{width:44px;height:44px;border-radius:10px;background-size:300% 300%;flex-shrink:0}
.acc-rate b{font-size:13px;display:block}
.acc-stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.acc-stars input{position:absolute;opacity:0}
.acc-stars label{font-size:22px;color:#e3d3da;cursor:pointer;font-weight:400}
.acc-stars label:hover,.acc-stars label:hover~label,.acc-stars input:checked~label{color:#f2a33a}
.acc-tickets{display:grid;gap:10px}
.acc-ticket{border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.acc-ticket summary{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;list-style:none}
.acc-ticket summary b{display:block;font-size:13.5px}.acc-ticket summary small{font-size:11.5px;color:var(--muted)}
.acc-msgs{display:grid;gap:8px;margin-top:10px}
.acc-msgs p{margin:0;padding:10px 12px;border-radius:14px;font-size:13px;line-height:1.9;max-width:85%}
.acc-msgs .me{background:var(--pale);justify-self:start}
.acc-msgs .lv{background:#f3f0ff;justify-self:end}
.acc-contact{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.acc-contact a{border:1px solid var(--line);border-radius:30px;padding:6px 14px;font-size:12.5px;color:var(--pink)}
.acc-sheet{height:auto;max-height:88vh}
.acc-sheet-h{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.acc-sheet-h b{font-size:15.5px}.acc-sheet-h button{width:32px;height:32px;border-radius:50%;border:0;background:#f6e8f0;cursor:pointer}
.acc-sheet-b{padding:16px 20px 20px;overflow:auto}
.acc-btn{width:100%;justify-content:center;border-radius:12px;padding:12px}
.warnbg{background:#b3261e;border-color:#b3261e}
.acc-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.acc-chips button{border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px;font:inherit;font-weight:700;cursor:pointer}
.acc-chips button:hover{border-color:var(--pink);color:var(--pink)}
.acc-login{display:grid;grid-template-columns:420px 1fr;gap:30px;align-items:center;max-width:960px;margin:10px auto}
.acc-login-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:0 16px 40px rgba(184,24,89,.1);text-align:center}
/* ─── پاپ‌آپ ورود ─────────────────────────────────────────────
همان کارت صفحه‌ی حساب کاربری، داخل پاپ‌آپ. ارتفاع خودکار است
چون محتوایش بین دو مرحله (شماره و کد) کوتاه و بلند می‌شود؛
.sheet معمولی ارتفاع ثابت دارد و وسطش فضای خالی می‌ماند. */
.ov .sheet.lv-login-sheet{
position:relative;width:min(430px,92vw);height:auto;max-height:92vh;
overflow-y:auto;background:transparent;box-shadow:none;border-radius:0;padding:0
}
.lv-login-sheet .acc-login-card{margin:0}
.lv-login-x{
position:absolute;inset-inline-end:14px;top:14px;z-index:2;
width:32px;height:32px;border-radius:50%;background:#f6e8f0;border:0;
font-size:14px;cursor:pointer;color:var(--ink);line-height:1
}
.lv-login-x:hover{background:#efd8e6}
@media(max-width:559px){
.ov .sheet.lv-login-sheet{width:100%;max-width:none}
.lv-login-sheet .acc-login-card{border-radius:22px 22px 0 0;padding:26px 20px 30px}
}
.acc-login-logo{height:48px;margin:0 auto 10px;display:block}
.acc-login-card h2{font-size:20px;margin:6px 0}.acc-login-card p{color:var(--muted);font-size:13px;line-height:1.9;margin:0 0 14px}
.acc-in,.acc-otp{width:100%;border:1px solid #e5d5dd;border-radius:14px;padding:13px 14px;font:inherit;font-size:16px;text-align:center;letter-spacing:1px}
.acc-otp{letter-spacing:10px;font-size:22px}
.acc-err{color:#b3261e;font-size:12.5px;min-height:18px;margin:6px 0!important}
.acc-hint{font-size:11.5px!important;margin-top:12px!important}.acc-hint a{color:var(--pink)}
.acc-link{border:0;background:none;color:var(--pink);font:inherit;cursor:pointer;text-decoration:underline}
.acc-login-why{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.acc-login-why li{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px}
.acc-login-why b{display:block;font-size:14px;color:var(--deep)}.acc-login-why span{font-size:12.5px;color:var(--muted)}
/* کد تخفیف در سبد */
.cp-form{display:flex;gap:6px;margin:6px 0 10px}
.cp-form input{flex:1;min-width:0;border:1px solid #e5d5dd;border-radius:10px;padding:8px 10px;font:inherit;font-size:13px}
.cp-form button{border:1px solid var(--pink);background:#fff;color:var(--pink);border-radius:10px;padding:0 14px;font:inherit;font-size:12.5px;cursor:pointer}
.cp-x{border:0;background:none;color:#9a3a3a;cursor:pointer;font-size:11px;margin-inline-start:4px}
.cp-err{color:#b3261e;font-size:11.5px;margin:0 0 8px}
@media(max-width:900px){
.acc{grid-template-columns:1fr}
.acc-side{position:static}
.acc-lvl{display:none}
.acc-nav{display:flex;overflow-x:auto;scrollbar-width:none;padding:6px;gap:4px}
.acc-nav::-webkit-scrollbar{display:none}
.acc-nav a,.acc-nav button{flex:0 0 auto;padding:8px 12px;font-size:12.5px;border-top:0;margin:0}
.acc-nav a span,.acc-nav button span{flex:none}
.acc-login{grid-template-columns:1fr}
}
@media(max-width:600px){
.acc-main{padding:16px 14px;border-radius:18px}
.acc-stats{grid-template-columns:1fr 1fr}
.acc-duo,.acc-partners,.acc-levels,.acc-rewards,.acc-earn,.acc-form{grid-template-columns:1fr}
.acc-grid{grid-template-columns:1fr 1fr!important}
.acc-h{flex-direction:column}
.acc-steps small{font-size:9.5px}
.acc-table>div{grid-template-columns:1fr auto}.acc-table span{grid-column:1/-1}
.acc-cp{flex-direction:column;align-items:stretch}.acc-cp-r{flex-direction:row;justify-content:space-between;align-items:center}
.acc-login-why{grid-template-columns:1fr}
}
/* H1 صفحه‌ی اصلی: کلمه‌ی کلیدی اصلی داخل H1 (نقشه‌ی کلمات، لایه‌ی ۱)، روی موبایل هم دیده می‌شود */
.lv-hero h1 .lv-h1-kw{font-size:15px;font-weight:500;letter-spacing:0;line-height:1.6;text-shadow:none}
.lv-hero h1 .lv-h1-line{display:block}
/* ─────────────────────────────────────────────────────────────
موبایل: کادر سفید برداشته می‌شود، متن می‌ماند.
این قرص سفید روی عکس هیرو جای زیادی می‌گرفت و قرار بود روی
موبایل نباشد. در خط ۲۸۷ هم `.lv-pill{display:none}` نوشته شده
بود، ولی همین قانون — که ویژگی بالاتری دارد (دو کلاس و یک تگ
در برابر یک کلاس) — با display:inline-flex دوباره نشانش می‌داد.
نتیجه: قصدِ نوشته‌شده هیچ‌وقت اجرا نشد، در هر دو نسخه.
ولی خودِ متن حذف نمی‌شود. این همان کلمه‌ی کلیدی اصلی داخل H1
است و گوگل موبایل‌اول ایندکس می‌کند؛ پنهان‌کردنش یعنی برداشتن
کلمه‌ی کلیدی از نسخه‌ای که گوگل واقعاً می‌خواند. پس فقط ظاهرِ
کادر می‌رود: بدون پس‌زمینه و padding، سفید و با همان سایه‌ای
که بقیه‌ی متن هیرو روی موبایل دارد تا روی عکس خوانا بماند.
display اینجا صریح نوشته شده (نه حذف‌شده) تا اگر روزی قانونِ
کم‌ویژگی‌ترِ خط ۲۸۷ عوض شد، این یکی قطعی باشد.
───────────────────────────────────────────────────────────── */
@media(max-width:540px){
/* order ترتیب دیدن را عوض می‌کند نه ترتیب کد: کلمه‌ی کلیدی
همچنان اولین چیز داخل H1 است، فقط زیر عنوان نشان داده می‌شود. */
.lv-hero h1{display:flex;flex-direction:column}
.lv-hero h1 .lv-h1-line{order:1}
.lv-hero h1 .lv-h1-kw{
order:2;
display:block;background:none;padding:0;border-radius:0;
color:#fff;font-size:15px;font-weight:700;line-height:1.7;margin:10px 0 0;
text-shadow:0 1px 16px rgba(35,2,18,.95),0 1px 2px rgba(35,2,18,.65)
}
/* ✳ تزئینی است و بدون کادرِ سفید روی عکس گم می‌شود */
.lv-hero h1 .lv-h1-kw span{display:none}
/* ─────────────────────────────────────────────────────────
دو دکمه‌ی هیرو روی موبایل باید کنار هم بمانند.
با اندازه‌ی پیش‌فرض، «خرید بر اساس نیاز» ۱۵۱ پیکسل و
«پک‌های روتین» ۱۸۳ پیکسل است؛ با فاصله می‌شود ۳۴۸. عرض
قابل استفاده روی گوشی ۳۶۰ پیکسلی ۳۳۱ و روی ۳۲۰ پیکسلی
۲۹۴ است، پس flex-wrap دکمه‌ی سفید را می‌انداخت خط بالا و
روتین می‌رفت خط پایین — روی بیشتر گوشی‌های واقعی.
flex:1 عرض را بین دو دکمه نصف می‌کند، پس دیگر به اندازه‌ی
متن وابسته نیست و در هر عرضی یک خط می‌ماند. فونت و padding
هم کمی جمع‌تر شد تا متن داخل همان نصف جا شود. ارتفاع ۵۱
پیکسل دست‌نخورده است، یعنی هدف لمس هنوز راحت است. */
.lv-hero-actions{flex-wrap:nowrap;gap:10px}
.lv-hero-actions .btn{
flex:1 1 0;min-width:0;
padding:12px 14px;font-size:13px;gap:6px
}
}
/* گوشی‌های باریک‌تر: همان چیدمان، فقط جمع‌تر. */
@media(max-width:375px){
.lv-hero-actions{gap:8px}
.lv-hero-actions .btn{padding:12px 10px;font-size:12px}
}
/* عکس واقعی محصول (catalog-data.js): مربع، زمینه‌ی سفید، بدون پرش صفحه */
.product-image .p-img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff}
.cart-item .p-img.th,.sr-prod .p-img.th{width:64px;height:64px;object-fit:contain;background:#fff;border-radius:12px}
.pd-media .p-img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:18px}
.p-state.st-soon{color:#8a5a00;background:#fff4dc}
.product .add.soon{background:#fff;color:var(--pink,#c31a63);border:1.5px solid currentColor}
.product .add.soon:hover{background:#fff0f6}
/* عکس واقعی داخل قاب کاشی (پک‌ها، ارزان و خوب، مقاله‌ها، پیگیری سفارش) */
.tile.has-img{background:#fff!important;overflow:hidden}
.tile.has-img::before,.tile.has-img::after{display:none!important}
.tile.has-img img{display:block;width:100%;height:100%;object-fit:contain}
/* محصولی که هنوز عکس واقعی ندارد: جای خالی خنثی با لوگو، نه عکس نمونه‌ی عمومی (که محصول دیگری را نشان می‌دهد) */
.tile.ph{background-image:url('../img/lavand-logo-transparent.png')!important;background-size:52% auto!important;background-position:center!important;background-repeat:no-repeat!important;background-color:#f6eef0!important;opacity:.9}
/* عکس صفحه‌ی محصول: همیشه کامل و بدون کشیدگی (عکس‌های باریک مثل بطری تونر بریده یا کشیده نشوند) */
.pdp-img .p-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
/* نوار «دسته‌بندی محصولات» صفحه‌ی اصلی: لینک متنی و قابل‌خزش به صفحه‌های دسته (سئو) + دسترسی یک‌لمسی (فروش).
موبایل: اسکرول افقی با اسنپ · دسکتاپ: همه در یک شبکه‌ی کامل */
.cs-block{padding-bottom:10px}
.cat-strip{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px}
.cs-item{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 6px 14px;border-radius:var(--radius);background:var(--pale);border:1px solid var(--line);color:var(--ink);text-decoration:none;text-align:center;transition:transform .2s,box-shadow .2s,border-color .2s}
.cs-ic{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(184,24,89,.08)}
.cs-ic svg{width:36px;height:36px;fill:none;stroke:var(--pink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cs-item b{font-size:13px;font-weight:600;line-height:1.5}
.cs-item:hover,.cs-item:focus-visible{transform:translateY(-4px);border-color:var(--pink);box-shadow:0 12px 24px rgba(184,24,89,.12)}
.cs-item:hover .cs-ic{background:var(--pink)}
.cs-item:hover .cs-ic svg{stroke:#fff}
@media (max-width:1100px){.cat-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}.cs-item{flex:0 0 108px;scroll-snap-align:start}}
@media (max-width:600px){.cs-item{flex-basis:92px;padding:12px 4px}.cs-ic{width:54px;height:54px}.cs-ic svg{width:30px;height:30px}.cs-item b{font-size:12px}}
/* نوار «نتیجه‌ی جست‌وجو» در فروشگاه (آدرس /shop/?q=…) */
.shop-q{font-size:13px;color:var(--muted);background:var(--pale);border:1px solid var(--line);border-radius:20px;padding:3px 12px}
.shop-q b{color:var(--ink)}.shop-q a{margin-inline-start:6px;color:var(--pink)}
/* خط «به‌روزرسانی · نویسنده · سیاست محتوا» بالای صفحه‌های راهنما (نشانه‌ی اعتماد برای گوگل و هوش مصنوعی) */
.lv-upd{margin:10px 0 0;font-size:13px;color:var(--muted)}
.lv-upd a{color:var(--darkpink);text-decoration:none;border-bottom:1px solid var(--line)}
.lv-upd a:hover{border-color:var(--pink)}
/* صفحه‌ی تیم محتوا */
.tm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:8px}
.tm-card{background:var(--pale);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.tm-card h3{margin:0 0 4px;font-size:18px}
.tm-role{margin:0 0 10px;color:var(--darkpink);font-weight:600;font-size:14px}
.tm-does{margin:12px 0 0;padding-inline-start:18px;color:var(--muted);font-size:14px}
.tm-does li{margin:4px 0}
/* ---- متن ایستای صفحه‌های پیلار ---- */
/* جواب کوتاه بالای صفحه؛ همان چیزی که هوش مصنوعی و گوگل نقل می‌کنند */
.lv-answer{margin:22px auto 0;max-width:820px;background:var(--pale);border:1px solid var(--line);border-inline-start:4px solid var(--pink);border-radius:var(--radius);padding:16px 18px;font-size:16px;line-height:2.1}
.pl-lead{margin:0 0 16px;color:var(--muted);max-width:760px}
.pl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}
.pl-item{background:var(--card,#fff);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.block.soft .pl-item{background:#fff}
.pl-item h3{margin:0 0 6px;font-size:16px;color:var(--darkpink)}
.pl-item p{margin:0;font-size:14.5px;line-height:2}
.pl-table th[scope="row"]{white-space:nowrap}
/* محصولات نمونه‌ی پیلار */
.pl-picks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.pl-picks a{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:var(--radius);padding:12px;background:#fff;transition:border-color .2s,transform .2s}
.pl-picks a:hover{border-color:var(--pink);transform:translateY(-2px)}
.pl-pick-img{position:relative;width:72px;height:72px;flex:0 0 72px;border-radius:12px;overflow:hidden;background:var(--pale)}
.pl-pick-img img{width:100%;height:100%;object-fit:contain}
.pl-pick-body{display:flex;flex-direction:column;gap:3px;font-size:14px}
.pl-pick-body small{color:var(--muted)}
.pl-pick-body span{color:var(--ink);line-height:1.9}
/* لینک به خوشه‌ها */
.pl-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.pl-links a{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 16px;text-decoration:none;color:var(--ink);font-size:14.5px}
.pl-links a:hover{border-color:var(--pink);color:var(--darkpink)}
@media (max-width:600px){.lv-answer{font-size:15px;padding:14px}}
/* فهرست برندها (/brands/) */
.br-list a{display:flex;flex-direction:column;gap:3px}
.br-list .br-en{font-size:12px;color:var(--muted);font-weight:400;direction:ltr;unicode-bidi:embed}
.br-list span{font-size:12.5px;color:var(--muted)}
.br-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0}
.br-tags a{display:block;padding:7px 14px;border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--ink);text-decoration:none;font-size:13.5px}
.br-tags a:hover{border-color:var(--pink);color:var(--darkpink)}
/* زیرعنوان‌های بخش «درباره‌ی خرید از لوند» در صفحه‌ی اصلی */
.lv-sub{margin:26px 0 12px;font-size:17px;color:var(--darkpink)}
#lv-about-seo .pl-table th[scope="row"] a{color:var(--darkpink);text-decoration:none}
#lv-about-seo .pl-table th[scope="row"] a:hover{text-decoration:underline}
/* جدول‌های داخل مقاله‌ها — روی موبایل افقی اسکرول می‌شوند */
.ar-tbl{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 16px rgba(184,24,89,.06);margin:18px 0}
.ar-tbl table{width:100%;border-collapse:collapse;font-size:14px;min-width:480px}
.ar-tbl th,.ar-tbl td{padding:12px 16px;text-align:right;border-bottom:1px solid var(--line);line-height:1.9;vertical-align:top}
.ar-tbl thead th{background:var(--pale);color:var(--pink);font-size:12.5px;font-weight:700;white-space:nowrap}
.ar-tbl tbody tr:last-child>*{border-bottom:0}
.ar-tbl tbody td:first-child{font-weight:600}
/* مقاله‌های مرتبط روی صفحه‌های پیلار */
.pl-arts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pl-arts a{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;transition:.2s;color:inherit}
.pl-arts a:hover{border-color:#f6c4d9;transform:translateY(-3px);box-shadow:0 12px 26px rgba(184,24,89,.1)}
.pl-arts b{font-size:15.5px;line-height:1.7}
.pl-arts small{color:var(--muted);font-size:12.5px;line-height:1.9;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pl-arts span{margin-top:6px;font-size:12px;color:var(--pink)}
@media(max-width:900px){.pl-arts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pl-arts{grid-template-columns:1fr}}
/* خط «بخشی از راهنمای …» — لینک برگشت خوشه به پیلار */
.lv-parent{margin:8px 0 0;font-size:13px;color:var(--muted)}
/* صورتی روشن روی سفید ۴٫۱۷ می‌داد (حداقل ۴٫۵)؛ صورتی تیره ۶٫۲۳ */
.lv-parent a{color:var(--darkpink);font-weight:600;border-bottom:1px solid #f6c4d9}
.lv-parent a:hover{border-bottom-color:var(--pink)}
/* ─────────────────────────────────────────────────────────────
ظرف‌هایی که هم شبکه‌اند هم اسلایدر.
«خرید بر اساس نیاز» و «برندهای منتخب» در base.css شبکه‌اند
(grid / flex-wrap). وقتی کلاس .sl-track به آن‌ها اضافه شد،
آن قانون‌ها برنده می‌ماندند و محتوا می‌شکست به چند خط — پس
چیزی برای اسلاید کردن نمی‌ماند و دکمه‌ها همیشه خاموش بودند.
اینجا فقط برای همان حالتِ ترکیبی، چیدمان به یک ردیف برمی‌گردد.
بچه‌ها shrink نمی‌شوند تا عرض واقعی‌شان را نگه دارند، وگرنه
flex همه را فشرده می‌کند تا جا شوند و باز اسلاید لازم نمی‌شود.
───────────────────────────────────────────────────────────── */
.sl-track.categories,
.sl-track.tabs{
display:flex;
flex-wrap:nowrap;
grid-template-columns:none;
overflow-x:auto;
scroll-snap-type:x proximity
}
.sl-track.categories>*,
.sl-track.tabs>*{flex:0 0 auto;scroll-snap-align:start}
.sl-track.categories>*{min-width:168px}
@media(max-width:540px){
.sl-track.categories>*{min-width:148px}
}
/* ─────────────────────────────────────────────────────────────
صفحه‌ی پک‌های روتین — ریل افقی
کارت‌های قبلی کلاس rt-card می‌گرفتند (کارت عمودی صفحه‌ی اصلی)
بدون اینکه ساختارش را داشته باشند، و rt-cards هیچ‌وقت تعریف
نشده بود. اینجا طرح خودش را دارد: چون صفحه تمام‌عرض است،
مرحله‌ها به‌جای فهرست عمودی روی یک خط افقی می‌نشینند.
───────────────────────────────────────────────────────────── */
.rtx-pick{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:18px 0 0}
.rtx-pick-l{font-size:12.5px;color:var(--muted);margin-inline-end:4px}
.rtx-wrap{display:grid;gap:22px;margin-top:4px}
.rtx{
display:grid;
grid-template-columns:286px minmax(0,1fr);
background:#fff;
border:1px solid var(--line);
border-radius:22px;
overflow:hidden;
box-shadow:0 1px 2px rgba(184,24,89,.05),0 8px 22px rgba(184,24,89,.07);
transition:box-shadow .22s,border-color .22s,transform .22s;
scroll-margin-top:90px
}
.rtx:hover{border-color:#f6c4d9;box-shadow:0 5px 12px rgba(184,24,89,.1),0 22px 44px rgba(184,24,89,.15);transform:translateY(-3px)}
/* ── پنل رنگی ── */
.rtx-side{position:relative;color:#fff;padding:26px 26px 22px;display:flex;flex-direction:column;overflow:hidden}
.rtx-side:after{content:"";position:absolute;inset-inline-start:-70px;top:-90px;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.13);pointer-events:none}
.rtx-side>*{position:relative;z-index:1}
.rtx-no{
position:absolute;z-index:0;bottom:-26px;inset-inline-start:14px;
font-size:92px;font-weight:800;line-height:1;
color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.3);
pointer-events:none;user-select:none
}
.rtx-side h3{margin:0 0 8px;font-size:19px;line-height:1.7;color:#fff}
.rtx-side h3 a{color:#fff}
.rtx-side h3 a:hover{opacity:.9}
.rtx-side p{margin:0;font-size:12.5px;line-height:1.95;color:rgba(255,255,255,.9)}
.rtx-tags{list-style:none;margin:13px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rtx-tags li{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.34);border-radius:20px;padding:3px 11px;font-size:11.5px}
.rtx-steps-n{margin-top:auto;padding-top:16px;font-size:12px;color:rgba(255,255,255,.85)}
/* ── بدنه ── */
.rtx-body{padding:22px 24px 20px;display:flex;flex-direction:column;min-width:0}
.rtx-rail{
list-style:none;margin:0 0 2px;padding:0 0 4px;
position:relative;
display:flex;gap:10px;
overflow-x:auto;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch
}
/* خط نقطه‌چینی که مرحله‌ها را به هم وصل می‌کند.
خط روی خودِ هر مرحله است نه روی ریل، چون عرض مرحله‌ها ثابت
نیست: روی دسکتاپ کش می‌آیند تا تمام عرض را پر کنند و روی
موبایل عرض ثابت می‌گیرند و ریل می‌لغزد. خطی که از لبه‌ی ریل
حساب می‌شد در هر دو حالت از دایره‌ها جا می‌ماند.
اولی فقط نیمه‌ی داخلی‌اش را دارد و آخری هم همین‌طور، تا خط
از بیرونِ دایره‌های دو سر بیرون نزند. در RTL هم inline-start
سمت راست است، پس همین قاعده بدون تغییر کار می‌کند. */
.rtx-rail>li{position:relative;flex:0 0 auto;width:124px;scroll-snap-align:start}
.rtx-rail>li:before{content:"";position:absolute;z-index:0;top:37px;inset-inline:0;border-top:2px dashed #f0d9e3}
.rtx-rail>li:first-child:before{inset-inline-start:50%}
.rtx-rail>li:last-child:before{inset-inline-end:50%}
.rtx-rail>li:only-child:before{display:none}
.rtx-rail>li>a{position:relative;z-index:1;display:block;text-align:center;color:inherit}
/* روی دسکتاپ مرحله‌ها پهن می‌شوند تا ریل خالی نماند */
@media(min-width:901px){
.rtx-rail{justify-content:space-between}
.rtx-rail>li{flex:1 1 0;width:auto;min-width:112px;max-width:210px}
}
.rtx-ph{
display:grid;place-items:center;
width:76px;height:76px;margin:0 auto;
border-radius:50%;border:3px solid #fff;
background:#fdeef3;
box-shadow:0 5px 14px rgba(60,10,35,.16);
overflow:hidden;
transition:transform .18s,box-shadow .18s
}
.rtx-ph img{width:100%;height:100%;object-fit:cover;display:block}
.rtx-rail>li>a:hover .rtx-ph{transform:translateY(-3px);box-shadow:0 9px 20px rgba(60,10,35,.24)}
.rtx-dot{
display:grid;place-items:center;
width:22px;height:22px;margin:-13px auto 7px;
position:relative;
border-radius:50%;background:var(--pink);color:#fff;
font-size:11px;font-weight:700;
border:2px solid #fff
}
.rtx-rail b{display:block;font-size:12.5px;font-weight:700;line-height:1.7}
.rtx-rail small{display:block;font-size:11px;color:var(--muted);line-height:1.75;margin-top:2px}
.rtx-rail em{display:block;font-style:normal;font-size:10.5px;color:#a6949c;margin-top:2px}
.rtx-when{display:inline-block;margin-top:6px;font-size:10.5px;border-radius:20px;padding:2px 9px;white-space:nowrap}
.rtx-when.w-am{background:#fff5e4;color:#9a6a12}
.rtx-when.w-pm{background:#eceafa;color:#4a3f8f}
.rtx-when.w-both{background:var(--pale);color:var(--pink)}
/* ── «اولین اثر» ── */
.rtx-first{
margin:14px 0 0;padding:11px 14px;
background:#fbf6f8;border-radius:12px;
border-inline-start:3px solid #f3c9da;
font-size:12.5px;line-height:2;color:var(--muted)
}
.rtx-first b{display:block;color:var(--pink);font-size:12px;margin-bottom:2px}
/* ── قیمت و خرید ── */
.rtx-buy{
margin-top:auto;padding-top:15px;
display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:12px
}
.rtx-money{display:flex;align-items:baseline;flex-wrap:wrap;gap:9px}
.rtx-money b{font-size:19px}
.rtx-money i{font-style:normal;font-size:11px;font-weight:400}
.rtx-money del{font-size:12.5px;color:#a6949c}
.rtx-off{background:#eef8f1;color:#1a7f37;font-size:11.5px;border-radius:20px;padding:4px 11px;white-space:nowrap}
.rtx-act{display:flex;align-items:center;gap:14px}
.rtx-more{font-size:12.5px;color:var(--pink);border-bottom:1px solid transparent;transition:.16s;white-space:nowrap}
.rtx-more:hover{border-bottom-color:var(--pink)}
.rtx-cta{border-radius:10px;justify-content:center;white-space:nowrap}
/* ── تبلت: پنل رنگی می‌رود بالا ── */
@media(max-width:900px){
.rtx{grid-template-columns:1fr}
.rtx-side{padding:20px 22px 18px}
.rtx-no{bottom:auto;top:12px;inset-inline-start:auto;inset-inline-end:16px;font-size:64px}
.rtx-side h3{padding-inline-end:70px}
.rtx-steps-n{padding-top:12px}
}
/* ── موبایل ── */
@media(max-width:640px){
.rtx-wrap{gap:16px}
.rtx-body{padding:18px 16px 16px}
.rtx-rail{gap:8px}
.rtx-rail>li{width:108px}
.rtx-ph{width:66px;height:66px}
.rtx-rail:before{top:33px;inset-inline:52px}
.rtx-buy{flex-direction:column;align-items:stretch}
.rtx-act{flex-direction:column-reverse;align-items:stretch;gap:9px}
.rtx-more{text-align:center}
}
/* ─────────────────────────────────────────────────────────────
مگا منو — ستون‌های چنددسته‌ای و تصویر پنل ویژه
حالا هر ستون می‌تواند بیش از یک دسته داشته باشد (تا گروه‌های
پنج و شش‌دسته‌ای سطر دوم ناقص نسازند)، پس دسته‌ی دوم به بعد
باید از قبلی فاصله بگیرد.
.lvmega-feat .m از اول در CSS بود ولی مارک‌آپ وردپرس نداشتش.
حالا که عکس محصول داخلش می‌آید، قاعده‌ی جاگیری هم لازم دارد:
عکس محصول پس‌زمینه‌ی سفید دارد، پس multiply آن را روی زمینه‌ی
صورتی قاب می‌نشاند.
───────────────────────────────────────────────────────────── */
.lvmega-col h4+ul+h4{margin-top:20px}
.lvmega-feat .m{display:grid;place-items:center;padding:14px}
.lvmega-feat .m img{width:100%;height:100%;max-height:160px;object-fit:contain;mix-blend-mode:multiply}
/* ─────────────────────────────────────────────────────────────
دو اصلاح کنتراست داخل جعبه‌ی سفید خرید
───────────────────────────────────────────────────────────── */
/* قیمت خط‌خورده خاکستری‌اش زیادی روشن بود (۲٫۸۶ → ۴٫۹۸) */
.rt-hero-price del{color:#7f6a75}
/* برچسب بالای عنوان («پک روتین ۳۰ مرحله») صورتیِ روشن روی صورتیِ
خیلی روشن بود: ۳٫۸۸. با صورتی تیره‌ی برند می‌شود ۵٫۹. */
.rt-kicker{color:var(--darkpink)}
/* دکمه‌ی خرید: صورتی برند روی سفید کنتراست ۴٫۱۷ می‌داد؛
یک پله تیره‌تر، هم خواناتر است هم با دکمه‌های دیگر سایت یکی. */
.rt-hero-cta{background:var(--darkpink);border-color:var(--darkpink)}
.rt-hero-cta:hover{background:#9c1049;border-color:#9c1049}
/* ─────────────────────────────────────────────────────────────
فهرست پک‌ها روی موبایل — خوانایی ریل محصول‌ها
─────────────────────────────────────────────────────────────
طرح ایستای قفل‌شده برای این صفحه کارت ساده داشت: عکس، نام، یک
خط، قیمت. نسخه‌ی وردپرس عمداً بیشتر نشان می‌دهد — خودِ محصول‌های
هر مرحله، با شماره و «صبح و شب». این برای فروش بهتر است، چون
خریدار قبل از کلیک می‌بیند داخل پک چیست.
ولی روی موبایل هر قلم ۱۲۴ پیکسل پهنا داشت و نام محصول در سه چهار
سطر می‌شکست و ته‌اش بریده می‌شد. یعنی همان اطلاعاتِ اضافه که دلیل
این طراحی بود، خوانده نمی‌شد.
سه چیز عوض شد: قلم‌ها پهن‌تر، اندازه‌ی فونت یک پله بالاتر، و دو
رنگی که زیر حد خوانایی بودند. */
/* خاکستری ۲٫۸۶ بود روی سفید (حداقل لازم ۴٫۵) */
.rtx-rail em{color:#7f6a75}
/* صورتی روشن روی صورتی خیلی روشن: ۳٫۸۸ */
.rtx-when.w-both{color:var(--darkpink)}
@media (max-width:560px){
.rtx-rail>li{width:152px}
.rtx-rail b{font-size:13.5px}
.rtx-rail small{font-size:12px}
.rtx-rail em{font-size:11.5px}
.rtx-when{font-size:11.5px;padding:3px 10px}
.rtx-side p{font-size:13.5px}
.rtx-side h3{font-size:20px}
}
/* ── شش رنگ دیگر در همین صفحه که زیر حد خوانایی بودند ──
*
* همه یک ریشه دارند: صورتیِ روشن برند (--pink) روی سفید نسبت ۴٫۱۷
* می‌دهد و حداقل لازم ۴٫۵ است. چه متن صورتی روی زمینه‌ی سفید باشد
* چه متن سفید روی زمینه‌ی صورتی، همان عدد درمی‌آید. صورتیِ تیره‌ی
* برند (--darkpink) جایش می‌نشیند و به ۶٫۲ می‌رسد، بدون اینکه رنگ
* برند عوض شود. */
.rtx-dot{background:var(--darkpink)} /* شماره‌ی مرحله — ۴٫۱۷ */
.rtx-first b{color:var(--darkpink)} /* «اولین اثر» — ۳٫۹ */
.rtx-more{color:var(--darkpink)} /* «راهنمای کامل روتین» — ۴٫۱۷ */
.rtx-more:hover{border-bottom-color:var(--darkpink)}
.rtx-money del{color:#7f6a75} /* قیمت خط‌خورده — ۲٫۸۶ */
.rtx-when.w-am{color:#8a5c08} /* «صبح» — ۴٫۳۷ */
/* دکمه‌ی «افزودن پک به سبد» — سفید روی صورتیِ روشن ۴٫۱۷ می‌داد.
* همان کاری که برای .rt-hero-cta شد. (.btn سراسری عمداً دست نخورد؛
* آن یک تغییر در کل سایت است و جایش در جاروی کنتراست سراسری است.) */
.rtx-cta{background:var(--darkpink);border-color:var(--darkpink)}
.rtx-cta:hover{background:#9c1049;border-color:#9c1049}
/* ─────────────────────────────────────────────────────────────
ستون فیلتر — جست‌وجوی برند و بازه‌ی قیمت
─────────────────────────────────────────────────────────────
ستون قبلاً فقط ۲۰ برندِ پرمحصول را نشان می‌داد؛ ۹۴ برند دیگر از
این ستون عملاً وجود نداشتند. حالا هر ۱۱۴ تا در HTML هستند، در
قابی که اسکرول می‌شود، با جعبه‌ی جست‌وجو بالایش. */
.f-group--find h3{display:flex;align-items:baseline;gap:7px}
.f-group--find h3 small{font-size:11px;font-weight:400;color:var(--muted)}
.f-find{
width:100%;margin:0 0 10px;padding:8px 11px;
border:1px solid var(--line);border-radius:9px;
background:#fff;font-size:12.5px;color:var(--ink)
}
.f-find::placeholder{color:#a08f98}
.f-find:focus{border-color:var(--darkpink);outline:none}
/* ارتفاع سقف دارد وگرنه ۱۱۴ برند کل ستون را می‌بلعد و فیلتر قیمت
زیرش گم می‌شود. */
.f-scroll{
max-height:244px;overflow-y:auto;overscroll-behavior:contain;
padding:2px 2px 2px 0;
display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;
transition:max-height .18s
}
.f-scroll.is-short{max-height:none;overflow:visible}
.f-scroll::-webkit-scrollbar{width:7px}
.f-scroll::-webkit-scrollbar-thumb{background:#edd9e3;border-radius:7px}
.f-scroll::-webkit-scrollbar-thumb:hover{background:#e0bccd}
.f-scroll::-webkit-scrollbar-track{background:transparent}
.f-none{width:100%;margin:6px 2px;font-size:12.5px;color:var(--muted)}
/* ── بازه‌ی قیمت دلخواه ── */
.f-price{display:flex;align-items:center;gap:6px;margin-top:12px;flex-wrap:wrap}
.f-price input{
flex:1 1 0;min-width:0;width:100%;
padding:8px 9px;border:1px solid var(--line);border-radius:9px;
background:#fff;font-size:12.5px;color:var(--ink);text-align:center
}
.f-price input::placeholder{color:#a08f98}
.f-price input:focus{border-color:var(--darkpink);outline:none}
/* فلش‌های بالا-پایین عدد در این عرض فقط جا می‌گیرند */
.f-price input::-webkit-outer-spin-button,
.f-price input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.f-price input[type=number]{-moz-appearance:textfield}
.f-price span{font-size:12px;color:var(--muted);flex-shrink:0}
.f-price button{
flex:0 0 auto;padding:8px 14px;border:0;border-radius:9px;
background:var(--darkpink);color:#fff;font-size:12.5px
}
.f-price button:hover{background:#9c1049}
/* ─────────────────────────────────────────────────────────────
دکمه‌های کارت، نمای فهرستی، نمایش سریع و مقایسه
───────────────────────────────────────────────────────────── */
/* ستون دکمه‌ها روی عکس. قلب از قبل بود؛ این دو زیرش می‌نشینند.
روی موبایل همیشه دیده می‌شوند، چون hover وجود ندارد. */
.p-act{
position:absolute;left:12px;z-index:2;
width:36px;height:36px;padding:0;border:0;border-radius:50%;
background:linear-gradient(145deg,#fff 0%,#fdeef4 55%,#f9dde9 100%);
box-shadow:0 2px 8px rgba(184,24,89,.16),inset 0 1px 0 rgba(255,255,255,.9);
display:grid;place-items:center;
opacity:0;transform:translateY(-4px);
transition:transform .16s,box-shadow .16s,background .18s,opacity .18s
}
.p-cmp{top:54px}
.p-qv{top:96px}
.product:hover .p-act,.product:focus-within .p-act{opacity:1;transform:none}
.p-act:hover{transform:scale(1.08);box-shadow:0 5px 15px rgba(184,24,89,.26)}
.p-act svg{width:17px;height:17px;fill:none;stroke:var(--darkpink);stroke-width:1.9}
.p-act.on{background:linear-gradient(145deg,#ff8dba 0%,#e92878 60%,#c31a63 100%);box-shadow:0 5px 15px rgba(184,24,89,.34)}
.p-act.on svg{stroke:#fff}
/* لمسی: hover نداریم، پس همیشه دیده شوند */
@media (hover:none){
.p-act{opacity:1;transform:none}
}
/* ── تغییر نما ── */
.tb-view{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;flex-shrink:0}
.tb-view a{display:grid;place-items:center;width:34px;height:34px;background:#fff;color:var(--muted)}
.tb-view a+a{border-inline-start:1px solid var(--line)}
.tb-view a:hover{background:var(--pale);color:var(--darkpink)}
.tb-view a.on{background:var(--darkpink);color:#fff}
.tb-view svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
/* ── نمای فهرستی ──
یک ستون، عکس کنار متن. چکیده فقط اینجا دیده می‌شود — همان چیزی
که این نما را به‌دردبخور می‌کند. */
.pg-list{grid-template-columns:1fr;gap:14px}
.pg-list .product{
display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:start;
border:1px solid var(--line);border-radius:14px;padding:12px
}
.pg-list .product-image{aspect-ratio:1/1;border-radius:11px}
.pg-list .product-image img{padding:12px}
.pg-list .product-info{padding:2px 0}
.pg-list .product h3{min-height:0;font-size:17px}
.pg-list .add{width:auto;display:inline-flex;padding:8px 20px;margin-top:14px}
.pg-list .p-act{opacity:1;transform:none}
@media (max-width:540px){
.pg-list .product{grid-template-columns:100px 1fr;gap:12px;padding:10px}
.pg-list .product h3{font-size:14.5px}
}
/* ── نمایش سریع ── */
.qv-sheet{max-width:720px;width:min(720px,94vw)}
.qv{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}
.qv-img{display:block;border-radius:14px;overflow:hidden;background:#fcf4f7;aspect-ratio:1/1.05}
.qv-img img{width:100%;height:100%;object-fit:contain;padding:18px;mix-blend-mode:multiply}
.qv-brand{display:inline-block;font-size:12.5px;color:var(--darkpink);margin-bottom:4px}
.qv-body h2{font-size:21px;line-height:1.75;margin:0 0 10px}
.qv-desc{font-size:13.5px;line-height:2;color:var(--muted);margin:0 0 16px}
.qv-price{display:flex;align-items:baseline;gap:7px;margin-bottom:18px}
.qv-price b{font-size:23px}
.qv-price small{font-size:12px;color:var(--muted)}
.qv-act{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.qv-add{background:var(--darkpink);border-color:var(--darkpink);border-radius:10px}
.qv-add:hover{background:#9c1049}
.qv-more{font-size:13px;color:var(--darkpink);border-bottom:1px solid #f3c9da}
@media (max-width:620px){
.qv{grid-template-columns:1fr;gap:16px}
.qv-img{max-width:190px;margin-inline:auto}
}
/* ── نوار شناور مقایسه ── */
.cmp-bar{
position:fixed;inset-inline:0;bottom:0;z-index:60;
background:#fff;border-top:1px solid var(--line);
box-shadow:0 -6px 24px rgba(60,10,35,.12)
}
.cmp-bar__in{
width:min(1220px,92%);margin:auto;padding:12px 0;
display:flex;align-items:center;gap:14px;flex-wrap:wrap
}
.cmp-bar__n{font-size:13px;font-weight:600;flex-shrink:0}
.cmp-bar__list{list-style:none;display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0;flex:1;min-width:0}
.cmp-bar__list li{
display:inline-flex;align-items:center;gap:6px;
background:var(--pale);border-radius:20px;padding:4px 6px 4px 12px;
font-size:12px;max-width:230px
}
.cmp-bar__list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-bar__list button{
border:0;background:#fff;color:var(--darkpink);
width:19px;height:19px;border-radius:50%;line-height:1;flex-shrink:0;font-size:14px
}
.cmp-bar__go{background:var(--darkpink);border-color:var(--darkpink);border-radius:10px;padding:9px 20px;flex-shrink:0}
.cmp-bar__go:hover{background:#9c1049}
.cmp-bar__clear{border:0;background:none;color:var(--muted);font-size:12.5px;flex-shrink:0}
.cmp-bar__clear:hover{color:var(--darkpink)}
/* نوار پایین موبایل زیرش نماند */
@media (max-width:800px){ .cmp-bar{bottom:58px} }
/* ── جدول مقایسه ── */
.cmp-note,.cmp-empty{font-size:13.5px;color:var(--muted);max-width:640px;line-height:2}
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;margin-top:18px}
.cmp{width:100%;border-collapse:collapse;background:#fff;min-width:560px}
.cmp th,.cmp td{padding:13px 15px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top;font-size:13.5px;line-height:2}
/* ستون نام ویژگی چسبان می‌ماند، وگرنه وسط اسکرول افقی معلوم نیست
کدام عدد مال کدام ویژگی است. */
.cmp tbody th{
position:sticky;inset-inline-start:0;background:#fff8fa;
font-weight:600;white-space:nowrap;width:1%;z-index:1
}
.cmp thead th{background:#fff;border-bottom:2px solid var(--line);min-width:190px}
.cmp-th{display:block;margin-bottom:10px}
.cmp-th img{width:100%;max-width:120px;aspect-ratio:1/1;object-fit:contain;background:#fcf4f7;border-radius:11px;padding:10px;mix-blend-mode:multiply;margin-bottom:8px}
.cmp-th b{display:block;font-size:14px;font-weight:600;line-height:1.8}
.cmp-th:hover b{color:var(--darkpink)}
.cmp-add{background:var(--darkpink);border-color:var(--darkpink);border-radius:9px;padding:7px 14px;font-size:12.5px;width:100%}
.cmp-add:hover{background:#9c1049}
.cmp-price{font-weight:700;font-size:15px}
.cmp-foot{margin-top:16px;font-size:13.5px}
.cmp-foot a{color:var(--darkpink);border-bottom:1px solid #f3c9da}
/* ── دو اصلاح بعد از تست روی عرض ۳۶۱ پیکسل ──
*
* ۱) .shop-layout .product-grid در base.css دو کلاس دارد و بر
* .pg-list که یک کلاس است می‌چربد. نمای فهرستی دو ستونه
* می‌ماند. با سه کلاس حل می‌شود، بدون !important.
*
* ۲) نوار ابزار سه چیز دارد: تغییر نما، جست‌وجو و مرتب‌سازی.
* روی گوشی در یک ردیف جا نمی‌شوند و صفحه افقی سرریز می‌کرد —
* که روی موبایل یعنی کل صفحه کمی می‌لغزد. */
.shop-layout .product-grid.pg-list,
.product-grid.pg-list{grid-template-columns:1fr}
.shop-toolbar{flex-wrap:wrap}
.tb-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;max-width:100%}
.tb-right .shop-q{flex:1 1 150px;min-width:0}
.tb-right .shop-q input{min-width:0;width:100%}
.tb-right .woocommerce-ordering{flex:0 1 auto;min-width:0}
.tb-right select.orderby{max-width:100%}
@media (max-width:560px){
.tb-right{width:100%;order:2}
.tb-view{order:-1}
}
/* نوار مقایسه شناور است و روی آخرین ردیف محصول‌ها می‌نشست.
کلاس روی body را shop-card.js می‌گذارد و برمی‌دارد. */
body.has-cmp-bar{padding-bottom:92px}
@media (max-width:800px){ body.has-cmp-bar{padding-bottom:150px} }
/* ── صفحه‌بندی: خلاصه و دکمه‌های پررنگ‌تر ──
*
* تا امروز روی موبایل کلاً پنهان بود و خریدار فکر می‌کرد دستهٔ
* ۹۹تایی فقط ۲۴ محصول دارد. حالا دیده می‌شود، و این خط هم می‌گوید
* کجای فهرست است. */
.pg-sum{margin:34px 0 0;text-align:center;font-size:13.5px;color:var(--muted)}
.pg-sum b{color:var(--ink);font-weight:600}
.woocommerce-pagination ul{margin-top:14px}
.woocommerce-pagination a:hover{background:var(--pale);border-color:#f0cada;color:var(--darkpink)}
/* صورتی روشن روی سفید ۴٫۱۷ می‌داد؛ صفحهٔ فعلی باید خوانا باشد */
.woocommerce-pagination .current{background:var(--darkpink);border-color:var(--darkpink)}
@media (max-width:540px){
.woocommerce-pagination a,.woocommerce-pagination span{min-width:34px;height:34px;font-size:13px}
}
/* ─────────────────────────────────────────────────────────────
ریل دسته‌ها، بالای شبکهٔ فروشگاه
─────────────────────────────────────────────────────────────
روی موبایل افقی اسکرول می‌شود — همان قفسهٔ جلوی مغازه. روی
دسکتاپ می‌پیچد و همه با هم دیده می‌شوند. */
.sh-cats{
display:flex;gap:12px;margin:0 0 26px;
overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x proximity;
padding:2px 2px 10px;
-webkit-overflow-scrolling:touch
}
.sh-cats::-webkit-scrollbar{height:6px}
.sh-cats::-webkit-scrollbar-thumb{background:#edd9e3;border-radius:6px}
.sh-cats::-webkit-scrollbar-track{background:transparent}
.sh-cat{
flex:0 0 auto;width:104px;scroll-snap-align:start;
display:flex;flex-direction:column;align-items:center;gap:7px;
text-align:center;color:inherit;
padding:12px 8px 13px;border-radius:15px;
border:1px solid var(--line);background:#fff;
transition:transform .16s,box-shadow .16s,border-color .16s
}
.sh-cat:hover{transform:translateY(-3px);box-shadow:0 9px 22px rgba(184,24,89,.12);border-color:#f0cada}
.sh-cat.on{border-color:var(--darkpink);background:var(--pale)}
.sh-cat img,.sh-cat-ph{
width:58px;height:58px;border-radius:50%;
background:#fcf4f7;object-fit:contain;padding:7px;
mix-blend-mode:multiply;flex-shrink:0
}
.sh-cat-ph{display:grid;place-items:center;mix-blend-mode:normal}
.sh-cat-ph svg{width:22px;height:22px;fill:none;stroke:var(--darkpink);stroke-width:1.7}
.sh-cat b{font-size:12.5px;font-weight:600;line-height:1.65;display:block}
.sh-cat small{font-size:10.5px;color:var(--muted)}
.sh-cat.on b{color:var(--darkpink)}
@media (max-width:540px){
.sh-cats{gap:9px;margin-bottom:20px}
.sh-cat{width:92px;padding:10px 6px 11px}
.sh-cat img,.sh-cat-ph{width:50px;height:50px}
.sh-cat b{font-size:11.5px}
}
/* ── برچسب دسته کنار برند روی کارت ── */
.product .brand{display:flex;align-items:center;gap:5px;flex-wrap:wrap;line-height:1.7}
.product .brand i{font-style:normal;color:#cdb8c2}
.product .brand em{font-style:normal;color:var(--muted)}
/* ── ذره‌بین جست‌وجوی فروشگاه، حالا دکمه است ──
*
* قبلاً svg خالی بود؛ روی گوشی لمسش هیچ کاری نمی‌کرد و خریدار
* فکر می‌کرد جست‌وجو خراب است. */
.tb-right .shop-q{display:flex;align-items:center;gap:4px;padding:2px 4px 2px 12px}
.tb-right .shop-q input{background:transparent;border:0;padding:7px 0;font-size:13px;color:var(--ink)}
.tb-right .shop-q input:focus{outline:none}
.tb-right .shop-q input::placeholder{color:#a08f98}
.tb-right .shop-q:focus-within{border-color:var(--darkpink);background:#fff}
.tb-right .shop-q button{
flex:0 0 auto;display:grid;place-items:center;
width:30px;height:30px;padding:0;border:0;border-radius:50%;
background:var(--darkpink);color:#fff;transition:background .15s
}
.tb-right .shop-q button:hover{background:#9c1049}
.tb-right .shop-q button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
/* راه بیرون از جست‌وجوی برند، وقتی چیزی پیدا نشد */
.f-none-go{display:block;margin-top:6px;color:var(--darkpink);border-bottom:1px solid #f3c9da;width:fit-content}
/* فیلتری که با انتخاب فعلی نتیجه‌ای ندارد.
پاک نمی‌شود — خریدار باید بداند آن دسته هست — ولی کلیک‌پذیر نیست،
چون کلیک روی چیزی که به صفحه‌ی خالی می‌رسد بدتر از ندیدنش است. */
.f-chip.f-dead{opacity:.42;pointer-events:none;background:#fafafa;border-style:dashed}
.f-chip.f-dead i{opacity:.7}
/* ─────────────────────────────────────────────────────────────
صفحهٔ محصول: تب‌بندی، نوار چسبان، گالری
─────────────────────────────────────────────────────────────
صفحه ۶۳۰۰ پیکسل بود؛ شش بخش پشت سر هم. تب‌بندی آن را جمع
می‌کند، ولی بدون جاوااسکریپت هر شش بخش سر جایشان می‌مانند —
نوار تب hidden است و اسکریپت نشانش می‌دهد. */
.pdp-tabs{
display:flex;gap:6px;overflow-x:auto;
border-bottom:1px solid var(--line);
margin:34px 0 0;padding-bottom:0;
-webkit-overflow-scrolling:touch
}
.pdp-tabs::-webkit-scrollbar{height:0}
.pdp-tab{
flex:0 0 auto;border:0;background:none;
padding:12px 17px;font-size:14px;color:var(--muted);
border-bottom:2px solid transparent;margin-bottom:-1px;
white-space:nowrap;transition:color .15s,border-color .15s
}
.pdp-tab:hover{color:var(--darkpink)}
.pdp-tab.on{color:var(--darkpink);font-weight:600;border-bottom-color:var(--darkpink)}
/* وقتی تب‌ها فعال‌اند، هر پنل خط جداکننده‌ی خودش را نمی‌خواهد */
.pdp-content[data-static="0"] .pdp-sec{border-top:0;padding-top:26px}
.pdp-content[data-static="0"] .pdp-sec>h2{
font-size:19px;margin-top:0
}
/* ── نوار خرید چسبان ──
با CSS پنهان است، نه با hidden: اگر جاوااسکریپت نباشد هیچ‌وقت
ظاهر نمی‌شود و چیزی هم خراب نمی‌کند. */
.pdp-sticky{
position:fixed;inset-inline:0;bottom:0;z-index:55;
background:#fff;border-top:1px solid var(--line);
box-shadow:0 -6px 24px rgba(60,10,35,.13);
transform:translateY(100%);transition:transform .22s;
pointer-events:none
}
.pdp-sticky.on{transform:none;pointer-events:auto}
.pdp-sticky .wrap{display:flex;align-items:center;gap:14px;padding:11px 0}
.pdp-sticky-name{font-size:13.5px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdp-sticky-price{font-size:12px;color:var(--muted);flex-shrink:0;white-space:nowrap}
.pdp-sticky-price b{font-size:16px;color:var(--ink)}
.pdp-sticky-cta{
flex-shrink:0;border-radius:10px;padding:10px 22px;
background:var(--darkpink);border-color:var(--darkpink)
}
.pdp-sticky-cta:hover{background:#9c1049}
@media (max-width:800px){
/* قبلاً اینجا ۵۸ پیکسل برای نوار ناوبری پایین رزرو شده بود —
نواری که آن موقع ساخته نشده بود، و حالا که ساخته شد عمداً
در صفحهٔ محصول چاپ نمی‌شود. پس آن فاصله بی‌صاحب بود و
نوار خرید را بی‌دلیل از لبه جدا می‌کرد. */
.pdp-sticky{bottom:0}
.pdp-sticky-name{display:none}
.pdp-sticky .wrap{gap:10px;justify-content:space-between}
.pdp-sticky-cta{flex:1;justify-content:center}
}
/* ── گالری: امروز خروجی ندارد، فردا که عکس دوم آمد خودش ظاهر می‌شود ── */
.pdp-thumbs{display:flex;gap:9px;margin-top:13px;flex-wrap:wrap}
.pdp-thumb{
width:62px;height:62px;padding:5px;border-radius:11px;
border:1px solid var(--line);background:#fcf4f7;
display:grid;place-items:center;transition:border-color .15s,transform .15s
}
.pdp-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.pdp-thumb:hover{border-color:#f0cada;transform:translateY(-2px)}
.pdp-thumb.on{border-color:var(--darkpink);border-width:2px}
/* دکمه‌ی افزودن، وقتی منتظر پاسخ است */
.add.is-busy,.rtx-cta.is-busy,.cmp-add.is-busy{opacity:.6;pointer-events:none}
/* ─────────────────────────────────────────────────────────────
سبد هدر — یک دکمه‌ی صورتی، با آیکون و مبلغ روی خودش
─────────────────────────────────────────────────────────────
صورتیِ تیره‌ی برند انتخاب شد نه صورتی روشن: سفید روی --pink
نسبت ۴٫۱۷ می‌دهد و حداقل لازم ۴٫۵ است. روی --darkpink می‌شود
۶٫۲۳. همان درسی که امروز چند بار تکرار شد. */
.cart-btn{
display:inline-flex;align-items:center;gap:9px;
background:var(--darkpink);color:#fff;
border-radius:24px;padding:6px 16px 6px 7px;
margin-inline-start:4px;
box-shadow:0 2px 8px rgba(184,24,89,.22);
transition:background .16s,transform .16s,box-shadow .16s
}
.cart-btn:hover{
background:#9c1049;transform:translateY(-1px);
box-shadow:0 6px 16px rgba(184,24,89,.3)
}
.cart-btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(184,24,89,.22)}
.cart-btn:focus-visible{outline:3px solid #7e2350;outline-offset:3px}
/* آیکون داخل دکمه: دایره‌ی روشن تا از زمینه‌ی صورتی جدا شود */
.cart-btn .cart-icon{
flex-shrink:0;width:32px;height:32px;
background:rgba(255,255,255,.17);border-radius:50%;
display:inline-flex;align-items:center;justify-content:center
}
.cart-btn .cart-icon svg{width:18px;height:18px;stroke:#fff}
/* شمارنده: برعکس — سفید با عدد صورتی، تا روی دکمه‌ی صورتی دیده شود */
.cart-btn .cart-icon #cart{
position:absolute;top:-3px;left:-5px;
background:#fff;color:var(--darkpink);
font-size:10px;font-weight:700;
width:18px;height:18px;line-height:18px;text-align:center;
border-radius:50%;box-shadow:0 1px 3px rgba(60,10,35,.3)
}
.cart-btn-txt{
display:flex;flex-direction:column;justify-content:center;line-height:1.45;
font-size:11px;color:rgba(255,255,255,.82);white-space:nowrap;
/* جای دو خط همیشه رزرو است، حتی وقتی خط مبلغ نیامده.
بدون این، دکمه با افتادن اولین کالا در سبد از ۴۴ به ۴۷
می‌پرید و کل نوار هدر یک تکان می‌خورد. عدد از روی همان
دو فونت حساب می‌شود تا اگر اندازه‌شان عوض شد خودش برود. */
min-height:calc((11px + 13px) * 1.45)
}
.cart-btn-txt b{font-size:13px;font-weight:700;color:#fff}
/* سبد خالی: همان دکمه، همان رنگ، فقط یک خط.
*
* نسخهٔ قبلی در حالت خالی کم‌رنگ می‌شد تا «داد نزند»، ولی
* نتیجه‌اش یک جعبهٔ بی‌رنگ کنار بقیهٔ هدر بود که نه دعوت
* می‌کرد نه زیبا بود. حالا همیشه صورتی است.
*
* خط دوم فقط وقتی می‌آید که حرفی برای گفتن دارد — یعنی
* مبلغ. در حالت خالی یک کلمهٔ دعوت امتحان شد و کنار رفت:
* «شروع کن» حالت امری داشت و «سفارش» اسمی کنار اسم بود
* («سبد خرید / سفارش») که با «پیگیری سفارش» نوار بالا هم
* تصادم می‌کرد. دکمه در حالت خالی همان «سبد خرید» است و
* بس. شمارندهٔ صفر هم پنهان می‌شود — صفر چیزی نمی‌گوید. */
.cart-btn:not(.has) .cart-icon #cart,
.cart-btn:not(.has) .cart-btn-txt b{display:none}
/* ── موبایل: دکمه می‌ماند، فقط «سبد خرید» حذف می‌شود ──
*
* نسخهٔ اول روی گوشی کل دکمه را به یک آیکون ساده تبدیل می‌کرد و
* مبلغ پنهان می‌شد. ولی مبلغ دقیقاً همان چیزی است که روی سایتی با
* آستانهٔ ارسال رایگانِ دو میلیون تصمیم می‌سازد: خریدار «۱٬۸۰۰٬۰۰۰»
* را می‌بیند و خودش یکی دیگر برمی‌دارد. پنهان‌کردنش روی گوشی —
* جایی که بیشتر خریدارها هستند — یعنی برداشتن همان اهرم.
*
* پس برچسب «سبد خرید» می‌رود و مبلغ می‌ماند. جایش هم از برداشتن
* آیکون علاقه‌مندی از هدر آمد (به منوی موبایل منتقل شد). */
@media (max-width:980px){
.cart-btn{padding:3px 9px 3px 3px;gap:4px;margin-inline-start:0}
.cart-btn-txt{font-size:0;line-height:1;min-height:0} /* «سبد خرید» می‌رود */
.cart-btn-txt b{font-size:11.5px;line-height:1.3;white-space:nowrap}
/* سبد خالی روی گوشی هیچ متنی ندارد — نه برچسب، نه مبلغ.
با padding نامتقارنِ حالتِ پر، قرص لنگ می‌شد و ۴ پیکسل
فاصلهٔ بی‌مصرف کنار آیکون می‌ماند. اینجا گرد و متقارن است. */
.cart-btn:not(.has){padding:3px;gap:0}
.actions{gap:0}
/* دو آیکون به منوی موبایل سپرده شدند تا مبلغ سبد جا شود.
هر دو از قبل در آن منو هستند — چیزی از دست نمی‌رود.
ماندنی‌ها: منو، سبد (با مبلغ)، جست‌وجو، لوگو. */
.wish-icon{display:none}
/* مقایسه روی گوشی در نوار پایین است؛ اینجا تکرار می‌شد */
.cmp-icon{display:none}
.actions .icon-btn[aria-label="حساب کاربری"]{display:none}
}
/* در باریک‌ترین حالت لوگو باز هم کوتاه می‌آید تا مبلغ بماند.
مبلغ مهم‌تر از اندازهٔ لوگوست: همان است که خریدار را به
«یکی دیگر بردارم تا ارسال رایگان شود» می‌رساند. */
@media (max-width:345px){
.cart-btn-txt b{font-size:11px}
}
/* زیر ۳۰۰ دیگر هیچ جایی نیست؛ به آیکون تنها برمی‌گردد. */
@media (max-width:300px){
.cart-btn-txt{display:none}
.cart-btn{padding:4px;gap:0}
.cart-btn,.cart-btn:not(.has){box-shadow:none;border:0;background:transparent}
.cart-btn .cart-icon{background:transparent}
.cart-btn .cart-icon svg,.cart-btn:not(.has) .cart-icon svg{stroke:currentColor}
.cart-btn .cart-icon #cart,.cart-btn:not(.has) .cart-icon #cart{background:var(--darkpink);color:#fff}
}
/* ── هدف لمس روی موبایل ──
*
* آیکون‌های هدر ۳۸×۴۰ بودند. استاندارد ۴۴×۴۴ است و دلیلش نظری
* نیست: انگشت شست روی گوشی حدود همین اندازه دقت دارد. هر بار که
* کاربر سبد را بزند و خطا برود، یک قدم از خرید دور می‌شود.
*
* فضای اشغالی عوض نمی‌شود — padding منفی ندارد، فقط خود دکمه
* بزرگ‌تر می‌شود و آیکون همان‌جا وسط می‌ماند. */
@media (max-width:800px){
.actions .icon-btn,
.cart-btn .cart-icon{width:44px;height:44px}
.actions{gap:0}
/* ── اندازهٔ لوگو روی گوشی ──
*
* قبلاً چهار پلهٔ ثابت داشت (۱۲۴ / ۱۰۶ / ۸۴ / ۵۶) و هر پله
* برای تنگ‌ترین عرضِ ممکنِ آن بازه حساب شده بود، با فرض سبدِ
* پر. نتیجه این شد که روی گوشی‌های واقعی لوگو خیلی ریزتر از
* جایی بود که داشت: در ۳۶۰ جا برای ۱۱۵ پیکسل بود و ۸۴ نشان
* می‌داد، در ۳۲۰ جا برای ۸۰ بود و ۵۶ نشان می‌داد.
*
* عددهای تازه از اندازه‌گیری درآمده‌اند، نه از حدس: در هر
* بازه، فضای آزاد در باریک‌ترین عرضِ واقعیِ همان بازه با سبد
* پر، منهای چند پیکسل برای مبلغ‌های هشت‌رقمی.
*
* ۱) width:100% با سقف max-width گذاشته شده نه width ثابت، تا
* اگر روزی نوار تنگ‌تر شد تصویر بتواند تابع قاب باشد. توجه:
* در تستِ فشار، خودِ لوگو کوتاه نیامد — این فقط یک الگوی امنِ
* تصویر است، نه تضمینِ جاشدن. تضمین از خود عددهاست.
*
* ۲) تلهٔ اندازه‌گیری: در صفحهٔ راست‌چین، scrollWidth سرریز از
* سمت راست را نشان نمی‌دهد. یک بار همین باعث شد «سرریز صفر»
* گزارش شود در حالی که لبهٔ لوگو ۲۸ پیکسل بیرونِ صفحه بود.
* سنجهٔ درست، مقایسهٔ getBoundingClientRect هر عنصر با بازهٔ
* ۰ تا innerWidth است. */
.logo{min-width:0}
.logo .brand-logo{width:100%;max-width:150px;height:auto}
}
/* دو المان تزئینی که از لبه‌ی صفحه بیرون می‌زدند و روی موبایل
چهار پیکسل لغزش افقی می‌ساختند. از قبل بودند؛ اینجا بریده
می‌شوند نه حذف — خودشان دیده نمی‌شوند، فقط دیگر صفحه را
پهن‌تر نمی‌کنند. */
footer,.club,.cl-band{overflow-x:clip}
/* ── گوشی‌های باریک ──
*
* تست روی چند عرض نشان داد زیر ۴۰۰ پیکسل هدر سرریز می‌کند:
* مجموع فرزندانش ۳۵۰ است و در ۳۶۰ فقط ۳۳۱ جا دارد، در ۳۲۰ فقط
* ۲۹۴. یعنی روی اندروید ۳۶۰ — که عرض خیلی رایجی است — صفحه
* چند پیکسل افقی می‌لغزید.
*
* ترتیب چشم‌پوشی عمدی است: اول حاشیه، بعد لوگو، و فقط در
* باریک‌ترین حالت یک آیکون. اهداف لمس ۴۴ تا آخر دست‌نخورده
* می‌مانند، چون همان‌هایند که خرید را ممکن می‌کنند. */
@media (max-width:400px){
/* حاشیه‌ی هدر کمتر — بقیه‌ی صفحه دست‌نخورده می‌ماند */
header .wrap{width:96%}
/* ۱۱۲ از روی تنگ‌ترین حالت واقعی این بازه درآمده: در ۳۶۰ با
سبد پر، ۱۱۵ پیکسل برای لوگو می‌ماند. سه پیکسل هم برای
مبلغ‌های هشت‌رقمی کنار گذاشته شده. */
.logo .brand-logo{max-width:112px}
.logo small{display:none}
}
/* ترتیب مهم است: این بلوک باید بعد از @media 400 بیاید، وگرنه
قاعدهٔ لوگوی ۸۴ رویش می‌نشیند و در ۳۲۰ سرریز می‌ماند. */
@media (max-width:345px){
/* در ۳۲۰ با سبد پر ۷۹ پیکسل می‌ماند. ۷۶ انتخاب شد تا در آن
عرض هم لوگو مجبور به کوتاه‌آمدن نشود و با افتادن اولین
کالا در سبد اندازه‌اش نپرد. */
.logo .brand-logo{max-width:76px}
}
/* ═══════════════════════════════════════════════════════════
نوار ناوبری پایین موبایل
شش خانه، و هیچ‌کدام تکرارِ هدر نیست. هدر روی گوشی چسبان است
و سبد (با مبلغ)، جست‌وجو، منو و لوگو را همیشه جلوی چشم نگه
می‌دارد؛ پس این نوار فقط چیزهایی را می‌دهد که آنجا نیستند:
فروشگاه، علاقه‌مندی، مقایسه، مشاوره، حساب — و خانه.
در صفحهٔ تک‌محصول اصلاً چاپ نمی‌شود (footer.php)، چون نوار
خرید چسبان آنجاست.
═══════════════════════════════════════════════════════════ */
/* روی دسکتاپ هیچ‌چیز از این نوار وجود خارجی ندارد */
.lv-bnav,.lv-bnav-sp{display:none}
@media (max-width:980px){
/* جای‌نگهدار: نوار fixed است و بدون این، ته فوتر زیرش می‌رفت.
env برای گوشی‌هایی که نوار خانهٔ سیستم پایین صفحه دارند. */
.lv-bnav-sp{display:block;height:calc(64px + env(safe-area-inset-bottom,0px))}
.lv-bnav{
/* چهار خانه و یک ستون خالی وسط برای دکمهٔ برجسته. ستون
وسط از خودِ شبکه است نه position:absolute، تا ترتیب
تب‌خوردن و خواندن صفحه‌خوان هم همان ترتیب دیداری بماند. */
display:grid;grid-template-columns:1fr 1fr 84px 1fr 1fr;gap:0;
position:fixed;inset-inline:0;bottom:0;z-index:70;
/* نیمه‌شفاف امتحان شد و پس داده شد: وقتی نوار روی بخش
تیرهٔ «باشگاه لوند» می‌افتاد، برچسب‌های ۱۰ پیکسلی محو
می‌شدند. حالا تقریباً مات است و blur فقط لبهٔ محتوای
زیرش را نرم می‌کند — حس شناوربودن می‌ماند، خوانایی هم. */
background:#fff;
border-top:1px solid #f4dde6;
border-radius:20px 20px 0 0;
box-shadow:0 -8px 28px rgba(96,16,54,.10);
padding-bottom:env(safe-area-inset-bottom,0px);
/* دایرهٔ مرکزی از بالای نوار بیرون می‌زند */
overflow:visible
}
@supports (backdrop-filter:blur(14px)) or (-webkit-backdrop-filter:blur(14px)){
.lv-bnav{background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25)}
}
.lv-bnav-i{
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:4px;height:64px;color:#8a6476;text-decoration:none;
transition:color .16s
}
.lv-bnav-i small{font-size:10px;line-height:1;white-space:nowrap;font-weight:500}
/* قاب آیکون: در حالت عادی نامرئی است و در حالت فعال یک قرص
صورتیِ کم‌رنگ می‌شود. رنگ‌تنها نشانهٔ خوبی نیست — این قرص
حالت فعال را بدون تکیه بر تشخیص رنگ هم پیدا می‌کند. */
.lv-bnav-ic{
display:grid;place-items:center;
width:40px;height:26px;border-radius:13px;
background:transparent;transition:background .18s
}
.lv-bnav-i svg{
width:22px;height:22px;fill:none;stroke:currentColor;
stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round
}
.lv-bnav-i.on{color:var(--darkpink)}
.lv-bnav-i.on .lv-bnav-ic{background:#ffe3ee}
.lv-bnav-i.on svg{stroke-width:2.1}
.lv-bnav-i.on small{font-weight:700}
.lv-bnav-i:active .lv-bnav-ic{background:#fdeef4}
/* ── دکمهٔ مرکزی مشاوره ──
از نوار بیرون می‌زند تا از چهار خانهٔ دیگر جدا دیده شود.
حلقهٔ سفید دورش کار «بریدگی» نوار را می‌کند، بدون mask و
بدون SVG — یعنی در هر مرورگری همان‌طور درمی‌آید. */
.lv-bnav-c{justify-content:flex-end;padding-bottom:9px;color:var(--darkpink)}
.lv-bnav-b{
display:grid;place-items:center;
width:56px;height:56px;border-radius:50%;
margin-top:-30px;
background:linear-gradient(145deg,#f4418a,#ad1452);
box-shadow:0 0 0 5px #fff,0 10px 22px rgba(184,24,89,.38);
transition:transform .16s,box-shadow .16s
}
.lv-bnav-b svg{width:25px;height:25px;stroke:#fff;stroke-width:1.9}
.lv-bnav-c small{color:var(--darkpink);font-weight:700}
.lv-bnav-c:active .lv-bnav-b{transform:scale(.94);box-shadow:0 0 0 5px #fff,0 5px 12px rgba(184,24,89,.34)}
/* ── سه تصادمی که با آمدن این نوار پیش می‌آمد ──
*
* ۱) دکمهٔ شناور مشاوره: هر صفحه باید دقیقاً یک راه تماس
* داشته باشد. جایی که نوار هست، خانهٔ مرکزی کار را می‌کند و
* دکمهٔ شناور می‌رود. چون نوار در footer.php پیش از دکمه چاپ
* می‌شود، همین انتخابگر خواهری کافی است و نیازی به کلاس روی
* body نیست. */
.lv-bnav ~ .fab{display:none}
/* ۲) نوار مقایسه هم پایین می‌نشیند؛ بالای نوار ناوبری.
*
* ۲۲ پیکسل بیشتر از ارتفاع نوار، چون دایرهٔ مرکزی با حلقهٔ
* سفیدش ۱۹ پیکسل از نوار بیرون می‌زند و گرنه روی محتوای نوار
* مقایسه می‌افتاد. حالا دایره در همان فاصله شناور می‌ماند. */
.lv-bnav ~ .cmp-bar{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
/* و فضای تهِ صفحه دوبار رزرو نشود: جای‌نگهدارِ نوار از قبل
۶۴ پیکسل گرفته، پس padding مخصوص نوار مقایسه فقط باید
اندازهٔ خودش باشد. اگر مرورگری :has نداشته باشد، تنها
نتیجه‌اش کمی فضای خالی اضافه است — چیزی نمی‌شکند. */
body:has(.lv-bnav).has-cmp-bar{padding-bottom:104px}
/* ۳) منوی موبایل تا ۸۰٪ ارتفاع باز می‌شود و آخرین لینکش زیر
* نوار گم می‌شد. */
#mobile-nav{padding-bottom:82px}
}
/* ── دسکتاپ: همان دکمه، روی همان دکمهٔ خرید ──
*
* اندازه‌گیری در ۱۱۸۰: پیل مشاوره ۱۲۵ پیکسل از دکمهٔ «افزودن به
* سبد» نوار چسبان را می‌پوشاند. خواستهٔ صاحب فروشگاه این بود که
* دسکتاپ عوض نشود، پس ظاهر دکمه دست نخورد و فقط جای نشستنش
* وقتی عوض می‌شود که نوار خرید واقعاً بالا آمده باشد — یعنی
* همان لحظه‌ای که تصادم هست. بقیهٔ وقت‌ها دقیقاً سر جای قبلی.
*
* :has تنها راهی است که از روی وضعیت نوار (کلاس on که با اسکرول
* می‌آید) بشود به دکمه رسید، چون این دو در DOM خویشاوند نیستند.
* مرورگر بدون :has همان رفتار قبلی را دارد — بدتر نمی‌شود. */
@media (min-width:981px){
body:has(.pdp-sticky.on) .fab{bottom:92px}
}
.fab{transition:background .16s,bottom .24s}
/* ── صفحهٔ محصول روی گوشی: دکمهٔ مشاوره روی دکمهٔ خرید بود ──
*
* اندازه‌گیری در ۳۹۰: دکمهٔ شناور ۱۷۰×۵۲ روی bottom:22 می‌نشست و
* نوار خرید چسبان ۰..۷۰. یعنی ۱۷۰ پیکسل از ۲۵۶ پیکسلِ «افزودن به
* سبد» زیرش گم می‌شد — دوسومِ دکمهٔ اصلی خرید، روی دستگاهی که
* بیشتر خریدها از آن می‌آید.
*
* این تنها صفحه‌ای است که هنوز دکمهٔ شناور دارد (بقیه خانهٔ
* «مشاوره» را در نوار پایین دارند)، پس چاره‌اش حذف نبود. دکمه
* بالای نوار خرید می‌رود و به یک دایرهٔ کوچک جمع می‌شود — هم‌زبان
* با دکمهٔ مرکزی نوار پایین، و بی‌مزاحمت برای محتوای صفحه.
*
* ارتفاع ثابت است و به ظاهرشدن نوار گره نخورده؛ نوار با اسکرول
* می‌آید و اگر دکمه هم بالا و پایین می‌پرید، چشم را اذیت می‌کرد. */
@media (max-width:980px){
body.single-product .fab{
bottom:84px;left:16px;
width:52px;height:52px;padding:0;gap:0;
border-radius:50%;justify-content:center;
background:linear-gradient(145deg,#f4418a,#ad1452);
box-shadow:0 0 0 4px #fff,0 8px 20px rgba(184,24,89,.34)
}
body.single-product .fab:hover{background:linear-gradient(145deg,#ea2e7f,#9c1049)}
/* حبابِ دور آیکون داخل دایره معنی ندارد — خودِ دایره همان است */
body.single-product .fab .d{width:auto;height:auto;background:none;font-size:23px;line-height:1}
/* متن می‌ماند، فقط دیده نمی‌شود */
body.single-product .fab .t{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0
}
}
/* گوشی‌های باریک: ستون وسط کمی جمع می‌شود تا برچسب‌های کناری
نشکنند. دایره همان اندازه می‌ماند — هدف لمسِ اصلی است. */
@media (max-width:345px){
.lv-bnav{grid-template-columns:1fr 1fr 74px 1fr 1fr}
.lv-bnav-i small{font-size:9.5px}
}
/* ─────────────────────────────────────────────────────────────
کشوی سبد روی گوشی
─────────────────────────────────────────────────────────────
چیدمان سه‌ستونه بود: عکس ۶۰، متن ۱fr، دکمه‌های تعداد auto. روی
کشوی ۳۵۹ پیکسلی، ستون متن فقط ۱۴۶ پیکسل می‌گرفت — عکس و
دکمه‌های تعداد بقیه را برداشته بودند.
نتیجه: نام محصول‌های بلند سه خط می‌شکستند، «حذف» تنها زیرشان
می‌افتاد و از قلم خودش جدا به‌نظر می‌رسید، و هر قلم ۱۳۳ پیکسل
ارتفاع می‌گرفت. با سه قلم، دکمهٔ «تکمیل سفارش» پایین‌تر از صفحه
می‌رفت — یعنی درست همان دکمه‌ای که کل این کشو برای زدنش هست.
حالا دو ستون: عکس و متن. دکمه‌های تعداد به سطر دوم می‌روند و
«حذف» کنار قیمت می‌نشیند. ستون متن از ۱۴۶ به حدود ۲۸۰ می‌رسد. */
@media (max-width:560px){
/* سه ستون می‌ماند ولی عکس و دکمه‌های تعداد جمع‌تر می‌شوند.
دوستونی امتحان شد: متن به ۲۶۴ رسید ولی دکمه‌های تعداد
سطر جدا گرفتند و ارتفاع از ۱۳۳ به ۱۵۰ رفت — یعنی بدتر.
این نسخه هر دو را بهتر می‌کند. */
.cart-item{
grid-template-columns:48px 1fr auto;
gap:10px;padding:12px 0;align-items:center
}
.cart-item .th{width:48px;height:58px;align-self:start}
.cart-item>div{min-width:0}
/* نام کامل می‌ماند — خریدار باید بشناسد چه چیزی در سبدش است —
ولی حالا در دو خط جا می‌شود نه سه. */
.cart-item b{font-size:13px;line-height:1.75}
/* قیمت و «حذف» در یک خط، کنار هم */
.cart-item .pr{display:inline;margin-top:0}
.cart-item .rm{
display:inline;margin:0 12px 0 0;
border-bottom:1px solid #e9d5de;line-height:1.6
}
/* دکمه‌های تعداد جمع‌تر، سر جای خودشان */
.cart-item .qty{gap:2px}
.cart-item .qty button{width:28px;height:28px}
/* پانویس کشو همیشه در دسترس بماند */
.cart-dr{width:min(420px,94%)}
.cart-ft{padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
}
/* ═══════════════════════════════════════════════════════════
صفحهٔ باشگاه لوند (.cb-*)
کلاس‌ها عمداً cb- هستند نه club-: club- مال باند فوتر است که
در هر صفحه می‌آید. این دو نباید روی هم بیفتند.
عددهای این صفحه از توابع واقعی باشگاه می‌آیند، پس استایل هیچ
عددی را سخت نمی‌کند — فقط جا برایشان باز می‌کند.
═══════════════════════════════════════════════════════════ */
.cb .section-head.center p{margin:10px auto 0;max-width:560px;color:var(--muted);font-size:14px}
.cb-note{margin:18px auto 0;max-width:640px;text-align:center;font-size:13px;color:var(--muted);line-height:2}
/* ── سرصفحه ── */
.cb-top{padding-top:22px}
.cb-hero{
position:relative;overflow:hidden;isolation:isolate;
display:grid;grid-template-columns:1.3fr .85fr;align-items:center;gap:36px;
border-radius:24px;padding:44px 46px;color:#fff;
background:linear-gradient(135deg,#5d0f34 0%,#b81859 42%,#e92878 72%,#ff9d86 130%);
box-shadow:0 26px 60px rgba(60,8,34,.3)
}
.cb-art{position:absolute;inset:0;pointer-events:none;z-index:-1}
.cb-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.22)}
.cb-ring{left:-100px;top:-130px;width:340px;height:340px;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 62%)}
.cb-ring2{left:90px;top:60px;width:230px;height:230px;background:none}
.cb-badge{display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.36);border-radius:30px;padding:5px 15px;font-size:12px;margin-bottom:14px}
.cb-hero h1{font-size:clamp(27px,3.1vw,38px);line-height:1.55;margin:0 0 12px;color:#fff}
.cb-hero h1 em{font-style:normal;color:#ffe0d6}
.cb-lead{font-size:14.5px;line-height:2.1;color:rgba(255,255,255,.93);margin:0 0 22px;max-width:520px}
.cb-lead strong{color:#fff}
.cb-cta{display:flex;gap:11px;flex-wrap:wrap}
.cb-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.cb-ghost:hover{background:rgba(255,255,255,.14);color:#fff}
/* سه عددی که خریدار واقعاً می‌پرسد */
.cb-stats{
list-style:none;margin:0;padding:20px;display:grid;gap:14px;
background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);border-radius:18px
}
.cb-stats li{display:flex;flex-direction:column;gap:3px;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.18)}
.cb-stats li:last-child{padding-bottom:0;border-bottom:0}
.cb-stats b{font-size:22px;line-height:1.4;color:#fff}
.cb-stats span{font-size:12.5px;line-height:1.8;color:rgba(255,255,255,.86)}
/* ── سه قدم ── */
.cb-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cb-steps>li{
position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 24px 24px;
box-shadow:0 1px 2px rgba(184,24,89,.05),0 8px 22px rgba(184,24,89,.06);
transition:border-color .2s,box-shadow .2s,transform .2s
}
.cb-steps>li:hover{border-color:#f6c4d9;box-shadow:0 6px 14px rgba(184,24,89,.1),0 20px 40px rgba(184,24,89,.14);transform:translateY(-4px)}
.cb-n{
position:absolute;top:-17px;right:24px;
width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
background:linear-gradient(145deg,#f4418a,#ad1452);color:#fff;font-size:16px;font-weight:700;
box-shadow:0 0 0 5px #fff,0 6px 16px rgba(184,24,89,.3)
}
.cb-steps>li b{display:block;font-size:17px;margin-bottom:8px}
.cb-steps>li>p{font-size:13.5px;line-height:2;color:var(--muted);margin:0 0 14px}
.cb-mini{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:8px}
.cb-mini li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.85}
.cb-mini span{color:var(--pink);flex-shrink:0}
/* ── نردبان جایزه ── */
.cb-ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.cb-rw{
position:relative;display:flex;flex-direction:column;
background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 24px;text-align:center;
box-shadow:0 1px 2px rgba(184,24,89,.05),0 8px 22px rgba(184,24,89,.06)
}
.cb-rw-top{border-color:var(--pink);box-shadow:0 10px 26px rgba(184,24,89,.17)}
.cb-flag{
position:absolute;top:-13px;inset-inline:0;margin:auto;width:fit-content;
background:linear-gradient(145deg,#f4418a,#ad1452);color:#fff;font-size:11.5px;
border-radius:20px;padding:4px 14px;box-shadow:0 0 0 4px #fff,0 5px 14px rgba(184,24,89,.3)
}
.cb-rate{display:inline-block;margin:0 auto 12px;background:var(--pale);color:var(--darkpink);font-size:12px;border-radius:20px;padding:4px 13px}
.cb-rw b{font-size:25px;line-height:1.5;color:var(--darkpink)}
.cb-rw>small{display:block;font-size:12.5px;color:var(--muted)}
.cb-rw hr{border:0;border-top:1px solid var(--line);width:100%;margin:16px 0 14px}
.cb-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:5px 0}
.cb-row i{font-style:normal;color:var(--muted)}
.cb-row em{font-style:normal;font-weight:600}
/* ── سطح‌ها ── */
.cb-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cb-tier{
background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 22px;text-align:center;
box-shadow:0 1px 2px rgba(184,24,89,.05),0 8px 22px rgba(184,24,89,.06)
}
.cb-tier b{display:block;font-size:19px;margin-bottom:4px}
.cb-tier small{display:block;font-size:12.5px;color:var(--muted);margin-bottom:14px}
.cb-tier strong{display:block;font-size:15px;line-height:1.9;color:var(--darkpink);font-weight:600}
.cb-tier-gold{
border-color:#eabf6a;
background:linear-gradient(160deg,#fffdf7,#fdf3e2);
box-shadow:0 10px 26px rgba(176,129,32,.16)
}
.cb-tier-gold b,.cb-tier-gold strong{color:#8a6412}
/* ── چهار قول ── */
.cb-promises{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cb-promises>div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px}
.cb-promises b{display:block;font-size:15.5px;margin-bottom:7px;color:var(--darkpink)}
.cb-promises p{margin:0;font-size:13px;line-height:1.95;color:var(--muted)}
/* ── هدیهٔ تولد ── */
.cb-gift{
position:relative;overflow:hidden;isolation:isolate;
display:grid;grid-template-columns:1fr auto;align-items:center;gap:30px;
border-radius:22px;padding:38px 42px;color:#fff;
background:linear-gradient(118deg,#be0b58,#ef347f 62%,#ff9daa);
box-shadow:0 22px 50px rgba(60,8,34,.26)
}
.cb-gift h2{font-size:28px;line-height:1.6;margin:6px 0 12px;color:#fff}
.cb-gift h2 em{font-style:normal;color:#ffe0d6}
.cb-gift .overline{color:rgba(255,255,255,.9)}
.cb-gift p{font-size:14px;line-height:2.05;color:rgba(255,255,255,.92);margin:0 0 20px;max-width:520px}
.cb-gift-amount{
flex-shrink:0;display:grid;place-items:center;gap:2px;
width:150px;height:150px;border-radius:50%;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3)
}
.cb-gift-amount b{font-size:25px;line-height:1.3}
.cb-gift-amount span{font-size:13px;color:rgba(255,255,255,.88)}
/* ── پرسش‌ها ── */
.cb-faq{max-width:840px;margin:auto}
@media(max-width:980px){
.cb-hero{grid-template-columns:1fr;gap:26px;padding:34px 30px}
.cb-lead{max-width:none}
.cb-steps,.cb-ladder,.cb-tiers{grid-template-columns:1fr 1fr}
.cb-promises{grid-template-columns:1fr 1fr}
/* سه‌تایی در دو ستون، آخری تمام‌عرض می‌شود تا تک و لنگ نماند */
.cb-steps>li:last-child,.cb-ladder>div:last-child,.cb-tiers>div:last-child{grid-column:1/-1}
}
@media(max-width:700px){
.cb-top{padding-top:14px}
.cb-hero{padding:26px 20px;border-radius:18px}
.cb-hero h1{font-size:25px}
.cb-lead{font-size:13.5px;line-height:2}
.cb-cta .btn{flex:1;justify-content:center;padding:11px 14px;font-size:13px}
.cb-stats{padding:16px}
.cb-stats b{font-size:19px}
.cb-steps,.cb-ladder,.cb-tiers,.cb-promises{grid-template-columns:1fr}
.cb-steps>li:last-child,.cb-ladder>div:last-child,.cb-tiers>div:last-child{grid-column:auto}
.cb-steps>li{padding:26px 18px 20px}
.cb-n{right:18px}
.cb-gift{grid-template-columns:1fr;padding:26px 20px;gap:20px;text-align:center}
.cb-gift p{margin-inline:auto}
.cb-gift-amount{width:124px;height:124px;margin:auto}
.cb-gift-amount b{font-size:21px}
}
/* ═══════════════════════════════════════════════════════════
بخش‌های متنی صفحهٔ اصلی (.hs-*)
همان کلمه‌ها و همان یازده لینکِ قبلی، در قالبی که دیوار متن
نباشد. کلاس‌ها تازه‌اند چون pl-grid و au-table و pdp-faq در
صفحه‌های دیگر هم استفاده می‌شوند و نباید اینجا عوض شوند.
═══════════════════════════════════════════════════════════ */
/* پاسخ مستقیم — همان جمله‌ای که مدل‌های هوش مصنوعی نقل می‌کنند،
پس باید اولین چیزی باشد که چشم می‌گیرد. */
.hs-answer{
max-width:780px;margin:0 auto;text-align:center;
font-size:16.5px;line-height:2.25;color:#4a3a42
}
.hs-upd{
max-width:780px;margin:12px auto 0;text-align:center;
font-size:12.5px;color:var(--muted)
}
.hs-upd a{color:var(--darkpink)}
/* زیرعنوان‌ها: خط صورتی کوتاه بالایشان، به‌جای h3 لخت */
.hs-h{
position:relative;margin:46px 0 22px;padding-top:16px;
font-size:20px;text-align:center
}
.hs-h:before{
content:'';position:absolute;top:0;inset-inline:0;margin:auto;
width:46px;height:3px;border-radius:3px;
background:linear-gradient(90deg,var(--pink),#ffb39f)
}
/* ── از کجا شروع کنم: چهار قدم ── */
.hs-steps{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(4,1fr);gap:18px
}
.hs-steps>li{
position:relative;background:#fff;border:1px solid var(--line);
border-radius:16px;padding:26px 20px 20px;
box-shadow:0 1px 2px rgba(184,24,89,.05),0 7px 18px rgba(184,24,89,.055);
transition:border-color .2s,box-shadow .2s,transform .2s
}
.hs-steps>li:hover{border-color:#f6c4d9;box-shadow:0 6px 14px rgba(184,24,89,.1),0 18px 34px rgba(184,24,89,.13);transform:translateY(-4px)}
.hs-n{
position:absolute;top:-15px;right:20px;
width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
background:linear-gradient(145deg,#f4418a,#ad1452);color:#fff;
font-size:15px;font-weight:700;
box-shadow:0 0 0 5px #fff8fa,0 5px 14px rgba(184,24,89,.28)
}
.hs-steps b{display:block;font-size:15.5px;margin-bottom:7px}
.hs-steps p{margin:0;font-size:13px;line-height:1.95;color:var(--muted)}
/* ── دسته‌های اصلی: نه لینک، به‌جای جدول ── */
.hs-map{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hs-map>a{
position:relative;display:block;background:#fff;
border:1px solid var(--line);border-radius:14px;
padding:17px 18px 17px 42px;
transition:border-color .18s,box-shadow .18s,transform .18s
}
.hs-map>a:hover{border-color:var(--pink);box-shadow:0 10px 24px rgba(184,24,89,.12);transform:translateY(-3px)}
.hs-map b{display:block;font-size:14.5px;margin-bottom:4px}
.hs-map>a:hover b{color:var(--darkpink)}
.hs-map span{display:block;font-size:12.5px;line-height:1.85;color:var(--muted)}
.hs-map i{
position:absolute;left:16px;top:50%;transform:translateY(-50%);
font-style:normal;color:#e3bccd;font-size:16px;transition:color .18s,transform .18s
}
.hs-map>a:hover i{color:var(--pink);transform:translateY(-50%) translateX(-3px)}
/* ── چرا از لوند: چهار کارت با آیکون ── */
.hs-why{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hs-why>div{
background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 20px;
box-shadow:0 1px 2px rgba(184,24,89,.05),0 7px 18px rgba(184,24,89,.055)
}
.hs-ic{
display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
background:linear-gradient(150deg,#fff1f6,#fcdfea);margin-bottom:13px
}
.hs-ic svg{width:23px;height:23px;stroke:var(--darkpink);stroke-width:1.6}
.hs-why b{display:block;font-size:15.5px;margin-bottom:7px}
.hs-why p{margin:0;font-size:13px;line-height:1.95;color:var(--muted)}
/* ── پرسش‌های متداول ──
قبلاً ته یک بخش دیگر با یک h3 کوچک بود و پنج پرسشی که اسکیمای
FAQPage دارند مثل زیرنویس دیده می‌شدند. حالا بخش خودش است. */
.hs-faq{max-width:860px;margin:auto;display:grid;gap:12px}
.hs-faq details{
background:#fff;border:1px solid var(--line);border-radius:14px;
padding:0 20px;overflow:hidden;
transition:border-color .2s,box-shadow .2s
}
.hs-faq details[open]{border-color:#f3c3d8;box-shadow:0 10px 26px rgba(184,24,89,.1)}
.hs-faq summary{
display:flex;align-items:center;justify-content:space-between;gap:14px;
cursor:pointer;list-style:none;padding:17px 0;
font-size:15px;font-weight:600;line-height:1.8
}
.hs-faq summary::-webkit-details-marker{display:none}
.hs-faq details[open] summary{color:var(--darkpink)}
/* علامت + که موقع باز شدن می‌چرخد و × می‌شود */
.hs-faq summary i{
position:relative;flex-shrink:0;width:26px;height:26px;border-radius:50%;
background:var(--pale);transition:background .2s,transform .25s
}
.hs-faq summary i:before,.hs-faq summary i:after{
content:'';position:absolute;inset-inline:7px;top:12px;height:2px;
border-radius:2px;background:var(--darkpink);transition:transform .25s
}
.hs-faq summary i:after{transform:rotate(90deg)}
.hs-faq details[open] summary i{background:var(--pink);transform:rotate(135deg)}
.hs-faq details[open] summary i:before,.hs-faq details[open] summary i:after{background:#fff}
.hs-faq details>p{
margin:0;padding:0 0 18px;font-size:14px;line-height:2.1;color:var(--muted);
border-top:1px solid var(--line);padding-top:14px
}
@media(max-width:1000px){
.hs-steps,.hs-why{grid-template-columns:1fr 1fr}
.hs-map{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
.hs-answer{font-size:15px;line-height:2.1;text-align:start}
.hs-upd{text-align:start}
.hs-h{margin:34px 0 18px;font-size:18px}
.hs-steps,.hs-why,.hs-map{grid-template-columns:1fr}
.hs-steps>li{padding:24px 17px 18px}
.hs-faq summary{font-size:14px;padding:15px 0}
.hs-faq details{padding:0 16px}
.hs-faq details>p{font-size:13.5px;line-height:2}
}
/* ═══════════════════════════════════════════════════════════
مجلهٔ لوند روی صفحهٔ اصلی — چیدمان مجله‌ای
چهار کارت هم‌اندازه، چهار تیتر هم‌وزن می‌ساخت و چشم نمی‌دانست
از کجا شروع کند. حالا یکی بزرگ است و سه تا فهرست‌وار کنارش —
همان کاری که یک مجله با صفحهٔ اولش می‌کند.
کلاس journal-mag را PHP فقط وقتی می‌گذارد که دقیقاً چهار
مقاله باشد؛ با کمتر، همان شبکهٔ ساده می‌ماند و جای خالی
درست نمی‌شود.
═══════════════════════════════════════════════════════════ */
@media(min-width:1001px){
.journal-mag{
grid-template-columns:1.15fr 1fr;
grid-template-rows:repeat(3,1fr);
gap:16px 20px
}
.journal-mag .jr-card:first-child{grid-row:1/4}
.journal-mag .jr-card:first-child .jr-media{aspect-ratio:4/3}
.journal-mag .jr-card:first-child .jr-body{padding:20px 22px 18px}
.journal-mag .jr-card:first-child h3{font-size:20px;line-height:1.75}
.journal-mag .jr-card:first-child p{font-size:13.5px;line-height:2}
/* سه‌تای کناری: عکس کوچک کنار متن */
.journal-mag .jr-card:not(:first-child){
display:grid;grid-template-columns:124px 1fr;align-items:stretch
}
.journal-mag .jr-card:not(:first-child) .jr-media{aspect-ratio:auto;height:100%}
.journal-mag .jr-card:not(:first-child) .jr-cat{display:none}
.journal-mag .jr-card:not(:first-child) .jr-body{padding:13px 16px 12px;gap:5px}
.journal-mag .jr-card:not(:first-child) h3{font-size:14.5px;line-height:1.8}
.journal-mag .jr-card:not(:first-child) p{
font-size:12px;line-height:1.85;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.journal-mag .jr-card:not(:first-child) .jr-meta{padding-top:8px}
}
/* ── نوار چهار وعده (ضمانت، انقضا، ارسال، مرجوعی) ──
*
* اندازه‌گیری نشان داد مشکل از تراز بود نه از شبکه: هر سلول در
* ۳۹۰ پیکسل ۱۹۰ پهنا داشت ولی محتوا از لبه شروع می‌شد، و چون طول
* متن‌ها فرق دارد، ۴۶ و ۷۶ و ۴۴ و ۸۱ پیکسل فضای خالی می‌ماند.
* چشم این را «وسط نبودن» می‌بیند. روی دسکتاپ هم همین بود، فقط
* با سلول‌های ۲۷۲ پیکسلی.
*
* حالا محتوای هر سلول در خودِ سلول وسط می‌نشیند، پس چهارتا
* هم‌فاصله و هم‌تراز دیده می‌شوند — مستقل از اینکه متن کدامشان
* بلندتر باشد.
*/
.service-strip>div{justify-content:center}
/* قاب آیکون: همان زبان «چرا از لوند؟» تا دو بخشِ کنار هم یکی
به نظر برسند. */
.service-strip .svc-ic{
display:grid;place-items:center;flex-shrink:0;
width:44px;height:44px;border-radius:13px;
background:linear-gradient(150deg,#fff1f6,#fcdfea)
}
.service-strip .svc-ic svg{width:22px;height:22px;stroke:var(--darkpink);stroke-width:1.6;color:var(--darkpink)}
@media(max-width:560px){
/* در این عرض، دو ستون با متن بلندِ «ارسال به سراسر کشور»
تنگ می‌شود؛ قاب کوچک‌تر و فاصله کمتر. */
.service-strip{gap:16px 10px;padding:28px 0}
.service-strip .svc-ic{width:38px;height:38px;border-radius:11px}
.service-strip .svc-ic svg{width:19px;height:19px}
.service-strip>div{gap:9px}
}
/* زیرعنوان زیر سرتیتر وسط‌چین، وسط بماند.
base.css به آن max-width:400px می‌دهد ولی margin نمی‌دهد، پس
آن جعبه‌ی ۴۰۰ پیکسلی می‌چسبید به ابتدای خط — در صفحه‌ی راست‌چین
یعنی سمت راست — و متنِ وسط‌چینِ داخلش، کنارِ صفحه دیده می‌شد.
اندازه‌گیری: ۳۴۶ پیکسل فضای خالی یک‌طرفه. */
.section-head.center p{margin-inline:auto}
/* چهارتا را جمع‌تر کن تا یک نوار دیده شوند، نه چهار جزیره.
خط بالای نوار هم‌عرض بقیه‌ی بخش‌ها می‌ماند (۱۲۲۰) و فقط
محتوا تو می‌آید؛ اگر خودِ نوار را باریک می‌کردم، آن خط با
بقیه‌ی صفحه ناهم‌تراز می‌شد. */
.service-strip{padding-inline:clamp(0px,6vw,92px)}
/* روی گوشی آیکون بالای متن.
کنار هم، در ۳۶۰ و ۳۲۰ عنوان «ارسال به سراسر کشور» دو خطی
می‌شد و آن سلول ۴۳ پیکسل می‌شد در حالی که سه‌تای دیگر ۲۲
بودند — ردیف لنگ. عمودی، متن تمام عرض سلول را دارد و هر
چهارتا یک‌شکل می‌مانند. */
@media(max-width:560px){
.service-strip>div{flex-direction:column;text-align:center;gap:8px}
.service-strip{padding-inline:0}
}
/* ── قرص باشگاه در نوار بالا ──
*
* تنها عنصر برجستهٔ این نوار است، پس چشم رویش می‌ایستد — بدون
* اینکه جای ناوبری را بگیرد. روی گوشی نمی‌آید: آنجا هم در منوی
* کشویی هست و هم خانهٔ «عضویت» در نوار پایین.
*/
.top-club{
display:inline-flex;align-items:baseline;gap:8px;
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);
border-radius:30px;padding:3px 13px;line-height:1.9;
transition:background .16s,border-color .16s
}
.top-club:hover{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.6)}
.top-club b{font-size:12px;font-weight:700;color:#fff}
.top-club span{font-size:11.5px;color:rgba(255,255,255,.86)}
/* زیر ۸۰۰ خودِ base.css هر لینک topline را پنهان می‌کند، پس
بین ۸۰۰ و ۱۳۰۰ — جایی که منوی کشویی فعال است — این قرص تنها
راه دیدهٔ باشگاه در بالای صفحه می‌ماند. */
@media(max-width:1280px){.top-club span{display:none}}
/* ── سرریز قدیمی نوار منو ──
*
* ظرف نوار در هر عرضی ۵۷۸ پیکسل است، چون .wrap سقف ۱۲۲۰ دارد و
* لوگو (۲۴۰) و آیکون‌ها (۳۴۶) بقیه را می‌گیرند. هفت آیتم با
* فونت ۱۴ و فاصلهٔ ۲۰ می‌شدند ۶۴۲ — یعنی ۶۴ پیکسل روی لوگو و
* روی آیکون‌ها می‌افتادند، در همهٔ عرض‌های دسکتاپ. این از روز
* اول بود و چون همپوشانی روی فضای خالی می‌افتاد، به چشم نمی‌آمد.
*
* حالا سه کار با هم: هدر از سقف ۱۲۲۰ آزاد می‌شود (۱۴۰۰ / ۹۴٪)،
* فونت و فاصلهٔ نوار کمی جمع می‌شوند. بقیهٔ صفحه دست‌نخورده
* می‌ماند — فقط نوار هدر پهن‌تر می‌شود.
*/
@media(min-width:1300px){
header .wrap{width:min(1400px,94%)}
.lvmega-bar{gap:clamp(7px,1vw,20px)}
.lvmega-trig,.lvmega-link{font-size:13.2px}
}
/* ═══════════ چهار اصلاح ریز ═══════════ */
/* ۱) آیتم‌های منو به هم نزدیک‌تر.
فاصله ۱۴ پیکسل بود (به‌علاوهٔ ۲ پیکسل padding هر طرف). حالا
در ۱۳۶۶ حدود ۸ و در ۱۹۲۰ حدود ۱۲ — نوار جمع‌تر دیده می‌شود
بدون اینکه آیتم‌ها به هم بچسبند. */
@media(min-width:1300px){
.lvmega-bar{gap:clamp(5px,0.6vw,12px)}
}
/* ۲) دکمهٔ «باشگاه چطور کار می‌کند؟» روی سرصفحهٔ باشگاه.
*
* متنش صورتی درمی‌آمد نه سفید: .btn.outline دو کلاس دارد و بر
* .cb-ghost با یک کلاس غلبه می‌کرد. حالا انتخابگر هم‌وزن شده و
* چون بعدتر می‌آید، برنده است.
*
* یک پردهٔ تیرهٔ کم‌رنگ هم پشتش نشست: متن سفید روی روشن‌ترین
* نقطهٔ گرادیان سرصفحه کنتراست کافی نداشت. حالت هاور سفیدِ توپر
* با متن صورتی تیره است — همان زبان دکمهٔ کناری‌اش. */
.btn.cb-ghost{
background:rgba(74,10,42,.26);
border-color:rgba(255,255,255,.6);
color:#fff
}
.btn.cb-ghost:hover{
background:#fff;
border-color:#fff;
color:var(--darkpink)
}
/* ۳) صفحهٔ تک‌مقاله */
/* کاور از ۶۸۴ پیکسل (۱۶:۹ در عرض ۱۲۱۶) کوتاه‌تر شد. یک عکس
تزئینی نباید یک صفحهٔ کامل را بگیرد و متن را پایین بیندازد. */
.ar-cover img{aspect-ratio:21/9;object-fit:cover;max-height:420px;width:100%}
/* سایدبار چسبان.
*
* .ar-sticky از قبل position:sticky و top:110px داشت ولی هیچ‌وقت
* نمی‌چسبید: ظرفش .ar-side با align-items:start فقط ۷۸۵ پیکسل
* می‌شد — دقیقاً قدِ خودش. چسبندگی وقتی معنا دارد که ظرف
* بلندتر از عنصر باشد؛ ستون متن ۲۵۸۰ است.
*
* align-self:stretch ظرف را تا ته ردیف می‌کشد. max-height هم
* لازم است چون خود سایدبار ۷۸۵ است و با top:110 از ارتفاع
* صفحه بلندتر می‌شد؛ حالا اگر جا نشد، خودش اسکرول می‌خورد. */
@media(min-width:1001px){
.ar-side{align-self:stretch}
.ar-sticky{
max-height:calc(100vh - 128px);
overflow-y:auto;
scrollbar-width:thin;
padding-left:2px
}
}
/* ۴) فوتر: نشان‌ها داخل ستون تماس */
.fc-badges{display:grid;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid #eedbe3}
.fc-badges .tb{display:flex;align-items:center;gap:10px}
@media(max-width:700px){
.ar-cover img{aspect-ratio:16/10;max-height:none}
}
/* ── نوار منو جمع‌تر شود ──
*
* فاصلهٔ بین خودِ آیتم‌ها ۱۲ پیکسل بود و تنگ، ولی از لوگو تا
* اولین آیتم ۶۱ پیکسل می‌افتاد و همان باعث می‌شد نوار وسط هوا
* شناور و «فاصله‌دار» دیده شود.
*
* آن ۶۱ از پهن‌کردن هدر آمده بود (۱۴۰۰) که برای رفع سرریز لازم
* بود. ۱۲۴۰ هم سرریز را حل می‌کند هم فضای مرده را نصف می‌کند؛
* فاصلهٔ خود .nav هم از ۲۸ به ۱۸ آمد.
*/
@media(min-width:1300px){
header .wrap{width:min(1240px,94%)}
header .nav{gap:18px}
}
/* ── خط جداکنندهٔ فوتر ──
*
* با برداشتن نوار نشان‌ها و برچسب‌های پرداخت، بین ستون‌ها و خط
* کپی‌رایت هیچ مرزی نماند و ته فوتر خالی شد. یک خط مویی که از
* دو طرف محو می‌شود، به‌علاوهٔ یک ستارهٔ کوچک وسطش — همان نشانی
* که در نوار متحرک و زیرعنوان‌های سایت هم هست.
*/
.lv-footer .foot-bottom{margin-top:6px;padding-top:26px}
.lv-footer .foot-bottom:before{
content:'';position:absolute;top:0;inset-inline:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.26) 16%,rgba(255,255,255,.26) 84%,transparent)
}
.lv-footer .foot-bottom:after{
content:'✳';position:absolute;top:-10px;inset-inline:0;
margin:0 auto;width:22px;height:22px;line-height:21px;text-align:center;
border-radius:50%;background:#4a0d2a;color:var(--peach);font-size:12px
}
@media(max-width:640px){
.lv-footer .foot-bottom{padding-top:30px}
}
/* نوار منو بچسبد به لوگو، نه وسطِ فضای آزاد.
وسط‌چین بودن یعنی فاصلهٔ لوگو تا منو به عرض آیکون‌ها گره
می‌خورد، و عرض آیکون‌ها با پر و خالی شدن سبد ۴۴ پیکسل عوض
می‌شود: روی سایت زنده با سبد خالی ۶۸ پیکسل بود و با سبد پر
۴۶. یعنی همان فاصله‌ای که ایراد گرفته شد، موقع خرید خودش کم
و زیاد می‌شد.
حالا فاصله همیشه همان gap نوار هدر است و کل فضای آزاد یک‌جا
پیش از آیکون‌ها می‌نشیند — چیدمان رایج و ثابت. */
@media(min-width:1300px){
header .nav>nav{justify-content:flex-start}
}
/* Seven entries get their own row: no compressed type or logo/action overlap. */
@media(min-width:1101px){
html{scroll-padding-top:166px}
header .nav{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"logo actions" "menu menu";column-gap:28px;row-gap:0;min-height:145px}
header .nav>.logo{grid-area:logo;min-height:91px}
header .nav>.actions{grid-area:actions;justify-self:end}
header .nav>nav{grid-area:menu;display:flex;justify-content:center;min-height:54px;border-top:1px solid var(--line)}
header .nav>nav .lvmega-bar{gap:clamp(20px,3vw,44px)}
header .nav>nav .lvmega-trig,header .nav>nav .lvmega-link{padding-block:14px}
header .nav>nav .lvmega-trig:after,header .nav>nav .lvmega-link:after{bottom:7px}
header .nav>nav .lvmega-panel{max-height:calc(100dvh - 155px);overflow:auto}
.in-side,.ar-sticky,.acc-side{top:166px}
}
/* «این محصول در این پک هست» — بلوک برگشتی محصول به پک روتین */
.pdp-pack-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.pdp-pack-list li{border:1px solid var(--line);border-radius:12px;background:#fff;padding:14px 16px}
.pdp-pack-list li a{display:block;font-size:16px;font-weight:600;line-height:1.8}
.pdp-pack-list li a:hover{color:var(--pink)}
.pdp-pack-list li span{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}