/* ════════════════════════════════════════════════════════════ سپهر مزون — سیستم طراحی فروشگاه (Storefront Design System) v2 تم پیش‌فرض: «شاد گرم». پالت از پنل ادمین قابل تغییر است (متغیرهای --p/--p2/--acc/--mint در تزریق می‌شوند). ساختار: توکن‌ها → پایه → پوسته → کامپوننت‌های خانه → صفحات ════════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ /* پالت تم (مقدار پیش‌فرض؛ با بازنویسی می‌شود) */ --p:#ff5d8f; --p2:#ff8a5b; --acc:#ffd23f; --mint:#3ec6b0; --grad:linear-gradient(120deg,var(--p),var(--p2)); /* خنثی‌ها */ --ink:#221a2e; --muted:#7b7488; --line:#efe9f2; --bg:#fff7fb; --card:#ffffff; --soft:#fff0f6; /* شکل و عمق */ --radius:22px; --radius-sm:14px; --radius-xs:10px; --maxw:1200px; --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1); /* فنری با overshoot — حس Dynamic Island */ --shadow-sm:0 2px 10px rgba(30,20,50,.06); --shadow-md:0 12px 34px rgba(30,20,50,.10); --shadow-lg:0 24px 60px rgba(30,20,50,.16); /* نام‌های قدیمی (سازگاری با صفحات موجود) */ --primary:var(--p); --secondary:var(--mint); --accent:var(--acc); --text:var(--ink); --text-muted:var(--muted); --border:var(--line); --shadow:var(--shadow-sm); } /* safety net: هیچ‌جای سایت اسکرول افقی مجاز نیست؛ هر overflow جزئی/ناخواسته اینجا مهار می‌شود */ html,body{overflow-x:hidden;max-width:100%} html{scroll-behavior:smooth} body{ font-family:'Vazirmatn',system-ui,sans-serif; background:var(--bg); color:var(--ink); font-size:15px; line-height:1.7; padding-bottom:0; -webkit-tap-highlight-color:transparent; } img{max-width:100%;display:block} a{text-decoration:none;color:inherit} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px;width:100%} .ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} .hide-mobile{display:inline-flex} /* ─── دکمه‌ها (یکپارچه) ──────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:13px 26px;border-radius:50px;font-family:inherit; font-size:15px;font-weight:800;border:none;cursor:pointer; transition:transform .2s var(--ease),box-shadow .2s var(--ease),opacity .2s; } .btn:active{transform:scale(.97)} .btn--primary{background:var(--grad);color:#fff;box-shadow:0 10px 26px color-mix(in srgb,var(--p) 38%,transparent)} .btn--primary:hover{transform:translateY(-3px) scale(1.02)} .btn--outline{background:var(--card);color:var(--ink);border:2px solid var(--line)} .btn--outline:hover{border-color:var(--p);color:var(--p)} .btn--full{width:100%;padding:14px;font-size:16px} /* ─── دکمه‌های شیشه‌ای (Liquid Glass — سبک اپل) ──── */ /* فقط روی پس‌زمینه‌ی رنگی/عکس استفاده شود تا جلوه‌ی بلور دیده شود */ .gbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:13px 26px;border-radius:50px;font-family:inherit;font-size:15px;font-weight:800;color:#fff; cursor:pointer;border:none;text-decoration:none;isolation:isolate;overflow:hidden; transition:transform .25s var(--ease),box-shadow .25s ease} .gbtn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit; backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%)} .gbtn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 45%);opacity:.8;mix-blend-mode:overlay} .gbtn:hover{transform:translateY(-2px) scale(1.015)} .gbtn:active{transform:scale(.97)} .gbtn--primary{border:1px solid rgba(255,255,255,.4);box-shadow:0 10px 26px color-mix(in srgb,var(--p) 42%,transparent),inset 0 1px 0 rgba(255,255,255,.6)} .gbtn--primary::before{background:var(--grad);opacity:.8} .gbtn--light{color:#2a1830;border:1px solid rgba(255,255,255,.6);box-shadow:0 8px 22px rgba(20,10,40,.18),inset 0 1px 0 rgba(255,255,255,.8)} .gbtn--light::before{background:rgba(255,255,255,.5)} .gbtn--light::after{opacity:.5} .gbtn--full{width:100%;padding:14px;font-size:15px} /* ─── نوار متحرک بالا ───────────────────────── */ .topbar{background:var(--grad);color:#fff;overflow:hidden;font-size:13px;font-weight:600} .topbar__marq{display:flex;gap:46px;white-space:nowrap;width:max-content;padding:8px 0;animation:marq 28s linear infinite} .topbar__marq span{display:inline-flex;gap:7px;align-items:center} .topbar:hover .topbar__marq{animation-play-state:paused} @keyframes marq{from{transform:translateX(0)}to{transform:translateX(50%)}} /* ─── هدر ───────────────────────────────────── */ .site-header{position:sticky;top:0;z-index:100; background:color-mix(in srgb,var(--card) 85%,transparent); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line)} .site-header__in{display:flex;align-items:center;gap:16px;height:68px} .hdr-brand{display:flex;align-items:center;gap:9px} .hdr-burger{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:4px} .logo{display:flex;align-items:center;gap:9px;font-weight:900;font-size:22px;letter-spacing:-.5px} .logo__dot{width:34px;height:34px;border-radius:12px;display:grid;place-items:center; font-size:18px;transition:transform .4s var(--ease);overflow:hidden;flex-shrink:0} .logo__img{width:100%;height:100%;object-fit:contain} .logo:hover .logo__dot{transform:scale(1.06)} .mainnav{display:flex;gap:2px;margin-inline-start:6px;align-items:center} .mainnav__item{position:relative;display:flex;align-items:center} .mainnav__link{padding:9px 13px;border-radius:12px;font-weight:600;font-size:15px;transition:.25s var(--ease);position:relative;display:flex;align-items:center;gap:3px} .mainnav__link:hover{background:var(--soft);color:var(--p)} .mainnav__hot::after{content:"🔥";position:absolute;top:-2px;left:2px;font-size:10px} .mainnav__has-drop>.mainnav__link::after{content:"▾";font-size:11px;opacity:.5;margin-right:2px;transition:transform .2s} .mainnav__item:hover>.mainnav__link::after{opacity:1;transform:rotate(-180deg)} /* دراپ‌داون دسکتاپ */ .mainnav__drop{position:absolute;top:calc(100% + 6px);right:0;min-width:180px; background:color-mix(in srgb,var(--card) 92%,transparent); backdrop-filter:blur(20px) saturate(1.8);-webkit-backdrop-filter:blur(20px) saturate(1.8); border:1px solid var(--line);border-radius:16px; box-shadow:var(--shadow-lg);padding:8px; opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s; z-index:200} .mainnav__item:hover>.mainnav__drop{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s} .mainnav__drop-main{display:block;padding:9px 12px 10px;border-radius:10px;font-size:14px;font-weight:800;color:var(--ink);white-space:nowrap;border-bottom:1px solid var(--line);margin-bottom:4px;transition:.15s} .mainnav__drop-main:hover{background:var(--soft);color:var(--p)} .mainnav__drop-item{display:block;padding:8px 12px;border-radius:10px;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;transition:.15s} .mainnav__drop-item:hover{background:var(--soft);color:var(--p)} .hdr-tools{margin-inline-start:auto;display:flex;align-items:center;gap:8px} .icon-btn{width:44px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.5); background:color-mix(in srgb,var(--card) 55%,transparent);backdrop-filter:blur(10px) saturate(160%); -webkit-backdrop-filter:blur(10px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6); display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:.25s var(--ease);position:relative} .icon-btn:hover{border-color:var(--p);color:var(--p);transform:translateY(-2px)} .badge{position:absolute;top:-6px;left:-6px;background:var(--p);color:#fff;font-size:11px;font-weight:700; min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px} .hdr-tools a.pop{animation:cartPop .45s var(--spring)} @keyframes cartPop{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}} .nav-overlay{position:fixed;inset:0;background:rgba(20,10,30,.45);opacity:0;visibility:hidden;z-index:199;transition:.3s} body.nav-open .nav-overlay{opacity:1;visibility:visible} /* ─── کشوی موبایل (Glass Drawer) ───────────────── */ .nav-drawer{position:fixed;top:14px;right:calc(-100vw);width:290px;max-width:calc(100vw - 28px); height:calc(100dvh - 28px); background:color-mix(in srgb,var(--card) 72%,transparent); backdrop-filter:blur(32px) saturate(2);-webkit-backdrop-filter:blur(32px) saturate(2); border:1px solid color-mix(in srgb,#fff 45%,transparent); border-radius:24px; box-shadow:0 24px 64px rgba(20,10,40,.22),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(255,255,255,.2); z-index:200;display:flex;flex-direction:column; transition:right .4s var(--spring);overflow:hidden} body.nav-open .nav-drawer{right:14px} .nav-drawer__hd{display:flex;align-items:center;justify-content:space-between; padding:20px 18px 16px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent); flex-shrink:0} .nav-drawer__close{background:var(--soft);border:1px solid var(--line);border-radius:10px; width:36px;height:36px;font-size:16px;cursor:pointer;color:var(--muted); display:flex;align-items:center;justify-content:center;transition:.2s} .nav-drawer__close:hover{background:color-mix(in srgb,var(--p) 10%,transparent);border-color:var(--p);color:var(--p)} .nav-drawer__body{flex:1;overflow-y:auto;padding:10px 10px 20px} .nav-drawer__link{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px; font-weight:700;font-size:15px;color:var(--ink);transition:.2s;text-decoration:none;margin-bottom:2px} .nav-drawer__link:hover{background:var(--soft);color:var(--p)} .nav-drawer__link-hot{color:var(--p)} .nav-drawer__divider{height:1px;background:var(--line);margin:10px 4px} /* آکاردیون دسته */ .nav-drawer__cat{margin-bottom:2px;border-radius:12px;overflow:hidden} .nav-drawer__cat-hd{width:100%;display:flex;align-items:center;justify-content:space-between; padding:12px 14px;background:none;border:none;font-family:inherit; font-size:15px;font-weight:700;cursor:pointer;color:var(--ink); border-radius:12px;transition:.2s;text-align:right} .nav-drawer__cat-hd:hover{background:var(--soft)} .nav-drawer__cat-arr{font-size:11px;opacity:.5;transition:transform .3s var(--ease);flex-shrink:0;margin-right:auto} .nav-drawer__cat.open>.nav-drawer__cat-hd .nav-drawer__cat-arr{transform:rotate(-180deg);opacity:1} .nav-drawer__subs{display:none;padding:2px 8px 8px 8px} .nav-drawer__cat.open>.nav-drawer__subs{display:block} .nav-drawer__sub{display:block;padding:9px 14px 9px 10px;border-radius:10px;font-size:14px; font-weight:600;color:var(--muted);transition:.15s;text-decoration:none; border-right:2px solid transparent} .nav-drawer__sub:hover{background:var(--soft);color:var(--p);border-right-color:var(--p)} .nav-drawer__sub--main{color:var(--ink);font-weight:700;border-bottom:1px solid var(--line); margin-bottom:4px;border-right:none;padding-bottom:10px} .nav-drawer__sub--main:hover{border-right:none} .nav-drawer__ft{padding:14px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);flex-shrink:0} .nav-drawer__ft a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px; font-size:14px;font-weight:600;color:var(--muted);transition:.2s;text-decoration:none} .nav-drawer__ft a:hover{background:var(--soft);color:var(--p)} /* ─── بنر سفارش پرداخت‌نشده ──────────────────── */ .unpaid-banner{background:linear-gradient(135deg,#f39c12,#e67e22);color:#fff;padding:10px 0;position:sticky;top:68px;z-index:90; box-shadow:0 2px 10px rgba(243,156,18,.3);animation:bannerSlide .3s ease} @keyframes bannerSlide{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}} .unpaid-banner__inner{display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;flex-wrap:wrap} .unpaid-banner__icon{font-size:18px;flex-shrink:0} .unpaid-banner__text{text-align:center} .unpaid-banner__btn{background:#fff;color:#e67e22;font-weight:900;padding:7px 18px;border-radius:20px; font-size:13px;white-space:nowrap;flex-shrink:0;transition:transform .15s} .unpaid-banner__btn:hover{transform:scale(1.04)} /* ─── ناوبری پایین (موبایل) ─────────────────── */ /* جزیره‌ی شناور شیشه‌ای (موبایل) */ .bottom-nav{display:none;position:fixed;left:14px;right:14px;bottom:max(14px,env(safe-area-inset-bottom));z-index:95; max-width:430px;margin:0 auto;border-radius:28px; background:color-mix(in srgb,var(--card) 60%,transparent); backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%); border:1px solid rgba(255,255,255,.55); box-shadow:0 16px 40px rgba(20,10,40,.22),inset 0 1px 0 rgba(255,255,255,.6); justify-content:space-around;padding:9px 8px} .bottom-nav__item{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted); font-size:11px;font-weight:600;padding:6px 12px;border-radius:16px;transition:.25s var(--ease); background:none;border:none;font-family:inherit;cursor:pointer;text-decoration:none} .bottom-nav__item:hover{color:var(--p)} .bottom-nav__item.active{color:var(--p);background:color-mix(in srgb,var(--p) 13%,transparent)} .bottom-nav__item .ic{width:22px;height:22px} /* ─── سرتیتر بخش ─────────────────────────────── */ .blk{padding:34px 0} .blk--tight{padding:20px 0} .head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:20px} .head__c{display:flex;flex-direction:column;gap:2px} .head h2{font-size:26px;font-weight:900;letter-spacing:-.5px;display:flex;align-items:center;gap:9px} .head h2 .em{font-size:26px} .head p{font-size:13px;color:var(--muted)} .head--center{flex-direction:column;align-items:center;text-align:center} .see-all{font-weight:700;color:var(--p);font-size:14px;display:inline-flex;gap:5px;align-items:center;white-space:nowrap} .see-all .ic{width:16px;height:16px} /* ─── اسلایدر هیرو ───────────────────────────── */ .hero{padding:20px 0} .hero__slider{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md)} .hero__track{display:flex;transition:transform .7s var(--ease)} /* اسلاید = عکس تمام‌قاب */ .hero__slide{position:relative;flex:0 0 100%;width:100%;height:420px;overflow:hidden} /* object-position به سمت بالا: صرف‌نظر از ترکیب‌بندی عکس، سر سوژه کمتر بریده می‌شود */ .hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%} .hero__bg--art{display:grid;place-items:center;font-size:150px; background:linear-gradient(120deg, color-mix(in srgb,var(--p) 18%,#fff), color-mix(in srgb,var(--p2) 18%,#fff))} /* پنل لیکویید گلس روشن روی عکس */ .hero__glass{position:absolute;bottom:28px;max-width:440px;z-index:2; background:linear-gradient(150deg, rgba(255,255,255,.78), rgba(255,255,255,.6)); backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8); border:1px solid rgba(255,255,255,.85);border-radius:26px;padding:26px 28px; box-shadow:0 18px 50px rgba(20,10,40,.22),inset 0 1px 0 rgba(255,255,255,.95)} .hero__glass--right{right:28px;left:auto} .hero__glass--left{left:28px;right:auto} .hero__glass h1{font-size:30px;font-weight:900;line-height:1.3;letter-spacing:-.5px;margin-bottom:10px;color:var(--ink)} .hero__glass h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .hero__glass p{font-size:15px;color:var(--muted);margin-bottom:18px;line-height:1.7} .hero__btns{display:flex;gap:10px;flex-wrap:wrap} .hero__dots{position:absolute;bottom:16px;left:24px;right:auto;display:flex;gap:7px;z-index:3} .hero__dots button{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.6); box-shadow:0 1px 4px rgba(20,10,40,.25);cursor:pointer;transition:.3s;padding:0} .hero__dots button.on{width:26px;border-radius:8px;background:#fff} .hero__arrow{position:absolute;top:42%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:none; background:rgba(255,255,255,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;z-index:3; display:grid;place-items:center;color:var(--ink); box-shadow:0 6px 18px rgba(20,10,40,.18),inset 0 1px 0 rgba(255,255,255,.8);transition:.25s} .hero__arrow:hover{background:var(--p);color:#fff;transform:translateY(-50%) scale(1.08)} .hero__arrow--r{right:14px}.hero__arrow--l{left:14px} /* دکمه‌ی دوم روی پنل روشن: outline برند برای تمایز */ .hero__glass .gbtn--light{color:var(--p);border:1.5px solid color-mix(in srgb,var(--p) 50%,transparent)} .hero__glass .gbtn--light::before{background:rgba(255,255,255,.55)} /* ─── نوار اعتماد ────────────────────────────── */ .trust{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .trust__i{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:15px; display:flex;gap:12px;align-items:center;box-shadow:var(--shadow-sm);transition:.3s var(--ease)} .trust__i:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} .trust__e{font-size:28px} .trust__i b{display:block;font-size:14px} .trust__i small{font-size:12px;color:var(--muted)} /* ─── کاشی‌های دسته‌بندی (عکس واقعی) ──────────── */ /* حداکثر ۴ کاشی در هر سطر — در همه‌ی breakpointها یکسان تا عکس‌ها بزرگ و باکیفیت دیده شوند */ .cats{display:flex;flex-wrap:wrap;justify-content:center;gap:14px} .cat{display:block;text-align:center;width:calc((100% - 14px*3)/4);min-width:70px;text-decoration:none} .cat__o{position:relative;width:100%;aspect-ratio:2/1;border-radius:22px;overflow:hidden; box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease); background:linear-gradient(160deg,var(--soft),#fff)} .cat__o picture{display:contents} .cat__o img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .cat:hover .cat__o{transform:translateY(-5px);box-shadow:var(--shadow-md)} .cat:hover .cat__o img{transform:scale(1.08)} /* حالت با عکس: گرادیان پایین + برچسب سفید روی عکس */ .cat--photo .cat__o::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top, rgba(20,10,30,.6) 0%, rgba(20,10,30,.18) 45%, transparent 68%)} .cat__label{position:absolute;right:0;left:0;bottom:0;z-index:2;padding:12px 8px 10px; color:#fff;font-weight:800;font-size:14px;text-shadow:0 1px 6px rgba(0,0,0,.35)} /* حالت بدون عکس: ایموجی بزرگ در باکس + برچسب زیر باکس */ .cat--icon .cat__o{display:grid;place-items:center;font-size:40px} .cat__label--plain{display:block;margin-top:9px;font-weight:700;font-size:14px;color:var(--ink)} /* ─── کارت محصول جدید (.pc) ─────────────────── */ .pc{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm); position:relative;display:block} .pc__media{position:relative;aspect-ratio:3/3.6;overflow:hidden;background:var(--soft)} .pc__media--soft{background:linear-gradient(160deg,var(--soft),#fff4dd)} /* اسلاید تصاویر داخل کارت (سوایپ موبایل) */ .pc__slides{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;-webkit-overflow-scrolling:touch} .pc__slides::-webkit-scrollbar{display:none} .pc__slides.dragging{scroll-snap-type:none;cursor:grabbing} .pc__slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;display:block} .pc__slide img{width:100%;height:100%;object-fit:cover;transition:.5s var(--ease)} .pc__artwrap{position:absolute;inset:0;display:grid;place-items:center} .pc__art{font-size:80px;transition:.5s var(--ease)} @media (hover:hover){ .pc:hover .pc__slide img{transform:scale(1.04)} .pc:hover .pc__art{transform:scale(1.1) rotate(-4deg)} } .pc__dots{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:2;pointer-events:none} .pc__dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.65);box-shadow:0 1px 3px rgba(0,0,0,.35);transition:.25s var(--ease)} .pc__dots span.on{width:16px;border-radius:6px;background:#fff} /* بج‌های شیشه‌ای */ .pc__tags{position:absolute;top:11px;right:11px;display:flex;flex-direction:column;gap:6px;z-index:3} .tag{font-size:11px;font-weight:800;padding:4px 10px;border-radius:20px;color:#fff; backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%); border:1px solid rgba(255,255,255,.45);box-shadow:0 4px 12px rgba(20,10,40,.18),inset 0 1px 0 rgba(255,255,255,.55); text-shadow:0 1px 4px rgba(0,0,0,.25)} .tag--off{background:color-mix(in srgb,var(--p) 55%,transparent)} .tag--new{background:color-mix(in srgb,var(--mint) 58%,transparent)} .tag--out{background:color-mix(in srgb,#7a8190 58%,transparent)} /* اکشن‌های شیشه‌ای: علاقه‌مندی + افزودن سریع (هم‌اندازه، کنار هم) */ .pc__acts{position:absolute;top:11px;left:11px;display:flex;flex-direction:column;gap:8px;z-index:3} .pc__act{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.45);cursor:pointer; background:color-mix(in srgb,var(--card) 32%,transparent); backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%); display:grid;place-items:center;color:var(--ink);transition:.25s var(--ease); box-shadow:0 6px 16px rgba(20,10,40,.16),inset 0 1px 0 rgba(255,255,255,.55)} .pc__act:hover{transform:scale(1.12)} .pc__act:active{transform:scale(.92)} .pc__wish{color:var(--p)} .pc__wish.on{background:var(--p);color:#fff;border-color:transparent} .pc__add{color:var(--p)} .pc__add.added{background:var(--mint);color:#fff;border-color:transparent} /* نوار انتخاب سریع سایز */ .pc__sizebar{position:absolute;left:8px;right:8px;bottom:8px;z-index:4;display:flex;flex-wrap:wrap;gap:6px; align-items:center;justify-content:center;padding:9px 8px;border-radius:14px; background:color-mix(in srgb,var(--card) 55%,transparent); backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%); border:1px solid rgba(255,255,255,.55);box-shadow:0 12px 28px rgba(20,10,40,.22); transform:translateY(130%);opacity:0;pointer-events:none;transition:transform .4s var(--spring),opacity .3s ease} .pc__sizebar.open{transform:none;opacity:1;pointer-events:auto} .pc__sizebar-lbl{font-size:11px;font-weight:700;color:var(--muted)} .pc__sizechip{border:1.5px solid var(--line);background:#fff;border-radius:9px;padding:5px 11px; font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;color:var(--ink);transition:.2s var(--ease)} .pc__sizechip:hover{border-color:var(--p);background:var(--soft);color:var(--p)} .pc__b{display:block;padding:13px 14px 15px;color:inherit} .pc__name{font-weight:700;font-size:14px;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em} .pc__price{display:flex;align-items:center;gap:8px} .pc__price b{font-size:16px;font-weight:900;color:var(--p)} .pc__price b small{font-size:11px;font-weight:600} .pc__price del{font-size:12px;color:var(--muted)} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .hscroll{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab} .hscroll::-webkit-scrollbar{display:none} .hscroll.dragging{cursor:grabbing;scroll-snap-type:none} .hscroll.dragging *{pointer-events:none} .hscroll>*{flex:0 0 200px;scroll-snap-align:start} /* موبایل: دقیقاً ۲ کارت کامل در هر view — بدون کارت نیمه */ @media(max-width:768px){ .hscroll>*{flex:0 0 calc(50% - 7px)} } /* تبلت: ۳ کارت کامل */ @media(min-width:769px) and (max-width:1024px){ .hscroll>*{flex:0 0 calc(33.333% - 9.34px)} } /* ─── بنرهای تبلیغاتی تقسیم‌شده ─────────────── */ .promo{display:grid;grid-template-columns:1fr 1fr;gap:18px} .promo__c{border-radius:var(--radius);padding:32px;display:flex;flex-direction:column;justify-content:center;gap:8px; position:relative;overflow:hidden;min-height:200px;box-shadow:var(--shadow-sm); background:linear-gradient(120deg,var(--bgA,var(--p)),var(--bgB,var(--p2)))} /* استروک ریز روی متن سفید تا روی هر پس‌زمینه‌ای خوانا بماند */ .promo__c h3{color:#fff;font-size:24px;font-weight:900; text-shadow:0 0 1px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.35),0 2px 10px rgba(0,0,0,.2)} .promo__c p{color:rgba(255,255,255,.95);font-size:14px;margin-bottom:8px; text-shadow:0 1px 3px rgba(0,0,0,.3)} /* دکمه لیکویید گلس */ .promo__c .btn{align-self:flex-start;color:#fff;font-weight:700; background:rgba(255,255,255,.18); backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%); border:1px solid rgba(255,255,255,.55); box-shadow:0 6px 18px rgba(20,10,40,.16),inset 0 1px 0 rgba(255,255,255,.4); text-shadow:0 1px 2px rgba(0,0,0,.25); transition:.25s var(--ease)} .promo__c .btn:hover{background:rgba(255,255,255,.3);transform:translateY(-2px)} .promo__c .big{position:absolute;left:-8px;bottom:-22px;font-size:130px;opacity:.85;filter:drop-shadow(0 10px 16px rgba(0,0,0,.18));pointer-events:none} .promo__c .promo__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .promo__c .promo__over{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px} /* ─── چیپس سن ───────────────────────────────── */ .pills{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:22px} .pill{padding:9px 18px;border-radius:50px;border:1.5px solid var(--line);background:var(--card);font-weight:700; font-size:14px;cursor:pointer;transition:.25s var(--ease);font-family:inherit;color:var(--ink)} .pill:hover{border-color:var(--p);color:var(--p)} .pill.on{background:var(--grad);color:#fff;border-color:transparent} /* ─── پیشنهاد برای فرزند ────────────────────── */ .child-suggest{position:relative;border-radius:var(--radius);padding:22px;margin-bottom:18px; box-shadow:var(--shadow-sm);overflow:hidden} /* بک‌گراند فانتزی بر اساس جنسیت — ملایم */ /* دختر: راه‌راه نازک صورتی */ .child-suggest--girl{ background: repeating-linear-gradient(45deg, rgba(255,122,170,.07) 0 14px, transparent 14px 32px), linear-gradient(135deg, #fff4f9, #ffe7f1)} /* پسر: نقطه‌های آبی (پولکا دات) */ .child-suggest--boy{ background: radial-gradient(rgba(70,165,255,.13) 1.6px, transparent 1.7px) 0 0 / 20px 20px, linear-gradient(135deg, #f0f8ff, #e2eefb)} /* نامشخص: نقطه‌های نارنجی */ .child-suggest--neutral{ background: radial-gradient(rgba(255,170,90,.13) 1.6px, transparent 1.7px) 0 0 / 20px 20px, linear-gradient(135deg, #fff9ef, #ffefd9)} .child-suggest>*{position:relative;z-index:1} .child-suggest__head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px} .child-suggest__av{width:48px;height:48px;border-radius:16px;background:var(--grad);display:grid;place-items:center;color:#fff;font-size:22px;flex-shrink:0;box-shadow:var(--shadow-sm)} .child-suggest--boy .child-suggest__av{background:linear-gradient(135deg,#4fa8f5,#3fd0c0)} .child-suggest--neutral .child-suggest__av{background:linear-gradient(135deg,#ffb347,#ff8a5b)} .child-suggest__info{min-width:0} .child-suggest__head b{font-size:17px;display:block} .child-suggest__head small{font-size:12px;color:var(--muted)} .csug-edit-link{font-size:12px;font-weight:700;color:var(--p);padding:6px 12px;border-radius:10px; background:var(--soft);text-decoration:none;white-space:nowrap;transition:.2s} .csug-edit-link:hover{background:color-mix(in srgb,var(--p) 15%,transparent)} .csug-btns{margin-inline-start:auto;flex-shrink:0;display:flex;align-items:center;gap:10px} .csug-story-btn{flex-shrink:0;background:var(--grad);color:#fff;border:none;border-radius:20px; padding:6px 14px;font-size:12px;font-weight:700;font-family:inherit;cursor:pointer; display:flex;align-items:center;gap:4px;white-space:nowrap;box-shadow:var(--shadow-sm)} .csug-story-btn:hover{opacity:.88;transform:scale(1.03)} @media(max-width:560px){ .csug-edit-link{order:3;flex-basis:100%;text-align:center;margin-top:4px} .csug-btns{order:2} } /* ─── Story Viewer (روشن و شاداب) ─────────────── */ .story-ov{position:fixed;inset:0;z-index:500; background: radial-gradient(120% 80% at 80% 0%, color-mix(in srgb,var(--p) 55%,transparent), transparent 60%), radial-gradient(120% 80% at 10% 100%, color-mix(in srgb,var(--p2) 55%,transparent), transparent 60%), linear-gradient(135deg, color-mix(in srgb,var(--p) 22%,#fff), color-mix(in srgb,var(--mint) 30%,#fff)); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); display:flex;flex-direction:column; opacity:0;pointer-events:none;transition:opacity .25s} .story-ov.is-open{opacity:1;pointer-events:auto} /* نوار پیشرفت */ .story-bars{display:flex;gap:5px;padding:14px 16px 10px;position:relative;z-index:520} .story-bar{flex:1;height:4px;background:rgba(255,255,255,.55);border-radius:4px;overflow:hidden; box-shadow:0 1px 2px rgba(20,10,40,.08)} .story-bar.done{background:#fff} .story-bar.active{background:rgba(255,255,255,.55)} .story-bar__fill{height:100%;background:#fff;border-radius:4px;width:0;animation:storyFill linear forwards} @keyframes storyFill{from{width:0}to{width:100%}} /* هدر */ .story-top{display:flex;align-items:center;gap:10px;padding:0 16px 16px;position:relative;z-index:520} .story-child-info{display:flex;align-items:center;gap:8px;flex:1} .story-child-av{font-size:24px;width:42px;height:42px;display:grid;place-items:center; background:rgba(255,255,255,.7);border-radius:50%; backdrop-filter:blur(10px);box-shadow:0 4px 14px rgba(20,10,40,.12),inset 0 1px 0 rgba(255,255,255,.8)} .story-child-name{color:#fff;font-weight:800;font-size:15px;text-shadow:0 1px 8px rgba(20,10,40,.25)} .story-close{background:rgba(255,255,255,.7);border:none;border-radius:50%; width:38px;height:38px;font-size:17px;color:var(--ink);cursor:pointer;display:grid;place-items:center; backdrop-filter:blur(10px);box-shadow:0 4px 14px rgba(20,10,40,.12),inset 0 1px 0 rgba(255,255,255,.8); transition:.2s} .story-close:hover{transform:scale(1.06);color:var(--p)} /* کارت محصول — لیکویید گلس روشن */ .story-body{flex:1;display:flex;align-items:center;justify-content:center;padding:0 20px;position:relative;z-index:515;pointer-events:none} .story-card{display:flex;flex-direction:column;width:100%;max-width:330px; background:linear-gradient(160deg, rgba(255,255,255,.85), rgba(255,255,255,.65)); backdrop-filter:blur(26px) saturate(1.8);-webkit-backdrop-filter:blur(26px) saturate(1.8); border:1px solid rgba(255,255,255,.9);border-radius:30px;overflow:hidden; box-shadow:0 24px 70px rgba(20,10,40,.28),inset 0 1px 0 rgba(255,255,255,.95); pointer-events:none} .story-img-wrap{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--soft);max-height:52vh; margin:8px 8px 0;width:calc(100% - 16px);border-radius:24px} .story-img-wrap img{width:100%;height:100%;object-fit:cover} /* اکشن‌های شیشه‌ای استوری — pointer-events فعال */ .story-acts{position:absolute;top:11px;left:11px;display:flex;flex-direction:column;gap:8px;z-index:6;pointer-events:auto} /* نوار سایز استوری */ .story-sizebar{position:absolute;left:8px;right:8px;bottom:8px;z-index:6;display:flex;flex-wrap:wrap;gap:6px; align-items:center;justify-content:center;padding:9px 8px;border-radius:14px;pointer-events:auto; background:color-mix(in srgb,var(--card) 60%,transparent); backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%); border:1px solid rgba(255,255,255,.6);box-shadow:0 12px 28px rgba(20,10,40,.22); transform:translateY(130%);opacity:0;pointer-events:none;transition:transform .4s var(--spring),opacity .3s ease} .story-sizebar.open{transform:none;opacity:1;pointer-events:auto} .story-sizechip{border:1.5px solid var(--line);background:#fff;border-radius:9px;padding:6px 12px; font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;color:var(--ink);transition:.2s var(--ease)} .story-sizechip:hover{border-color:var(--p);background:var(--soft);color:var(--p)} .story-sizechip.chosen{background:var(--mint);color:#fff;border-color:transparent} .story-info{padding:16px 20px 6px;color:var(--ink)} .story-pname{font-size:16px;font-weight:800;margin-bottom:8px;line-height:1.5;color:var(--ink)} .story-price{font-size:16px;font-weight:800;color:var(--p)} .story-price s{color:var(--muted);font-weight:400;margin-left:6px;font-size:13px} .story-price b{color:var(--p)} /* دکمه مشاهده — تنها چیزی که pointer-events داره */ .story-action{display:block;margin:12px 16px 16px;background:var(--grad);color:#fff;border-radius:16px; padding:13px;text-align:center;font-weight:800;font-size:15px;text-decoration:none; box-shadow:0 8px 22px color-mix(in srgb,var(--p) 40%,transparent); position:relative;z-index:10;pointer-events:auto;transition:.2s} .story-action:hover{transform:translateY(-2px);box-shadow:0 12px 30px color-mix(in srgb,var(--p) 50%,transparent)} /* zones تپ — از زیر هدر شروع میشن */ .story-tap{position:fixed;top:100px;bottom:0;width:50%;z-index:510;cursor:pointer} .story-tap--prev{right:0} .story-tap--next{left:0} /* ─── فوتر مینیمال (هماهنگ با تم روشن سایت) ──── */ .site-footer{margin-top:36px;padding:28px 0 calc(28px + env(safe-area-inset-bottom)); background:var(--soft);border-top:1px solid var(--line)} .site-footer__in{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center} .site-footer__social{display:flex;gap:10px} .site-footer__social a{width:38px;height:38px;border-radius:12px;color:var(--muted); background:var(--card);border:1px solid var(--line);display:grid;place-items:center; transition:.2s var(--ease)} .site-footer__social a:hover{border-color:var(--p);color:var(--p);background:color-mix(in srgb,var(--p) 10%,transparent);transform:translateY(-2px)} .site-footer__bottom{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px; font-size:12.5px;color:var(--muted)} .site-footer__dot{opacity:.5} .site-footer__bottom a{color:var(--p);font-weight:700} .site-footer__bottom a:hover{text-decoration:underline} /* ─── انیمیشن ظاهرشدن ───────────────────────── */ .reveal{opacity:0;transform:translateY(28px);transition:.7s var(--ease)} .reveal.in{opacity:1;transform:none} /* پاپ/جمع‌شدن جزیره هدر (Dynamic Island) */ @keyframes islandPop{0%{transform:scale(.8);opacity:.5}55%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}} @keyframes islandClose{0%{transform:scale(1.07)}60%{transform:scale(.97)}100%{transform:scale(1)}} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .hero__art,.topbar__marq{animation:none} .site-header .hdr-brand,.site-header .icon-btn{animation:none !important} } /* ════════════════════════════════════════════ ریسپانسیو پوسته ════════════════════════════════════════════ */ @media (max-width:960px){ .grid-4{grid-template-columns:repeat(2,1fr)} .cat__o{aspect-ratio:1} .trust{grid-template-columns:repeat(2,1fr)} .promo{grid-template-columns:1fr} .hero__slide{height:340px} .hero__bg--art{font-size:110px} .hero__glass,.hero__glass--left,.hero__glass--right{right:14px;left:14px;bottom:14px;max-width:none;padding:18px 20px;border-radius:20px} .hero__glass h1{font-size:23px;margin-bottom:8px} .hero__glass p{font-size:14px;margin-bottom:14px} .hero__dots{left:0;right:0;justify-content:center;bottom:auto;top:14px} .hero__arrow{width:38px;height:38px;top:130px} .head h2{font-size:22px} } @media (max-width:768px){ /* منوی کشویی موبایل */ .hdr-burger{display:block} .mainnav{display:none} .bottom-nav{display:flex} body{padding-bottom:calc(78px + env(safe-area-inset-bottom));padding-top:74px} /* ── صفحه اصلی: اسلایدر تمام‌قاب زیر هدر شیشه‌ای ── */ /* هدر شناور روی عکس اسلایدر می‌نشیند؛ با اسکرول، ترنزیشن Dynamic Island روی عکس دیده می‌شود */ body.is-home{padding-top:0} body.is-home .hero{padding:0} body.is-home .hero > .wrap{max-width:100%;padding:0} body.is-home .hero__slider{border-radius:0 0 24px 24px} body.is-home .hero__slide{height:440px} /* پنل متن از پایین کمی بالاتر تا از bottom-nav فاصله بگیرد */ body.is-home .hero__glass,body.is-home .hero__glass--left,body.is-home .hero__glass--right{bottom:24px} /* نقطه‌ها درست زیر لبه‌ی هدر */ body.is-home .hero__dots{top:74px;bottom:auto} /* فلش‌ها در مرکز عمودی عکس */ body.is-home .hero__arrow{top:calc(50% - 10px)} .topbar{display:none} .hdr-tools{gap:10px} .hdr-tools .icon-btn{border-radius:50%} .hide-mobile{display:none} .site-header__in{height:auto;gap:10px} /* ── حالت بالای صفحه: یک کادر کپسولی Liquid Glass یکپارچه ── */ /* بلر فقط روی کادر داخلی (.site-header__in) باشد؛ خود نوار کامل شفاف/بدون بلر است */ .site-header{position:fixed;top:0;left:0;right:0;padding:8px 0; background:transparent;border:none;box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none; transition:padding .45s var(--spring)} /* لایه‌ی گلس با ::before: بلر همیشه مقدار ثابت دارد؛ فقط opacity فید می‌شود (تا از پرش ناگهانی بلر جلوگیری شود) */ .site-header__in{position:relative;margin:0 12px;width:auto;padding:8px 12px 8px 14px; transition:margin .45s var(--spring),padding .45s var(--spring)} .site-header__in::before{content:"";position:absolute;inset:0;z-index:0;border-radius:28px; background:color-mix(in srgb,var(--card) 60%,transparent); backdrop-filter:blur(24px) saturate(185%);-webkit-backdrop-filter:blur(24px) saturate(185%); border:1px solid rgba(255,255,255,.55); box-shadow:0 10px 30px rgba(20,10,40,.16),inset 0 1px 0 rgba(255,255,255,.65); opacity:1;transition:opacity .35s var(--ease)} .site-header__in > *{position:relative;z-index:1} .hdr-brand{border-radius:50px;padding:2px 4px;background:transparent;border:1px solid transparent;box-shadow:none} /* ── حالت اسکرول‌شده: کادر می‌شکند به جزیره‌های شناور جدا (Dynamic Island) ── */ .site-header.is-scrolled{padding:12px 0} .site-header.is-scrolled .site-header__in{margin:0 12px;padding:0} .site-header.is-scrolled .site-header__in::before{opacity:0} .site-header.is-scrolled .hdr-brand{gap:7px;padding:7px 16px 7px 9px; background:color-mix(in srgb,var(--card) 60%,transparent); backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%); border-color:rgba(255,255,255,.55); box-shadow:0 12px 30px rgba(20,10,40,.18),inset 0 1px 0 rgba(255,255,255,.6); animation:islandPop .5s var(--spring) both} .site-header.is-scrolled .hdr-tools .icon-btn{ box-shadow:0 8px 22px rgba(20,10,40,.16),inset 0 1px 0 rgba(255,255,255,.6); animation:islandPop .52s var(--spring) both} .site-header.is-scrolled .hdr-tools .icon-btn:nth-child(3){animation-delay:.06s} /* بازگشت به بالا هم با جمع‌شدن فنری (فقط بعد از اولین اسکرول، نه موقع لود) */ body.hdr-ready .site-header:not(.is-scrolled) .hdr-brand{animation:islandClose .42s var(--spring) both} .unpaid-banner{position:static;top:auto;margin:0 12px 8px;border-radius:18px} } @media (max-width:560px){ .site-header__in{height:60px;gap:10px} .site-header{} .logo__txt{font-size:19px} .hide-mobile{display:none} .cat--icon .cat__o{font-size:32px;border-radius:18px} .cat__label,.cat__label--plain{font-size:12.5px} .wrap{padding:0 14px} .unpaid-banner{top:60px} } /* ════════════════════════════════════════════════════════════ ↓↓↓ کامپوننت‌های صفحات موجود (حفظ‌شده) ↓↓↓ این بخش‌ها توسط صفحات دسته/محصول/سبد/حساب/احراز استفاده می‌شوند و در پله‌های بعدی بازطراحی خواهند شد. رنگ‌ها از توکن‌های جدید می‌آیند. ════════════════════════════════════════════════════════════ */ /* ─── Gender Nav (legacy) ─────────────────────── */ .gender-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:20px 0} .gender-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 16px;border-radius:var(--radius);font-weight:700;font-size:16px;transition:transform .15s} .gender-card:active{transform:scale(.97)} .gender-card__icon{font-size:36px} .gender-card--girl{background:#fff0f6;color:#e91e8c} .gender-card--boy{background:#f0f8ff;color:#1e6fe9} /* ─── Section / Product Grid (legacy — صفحه دسته) ── */ .section{padding:8px 0 24px;max-width:var(--maxw);margin:0 auto} .section__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .section__header h2{font-size:17px;font-weight:700} .product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .product-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:transform .15s} .product-card:active{transform:scale(.98)} .product-card__img{aspect-ratio:3/4;object-fit:cover;width:100%;background:#f0f0f0} .product-card__body{padding:10px 12px 12px} .product-card__name{font-size:13px;font-weight:600;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .product-card__price{font-size:14px;font-weight:700;color:var(--primary)} .product-card__price-old{font-size:12px;color:var(--text-muted);text-decoration:line-through;margin-right:4px} .product-card__img--placeholder{aspect-ratio:3/4;background:linear-gradient(135deg,#f0f0f0,#e0e0e0)} .product-scroll{display:flex;gap:12px;overflow-x:auto;padding:0 0 8px;scrollbar-width:none} .product-scroll::-webkit-scrollbar{display:none} .product-card--scroll{flex-shrink:0;width:160px} .product-card--scroll .product-card__img{height:200px;aspect-ratio:unset} .empty-state{grid-column:1/-1;text-align:center;color:var(--text-muted);padding:32px;font-size:14px} .mid-banner{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#e8f8f7,#f0fff9);padding:14px 16px;border-radius:var(--radius);font-size:13px} .mid-banner__icon{font-size:24px} @media (max-width:960px){.product-grid{grid-template-columns:repeat(2,1fr)}} /* ─── صفحه دسته‌بندی ──────────────────────────── */ .catp{max-width:var(--maxw);margin:0 auto;padding:0 18px} /* هیرو فانتزی دسته */ .catp__hero{position:relative;overflow:hidden;border-radius:var(--radius);padding:30px 28px;margin:18px 0 18px; box-shadow:var(--shadow-sm)} .catp__hero--girl{background:repeating-linear-gradient(45deg,rgba(255,122,170,.08) 0 14px,transparent 14px 32px),linear-gradient(135deg,#fff4f9,#ffe7f1)} .catp__hero--boy{background:radial-gradient(rgba(70,165,255,.14) 1.6px,transparent 1.7px) 0 0/20px 20px,linear-gradient(135deg,#f0f8ff,#e2eefb)} .catp__hero--unisex,.catp__hero--neutral{background:linear-gradient(135deg,color-mix(in srgb,var(--p) 10%,#fff),color-mix(in srgb,var(--p2) 10%,#fff))} .catp__hero>*{position:relative;z-index:1} .catp__crumb{font-size:13px;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:6px} .catp__crumb a{color:var(--p);font-weight:700} .catp__crumb a:hover{text-decoration:underline} .catp__title{display:flex;align-items:center;gap:12px} .catp__emoji{width:54px;height:54px;border-radius:18px;background:var(--card);display:grid;place-items:center; font-size:28px;flex-shrink:0;box-shadow:var(--shadow-sm)} .catp__htext h1{font-size:26px;font-weight:900;line-height:1.2} .catp__count{font-size:13px;color:var(--muted);font-weight:600} /* چیپ‌های زیردسته */ .catp__chips{display:flex;flex-wrap:nowrap;gap:9px;padding:4px 2px 16px;overflow-x:auto; scrollbar-width:none;-webkit-overflow-scrolling:touch} .catp__chips::-webkit-scrollbar{display:none} .catp__chip{display:inline-flex;flex-shrink:0;align-items:center;gap:6px;padding:9px 16px;border-radius:50px; border:1.5px solid var(--line);font-size:14px;font-weight:700;color:var(--muted);white-space:nowrap; background:var(--card);transition:.2s var(--ease)} .catp__chip:hover{border-color:var(--p);color:var(--p);transform:translateY(-1px)} .catp__chip.is-on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 16px color-mix(in srgb,var(--p) 35%,transparent)} .catp__chip-count{font-size:11px;padding:1px 7px;border-radius:20px;background:var(--soft);color:var(--muted)} .catp__chip:hover .catp__chip-count{background:color-mix(in srgb,var(--p) 12%,transparent);color:var(--p)} .catp__chip.is-on .catp__chip-count{background:rgba(255,255,255,.25);color:#fff} /* دکمه «همه دسته‌ها» — باز کردن پاپ‌آپ */ .catp__chip-more{border-style:dashed;border-color:var(--p);color:var(--p);cursor:pointer;font-family:inherit;gap:5px} .catp__chip-more:hover{background:var(--soft)} /* ─── پاپ‌آپ گلس دسته‌ها ───────────────────────── */ .catsheet-ov{position:fixed;inset:0;z-index:400;background:rgba(20,10,30,.4); backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); opacity:0;visibility:hidden;transition:.28s;display:flex;align-items:flex-end;justify-content:center} .catsheet-ov.is-open{opacity:1;visibility:visible} .catsheet{width:100%;max-width:520px;max-height:74vh;display:flex;flex-direction:column; background:color-mix(in srgb,var(--card) 80%,transparent); backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8); border:1px solid rgba(255,255,255,.6);border-bottom:none; border-radius:26px 26px 0 0; box-shadow:0 -16px 50px rgba(20,10,40,.22),inset 0 1px 0 rgba(255,255,255,.7); /* دنباله‌ی پایینی بیرون صفحه: موقع پرش بالا، گپ خالی پر می‌ماند */ margin-bottom:-70px;padding-bottom:70px; transform:translateY(100%); transition:transform .46s cubic-bezier(.25,1.12,.45,1);overflow:hidden} .catsheet-ov.is-open .catsheet{transform:none} .catsheet__grab{width:42px;height:5px;border-radius:5px;background:var(--line);margin:12px auto 4px;flex-shrink:0} .catsheet__hd{display:flex;align-items:center;justify-content:space-between;padding:8px 20px 14px;flex-shrink:0; border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)} .catsheet__hd h3{font-size:17px;font-weight:900} .catsheet__close{background:var(--soft);border:none;border-radius:50%;width:34px;height:34px;font-size:16px; cursor:pointer;color:var(--muted);display:grid;place-items:center;transition:.2s} .catsheet__close:hover{background:color-mix(in srgb,var(--p) 12%,transparent);color:var(--p)} .catsheet__body{overflow-y:auto;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px} .catsheet__item{display:flex;align-items:center;justify-content:space-between;gap:8px; padding:13px 15px;border-radius:14px;border:1.5px solid var(--line);background:var(--card); font-size:14px;font-weight:700;color:var(--ink);transition:.18s var(--ease)} .catsheet__item:hover{border-color:var(--p);background:var(--soft);color:var(--p);transform:translateY(-1px)} .catsheet__item.is-on{background:var(--grad);color:#fff;border-color:transparent} .catsheet__item-count{font-size:11px;padding:1px 7px;border-radius:20px;background:var(--soft);color:var(--muted);flex-shrink:0} .catsheet__item.is-on .catsheet__item-count{background:rgba(255,255,255,.25);color:#fff} @media(max-width:480px){.catsheet__body{grid-template-columns:1fr}} /* نوار جستجو در هیرو */ .srch{display:flex;align-items:center;gap:8px;margin-top:18px;position:relative; background:var(--card);border:1.5px solid var(--line);border-radius:50px;padding:6px 6px 6px 6px; box-shadow:var(--shadow-sm);max-width:480px} .srch:focus-within{border-color:var(--p);box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 16%,transparent)} .srch__ic{display:grid;place-items:center;width:38px;color:var(--muted);flex-shrink:0} .srch__ic .ic{width:19px;height:19px} .srch input{flex:1;border:none;outline:none;background:none;font-family:inherit;font-size:15px; color:var(--ink);min-width:0;padding:8px 0} .srch input::placeholder{color:var(--muted)} .srch__btn{flex-shrink:0;background:var(--grad);color:#fff;border:none;border-radius:50px; padding:10px 22px;font-family:inherit;font-weight:800;font-size:14px;cursor:pointer;transition:.2s} .srch__btn:hover{transform:scale(1.03);box-shadow:0 6px 16px color-mix(in srgb,var(--p) 35%,transparent)} /* گرید محصولات */ .catp__grid{padding:4px 0 24px} /* حالت خالی */ .catp__empty{grid-column:1/-1;text-align:center;padding:48px 20px;color:var(--muted)} .catp__empty-emoji{font-size:54px;display:block;margin-bottom:12px;opacity:.7} @media(max-width:560px){ .catp{padding:0 14px} .catp__hero{padding:22px 20px} .catp__htext h1{font-size:22px} .catp__emoji{width:46px;height:46px;font-size:24px} } /* ─── Product Page (legacy) ───────────────────── */ .product-page{max-width:760px;margin:0 auto;padding:0 18px} .product-gallery{background:#fff} .gallery-main img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius)} .gallery-main--empty{width:100%;aspect-ratio:3/4;background:#f0f0f0;border-radius:var(--radius)} .gallery-thumbs{display:flex;gap:8px;padding:10px 0;overflow-x:auto;scrollbar-width:none} .gallery-thumbs::-webkit-scrollbar{display:none} .gallery-thumb{width:64px;height:80px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;flex-shrink:0;opacity:.7;transition:all .2s} .gallery-thumb.active,.gallery-thumb:hover{border-color:var(--primary);opacity:1} .product-info{padding:16px 0} .product-info__breadcrumb{font-size:12px;color:var(--text-muted);margin-bottom:8px} .product-info__name{font-size:18px;font-weight:700;margin-bottom:10px;line-height:1.4} .product-info__price{font-size:22px;font-weight:900;color:var(--primary);margin-bottom:20px} .product-info__price span{font-size:14px;font-weight:500;color:var(--text-muted)} .size-selector{margin-bottom:20px} .size-selector__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-weight:600;font-size:14px} .size-guide-btn{background:none;border:none;color:var(--secondary);font-family:inherit;font-size:13px;cursor:pointer;padding:0} .size-selector__options{display:flex;flex-wrap:wrap;gap:8px} .size-btn{padding:8px 14px;border-radius:10px;border:2px solid var(--border);background:#fff;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:2px} .size-btn small{font-size:10px;font-weight:500} .size-btn--in{border-color:var(--border);color:var(--text)} .size-btn--low{border-color:#ff9f43;color:#ff9f43} .size-btn--out{border-color:#dfe6e9;color:#b2bec3;background:#f8f9fa;text-decoration:line-through;cursor:not-allowed} .size-btn.selected,.size-btn--in:hover{border-color:var(--primary);background:var(--soft);color:var(--primary)} .size-selector__msg{font-size:13px;color:var(--primary);margin-top:8px;min-height:20px} .product-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:20px} .notify-form{background:#f8f9fa;border-radius:var(--radius);padding:16px;margin-bottom:16px} .notify-form p{font-size:13px;margin-bottom:10px;color:var(--text-muted)} .notify-form__row{display:flex;gap:8px} .notify-form__row input{flex:1;min-width:0;padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;font-family:inherit;font-size:14px;direction:ltr} .notify-form__row button{padding:10px 18px;background:var(--primary);color:#fff;border:none;border-radius:10px;font-family:inherit;font-weight:700;cursor:pointer} .product-details{border-top:1px solid var(--border);padding-top:16px;margin-top:4px} .product-detail-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px} .product-detail-row span:first-child{color:var(--text-muted)} .size-guide-modal{border:none;border-radius:var(--radius);padding:24px;width:min(90vw,400px);box-shadow:0 8px 32px rgba(0,0,0,.15)} .size-guide-modal::backdrop{background:rgba(0,0,0,.5)} .size-guide-modal h3{margin-bottom:16px;font-size:16px} .modal-close{position:absolute;top:12px;left:12px;background:none;border:none;font-size:18px;cursor:pointer;color:var(--text-muted)} .size-table{width:100%;border-collapse:collapse;font-size:13px} .size-table th,.size-table td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:center} .size-table th{background:#f8f9fa;font-weight:700} /* ─── Cart ────────────────────────────────────── */ .crt{padding-top:24px;padding-bottom:60px} /* empty state */ .crt__empty{text-align:center;padding:80px 20px} .crt__empty-art{font-size:88px;display:block;margin-bottom:20px;animation:crtBounce 1.6s ease infinite} @keyframes crtBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}} .crt__empty h2{font-size:22px;font-weight:900;margin-bottom:8px} .crt__empty p{font-size:15px;color:var(--muted);margin-bottom:28px} /* page header */ .crt__head{display:flex;align-items:baseline;gap:12px;margin-bottom:24px} .crt__title{font-size:22px;font-weight:900} .crt__count{font-size:13px;color:var(--muted);background:var(--soft);padding:3px 12px;border-radius:20px} /* layout */ .crt__layout{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start} /* items list */ .crt__list{display:flex;flex-direction:column;gap:12px} .crt__row{display:flex;gap:14px;background:#fff;border-radius:18px;padding:14px;box-shadow:var(--shadow-sm);transition:opacity .3s var(--ease),transform .3s var(--ease)} .crt__row.removing{opacity:0;transform:scale(.95) translateY(-6px)} .crt__img-wrap{flex-shrink:0;text-decoration:none} .crt__img{width:86px;height:106px;object-fit:cover;border-radius:12px;background:var(--soft);display:block} .crt__img--ph{display:grid;place-items:center;font-size:38px;height:106px;width:86px;border-radius:12px;background:var(--soft)} .crt__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px} .crt__name{font-weight:700;font-size:14px;color:var(--ink);text-decoration:none;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .crt__name:hover{color:var(--p)} .crt__size{font-size:12px;color:var(--muted);background:var(--soft);border-radius:8px;padding:2px 9px;display:inline-block;width:fit-content} .crt__row-foot{margin-top:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap} /* stepper */ .crt__stepper{display:flex;align-items:center;background:var(--soft);border-radius:12px;overflow:hidden;flex-shrink:0} .crt__step{width:32px;height:32px;border:none;background:none;font-size:17px;cursor:pointer;color:var(--ink);transition:background .2s,color .2s;display:grid;place-items:center} .crt__step:hover:not(:disabled){background:var(--p);color:#fff} .crt__step:disabled{opacity:.3;cursor:default} .crt__qty{min-width:26px;text-align:center;font-weight:800;font-size:14px} .crt__line-price{margin-right:auto;font-weight:700;font-size:14px;color:var(--p);white-space:nowrap} .crt__del{width:32px;height:32px;border:none;background:none;cursor:pointer;font-size:17px;border-radius:10px;transition:background .2s,opacity .2s;opacity:.45;display:grid;place-items:center} .crt__del:hover{background:#fff0f3;opacity:1} /* summary panel */ .crt__panel{background:#fff;border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden;position:sticky;top:82px} .crt__panel-head{background:var(--grad);padding:16px 20px;color:#fff;font-weight:700;font-size:15px} .crt__srows{padding:4px 20px;display:flex;flex-direction:column} .crt__srow{display:flex;justify-content:space-between;align-items:center;padding:11px 0;font-size:13px;border-bottom:1px solid var(--line)} .crt__srow:last-child{border-bottom:none} .crt__ship{color:var(--muted);font-size:12px} .crt__ptotal{display:flex;justify-content:space-between;align-items:center;padding:13px 20px;background:var(--soft);font-size:14px;font-weight:700} .crt__ptotal strong{color:var(--p);font-size:17px} .crt__checkout{margin:14px 16px 6px;display:block;text-align:center;border-radius:14px;width:calc(100% - 32px)} .crt__continue{display:block;text-align:center;padding:10px;font-size:13px;color:var(--muted);margin-bottom:6px;text-decoration:none} .crt__continue:hover{color:var(--p)} /* responsive */ @media (max-width:860px){ .crt__layout{grid-template-columns:1fr} .crt__panel{position:static} } @media (max-width:480px){ .crt__img{width:72px;height:90px}.crt__img--ph{width:72px;height:90px} .crt__img-wrap{width:72px} } /* legacy aliases (برای احتمال استفاده در checkout و جاهای دیگر) */ .empty-cart{text-align:center;padding:60px 20px;color:var(--muted)} .empty-cart__icon{font-size:64px;margin-bottom:12px} .text-muted{color:var(--muted)} /* ─── Checkout ────────────────────────────────── */ .chk{padding-top:24px;padding-bottom:60px} /* progress steps */ .chk__steps{display:flex;align-items:center;justify-content:center;margin-bottom:28px} .chk__step{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--muted)} .chk__step.active{color:var(--p)} .chk__step-n{width:28px;height:28px;border-radius:50%;border:2px solid currentColor;display:grid;place-items:center;font-size:12px;font-weight:800;flex-shrink:0;transition:.3s} .chk__step.active .chk__step-n{background:var(--p);border-color:var(--p);color:#fff} .chk__step.done .chk__step-n{background:var(--mint);border-color:var(--mint);color:#fff} .chk__step-line{width:48px;height:2px;background:var(--line);margin:0 6px;border-radius:2px} /* alert */ .chk__alert{background:#fff8e1;border:1.5px solid #f5a623;color:#7d5a00;border-radius:14px;padding:16px 18px;margin-bottom:20px} .chk__alert strong{display:block;margin-bottom:10px;font-size:14px;font-weight:700} /* layout */ .chk__layout{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start} /* form sections */ .chk__sec{background:#fff;border-radius:18px;padding:20px;box-shadow:var(--shadow-sm);margin-bottom:14px} .chk__sec:last-of-type{margin-bottom:0} .chk__sec-title{font-size:15px;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:8px} .chk__sec-title em{font-size:22px;font-style:normal} /* shipping options */ .chk__ship-opts{display:flex;flex-direction:column;gap:10px} .chk__ship-opt{display:block;cursor:pointer} .chk__ship-opt input{position:absolute;opacity:0;width:0;height:0} .chk__ship-body{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:14px;border:1.5px solid var(--line);transition:border-color .2s,background .2s} .chk__ship-opt input:checked + .chk__ship-body{border-color:var(--p);background:var(--soft)} .chk__ship-em{font-size:22px;flex-shrink:0} .chk__ship-name{flex:1;font-weight:600;font-size:14px} .chk__ship-price{font-weight:700;font-size:14px;color:var(--p)} /* address selector */ .chk__addr-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px} .chk__addr-opt{display:block;cursor:pointer} .chk__addr-opt input{position:absolute;opacity:0;width:0;height:0} .chk__addr-body{display:flex;flex-direction:column;gap:4px;padding:13px 16px;border-radius:14px;border:1.5px solid var(--line);transition:border-color .2s,background .2s} .chk__addr-opt input:checked + .chk__addr-body{border-color:var(--p);background:var(--soft)} .chk__addr-title{font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px} .chk__addr-text{font-size:12.5px;color:var(--muted);line-height:1.6} .chk__new-addr{padding-top:4px} /* summary panel */ .chk__panel{background:#fff;border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden;position:sticky;top:82px} .chk__panel-head{background:var(--grad);padding:16px 20px;color:#fff;font-weight:700;font-size:15px} .chk__items{padding:8px 20px;max-height:260px;overflow-y:auto;display:flex;flex-direction:column} .chk__item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)} .chk__item:last-child{border-bottom:none} .chk__item-img{width:44px;height:54px;object-fit:cover;border-radius:8px;flex-shrink:0;background:var(--soft)} .chk__item-ph{width:44px;height:54px;border-radius:8px;background:var(--soft);display:grid;place-items:center;font-size:22px;flex-shrink:0} .chk__item-info{flex:1;min-width:0} .chk__item-name{font-size:13px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chk__item-meta{font-size:11px;color:var(--muted);display:block;margin-top:2px} .chk__item-price{font-size:13px;font-weight:700;color:var(--p);white-space:nowrap} .chk__totals{padding:4px 20px;display:flex;flex-direction:column} .chk__trow{display:flex;justify-content:space-between;align-items:center;padding:10px 0;font-size:13px;border-bottom:1px solid var(--line)} .chk__trow:last-child{border-bottom:none} .chk__tfinal{display:flex;justify-content:space-between;align-items:center;padding:13px 20px;background:var(--soft);font-size:14px;font-weight:700} .chk__tfinal strong{color:var(--p);font-size:17px} .chk__submit{margin:14px 16px 6px;display:block;border-radius:14px;width:calc(100% - 32px);text-align:center} .chk__back{display:block;text-align:center;padding:10px;font-size:13px;color:var(--muted);margin-bottom:6px;text-decoration:none} .chk__back:hover{color:var(--p)} @media(max-width:860px){ .chk__layout{grid-template-columns:1fr} .chk__panel{position:static} } /* ─── Pay page ────────────────────────────────── */ .pay{padding-top:24px;padding-bottom:60px} .pay__layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start} /* bank card */ .pay__card{background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);color:#fff;border-radius:24px;padding:28px 24px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden} .pay__card::before{content:"";position:absolute;inset:-40px;background:radial-gradient(circle at 30% 20%,rgba(255,93,143,.25),transparent 60%),radial-gradient(circle at 80% 80%,rgba(255,138,91,.2),transparent 50%);pointer-events:none} .pay__card-lbl{font-size:12px;opacity:.65;margin-bottom:5px} .pay__card-amount{font-size:32px;font-weight:900;margin-bottom:4px} .pay__card-amount small{font-size:15px;font-weight:400;opacity:.7} .pay__card-ordnum{font-size:12px;opacity:.5;margin-bottom:18px} .pay__card-divider{height:1px;background:rgba(255,255,255,.15);margin:16px 0} .pay__card-num{font-size:20px;font-weight:700;letter-spacing:.12em;margin:8px 0 10px;direction:ltr;font-variant-numeric:tabular-nums} .pay__card-iban{font-size:14px;font-weight:600;letter-spacing:.06em;margin:8px 0 10px;direction:ltr;word-spacing:6px} .pay__copy{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;padding:7px 16px;border-radius:20px;font-size:12px;cursor:pointer;font-family:inherit;transition:.2s;display:inline-flex;align-items:center;gap:6px} .pay__copy:hover{background:rgba(255,255,255,.22)} .pay__copy.copied{background:rgba(62,198,176,.3);border-color:var(--mint)} .pay__card-holder{font-size:12px;opacity:.55;margin-top:10px} /* right col: guide + upload */ .pay__right{display:flex;flex-direction:column;gap:16px} /* guide steps */ .pay__guide{display:flex;flex-direction:column;gap:10px} .pay__guide-step{display:flex;align-items:center;gap:14px;background:#fff;border-radius:16px;padding:14px 16px;box-shadow:var(--shadow-sm)} .pay__guide-n{width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;flex-shrink:0} .pay__guide-txt{font-size:14px;font-weight:500;line-height:1.4} /* upload section */ .pay__upload{background:#fff;border-radius:18px;padding:20px;box-shadow:var(--shadow-sm)} .pay__upload-title{font-size:15px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px} .pay__upload-area{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 20px;border:2px dashed var(--line);border-radius:16px;background:var(--bg);cursor:pointer;transition:border-color .2s,background .2s;text-align:center} .pay__upload-area:hover,.pay__upload-area.drag-over{border-color:var(--p);background:var(--soft)} .pay__upload-area em{font-size:36px;font-style:normal} .pay__upload-area strong{font-size:14px;font-weight:700;color:var(--ink)} .pay__upload-area span{font-size:12px;color:var(--muted)} .pay__preview{margin-top:14px;text-align:center} .pay__preview img{max-width:100%;max-height:240px;border-radius:14px;border:2px solid var(--mint)} .pay__preview-clear{background:none;border:none;color:var(--p);font-size:13px;cursor:pointer;margin-top:8px;font-family:inherit} /* error */ .pay__error{background:#fff5f5;border:1.5px solid #ffcdd2;color:#c0392b;padding:12px 16px;border-radius:12px;margin-bottom:14px;font-size:14px} /* success state */ .pay__success{background:#fff;border-radius:20px;padding:32px 24px;text-align:center;box-shadow:var(--shadow-sm)} .pay__success-icon{font-size:72px;display:block;margin-bottom:16px;animation:crtBounce 2s ease infinite} .pay__success h2{font-size:20px;font-weight:900;margin-bottom:10px} .pay__success p{font-size:14px;color:var(--muted);line-height:1.8;margin-bottom:20px} .pay__success-img{max-width:200px;max-height:200px;border-radius:14px;border:2px solid var(--mint);margin-bottom:20px} @media(max-width:860px){.pay__layout{grid-template-columns:1fr}} /* legacy aliases */ .order-summary-row{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:1px solid var(--border)} .shipping-options{display:flex;flex-direction:column;gap:8px} .shipping-opt input{display:none} .shipping-opt__body{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:12px;border:1.5px solid var(--border);cursor:pointer;transition:all .2s} .shipping-opt input:checked + .shipping-opt__body{border-color:var(--primary);background:var(--soft)} .bank-card{background:linear-gradient(135deg,#2D3436,#636e72);color:#fff;border-radius:20px;padding:24px 20px;margin-bottom:16px;text-align:center} .bank-card__label{font-size:12px;opacity:.7;margin-bottom:6px} .bank-card__amount{font-size:28px;font-weight:900;margin-bottom:16px} .bank-card__amount small{font-size:14px;font-weight:400;opacity:.7} .bank-card__divider{height:1px;background:rgba(255,255,255,.2);margin:12px 0} .bank-card__number{font-size:22px;font-weight:700;letter-spacing:.15em;margin:8px 0;direction:ltr} .bank-card__copy{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;padding:8px 16px;border-radius:20px;font-size:13px;cursor:pointer;margin-top:8px;font-family:inherit} .bank-card__holder{font-size:12px;opacity:.6;margin-top:8px} .pay-steps{display:flex;flex-direction:column;gap:10px;margin-bottom:16px} .pay-step{display:flex;align-items:center;gap:12px;font-size:14px;background:#fff;padding:12px 14px;border-radius:12px;box-shadow:var(--shadow)} .pay-step__num{width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;flex-shrink:0} /* ─── Tracking ────────────────────────────────── */ .trk{padding-top:24px;padding-bottom:60px} .trk__layout{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start} .trk__col{display:flex;flex-direction:column;gap:12px} @media(max-width:860px){.trk__layout{grid-template-columns:1fr}} /* status hero */ .trk__hero{border-radius:22px;padding:28px 24px;text-align:center;margin-bottom:20px;position:relative;overflow:hidden;color:#fff} .trk__hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.18),transparent 60%);pointer-events:none} .trk__hero-icon{font-size:64px;display:block;margin-bottom:12px} .trk__hero-icon.pulse{animation:trkPulse 1.8s ease infinite} @keyframes trkPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}} .trk__hero h1{font-size:22px;font-weight:900;margin-bottom:6px} .trk__hero-num{font-size:13px;opacity:.7;font-variant-numeric:tabular-nums} /* timeline */ .trk__timeline{display:flex;align-items:flex-start;justify-content:center;gap:0;margin-bottom:20px;padding:0 4px} .trk__tstep{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;position:relative} .trk__tstep:not(:last-child)::after{content:"";position:absolute;top:14px;left:-50%;width:100%;height:2px;background:var(--line);z-index:0} .trk__tstep.done::after{background:var(--p)} .trk__tdot{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:#fff;display:grid;place-items:center;font-size:12px;position:relative;z-index:1;transition:.3s;flex-shrink:0} .trk__tstep.done .trk__tdot{background:var(--p);border-color:var(--p);color:#fff} .trk__tstep.active .trk__tdot{background:#fff;border-color:var(--p);color:var(--p);box-shadow:0 0 0 4px color-mix(in srgb,var(--p) 20%,transparent)} .trk__tstep.cancelled .trk__tdot{background:#ff7675;border-color:#ff7675;color:#fff} .trk__tlabel{font-size:11px;color:var(--muted);text-align:center;line-height:1.3;font-weight:500} .trk__tstep.done .trk__tlabel,.trk__tstep.active .trk__tlabel{color:var(--p);font-weight:700} .trk__tstep.cancelled .trk__tlabel{color:#ff7675;font-weight:700} /* section cards */ .trk__sec{background:#fff;border-radius:18px;padding:18px 20px;box-shadow:var(--shadow-sm);margin-bottom:12px} .trk__sec-title{font-size:14px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px} /* order items */ .trk__item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)} .trk__item:last-child{border-bottom:none} .trk__item-img{width:52px;height:64px;object-fit:cover;border-radius:10px;flex-shrink:0;background:var(--soft)} .trk__item-ph{width:52px;height:64px;border-radius:10px;background:var(--soft);display:grid;place-items:center;font-size:24px;flex-shrink:0} .trk__item-info{flex:1;min-width:0} .trk__item-name{font-size:14px;font-weight:600;display:block} .trk__item-meta{font-size:12px;color:var(--muted);margin-top:2px;display:block} .trk__item-price{font-size:14px;font-weight:700;color:var(--p);white-space:nowrap} /* summary rows */ .trk__srow{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:13px;border-bottom:1px solid var(--line)} .trk__srow:last-child{border-bottom:none} .trk__srow--total{font-size:15px;font-weight:800} .trk__srow--total span:last-child{color:var(--p)} /* pay status badge */ .trk__paybadge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-size:13px;font-weight:700} .trk__paybadge.pending{background:#fff8e1;color:#b8860b} .trk__paybadge.confirmed{background:#e8f8f5;color:#00875a} .trk__paybadge.failed{background:#fff5f5;color:#c0392b} /* address */ .trk__addr{font-size:14px;line-height:1.9;color:var(--ink)} /* actions */ .trk__actions{display:flex;gap:10px;margin-bottom:12px} .trk__actions .btn{flex:1} .btn--danger{background:#fff;border:1.5px solid #e74c3c;color:#e74c3c;border-radius:var(--radius-sm);font-family:inherit;cursor:pointer;font-weight:700;font-size:15px;transition:.2s;padding:12px} .btn--danger:hover{background:#e74c3c;color:#fff} /* legacy */ .tracking-header{text-align:center;padding:24px 16px;background:#fff;border-radius:var(--radius);margin-bottom:12px;box-shadow:var(--shadow);border-top:4px solid var(--status-color,var(--primary))} .tracking-header__icon{font-size:48px;margin-bottom:8px} .tracking-header h1{font-size:20px;font-weight:900;margin-bottom:4px} .tracking-header p{font-size:13px;color:var(--text-muted)} .order-item-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)} .order-item-row:last-of-type{border-bottom:none} .order-item-row__img{width:48px;height:60px;object-fit:cover;border-radius:8px;flex-shrink:0} .order-item-row__info{flex:1} .order-item-row__info strong{display:block;font-size:14px} .order-item-row__info small{font-size:12px;color:var(--text-muted)} .order-item-row__price{font-size:14px;font-weight:700;color:var(--primary);white-space:nowrap} .detail-row{display:flex;justify-content:space-between;font-size:14px;padding:8px 0} /* ─── Auth Pages ──────────────────────────────── */ .auth-page{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:24px 16px} .auth-card{background:#fff;border-radius:24px;padding:34px 28px;width:100%;max-width:400px;box-shadow:var(--shadow-md);text-align:center} .auth-card__icon{font-size:52px;margin-bottom:14px;display:block} .auth-card h1{font-size:22px;font-weight:900;margin-bottom:8px} .auth-card__sub{font-size:14px;color:var(--muted);margin-bottom:24px;line-height:1.7} .auth-form{text-align:right} .form-group{margin-bottom:16px} .form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:6px} .label-optional{font-weight:400;color:var(--text-muted)} .form-group input,.form-group textarea,.form-group select{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:12px;font-family:inherit;font-size:15px;transition:border-color .2s;background:#fff} .form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--primary);outline:none} .form-group textarea{resize:vertical} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px} .form-note{font-size:12px;color:var(--text-muted);margin-bottom:16px} .skip-link{display:block;margin-top:16px;font-size:13px;color:var(--text-muted)} .alert{padding:10px 14px;border-radius:10px;margin-bottom:16px;font-size:13px} .alert--error{background:#fff5f5;color:#e74c3c;border:1px solid #fcc} .alert--info{background:#e8f8f7;color:#00b894;border:1px solid #b2dfdb} .method-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px} .method-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;border:1.5px solid var(--line);background:#fff;text-align:right;transition:.2s;cursor:pointer;color:var(--ink);text-decoration:none} .method-card:hover{border-color:var(--p);background:var(--soft)} .method-card--rec{border-color:var(--p);background:var(--soft)} .method-card--rec strong{color:var(--p)} .method-card__icon{font-size:26px;flex-shrink:0} .method-card > div{flex:1} .method-card > div strong{display:block;font-size:15px;margin-bottom:2px} .method-card > div small{font-size:12px;color:var(--muted)} .method-card__badge{font-size:10px;background:var(--p);color:#fff;padding:2px 8px;border-radius:20px;vertical-align:middle;margin-right:6px} .method-card__arrow{color:var(--p);font-size:18px;flex-shrink:0} /* OTP boxes */ .otp-boxes{display:flex;justify-content:center;gap:10px;margin-bottom:20px;direction:ltr} .otp-box{width:48px;height:58px;border-radius:14px;border:2px solid var(--line);font-size:24px;font-weight:800;text-align:center;outline:none;transition:.2s;background:#fff;color:var(--ink);caret-color:var(--p)} .otp-box:focus{border-color:var(--p);box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 20%,transparent)} .otp-box.filled{border-color:var(--p);background:var(--soft)} /* resend timer */ .otp-resend{font-size:13px;color:var(--muted);margin-top:12px;text-align:center} .otp-resend a{color:var(--p);font-weight:700;text-decoration:none} .otp-resend a.disabled{color:var(--muted);pointer-events:none} .otp-timer{font-weight:700;color:var(--ink)} /* remember me */ .remember-label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer;margin:4px 0 0;text-align:right} .remember-label input{width:auto;margin:0;accent-color:var(--p)} .input-password{position:relative} .input-password input{padding-left:44px} .toggle-pass{position:absolute;left:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:18px;padding:0} .auth-back{display:block;margin-top:16px;font-size:13px;color:var(--muted);text-decoration:none;text-align:center} .auth-back:hover{color:var(--p)} .gender-toggle{display:flex;gap:10px} .gender-opt{flex:1} .gender-opt input{display:none} .gender-opt span{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border-radius:12px;border:1.5px solid var(--border);cursor:pointer;font-size:14px;font-weight:600;transition:all .2s} .gender-opt input:checked + span{border-color:var(--primary);background:var(--soft);color:var(--primary)} /* ─── Account ─────────────────────────────────── */ .acc{padding-top:24px;padding-bottom:60px} .acc__layout{display:grid;grid-template-columns:260px 1fr;gap:22px;align-items:start} @media(max-width:860px){.acc__layout{grid-template-columns:1fr}} /* sidebar */ .acc__sidebar{position:sticky;top:82px} @media(max-width:860px){.acc__sidebar{position:static}} .acc__profile{background:#fff;border-radius:20px;padding:24px 20px;box-shadow:var(--shadow-sm);text-align:center} .acc__av{width:72px;height:72px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:28px;font-weight:800;margin:0 auto 14px;box-shadow:var(--shadow-md)} .acc__name{font-size:16px;font-weight:800;margin-bottom:4px} .acc__phone{font-size:13px;color:var(--muted);direction:ltr;display:block;margin-bottom:20px} .acc__logout{display:block;padding:10px;background:none;border:1.5px solid var(--line);border-radius:12px;color:var(--muted);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:.2s} .acc__logout:hover{border-color:#e74c3c;color:#e74c3c} /* section cards */ .acc__sec{background:#fff;border-radius:18px;padding:18px 20px;box-shadow:var(--shadow-sm);margin-bottom:14px} .acc__sec:last-child{margin-bottom:0} .acc__sec-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px} .acc__sec-title{font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px} .acc__add{font-size:13px;font-weight:700;color:var(--p);text-decoration:none;padding:6px 14px;border:1.5px solid var(--p);border-radius:10px;transition:.2s} .acc__add:hover{background:var(--p);color:#fff} /* children cards */ .kids-list{display:flex;flex-direction:column;gap:10px} .kid{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--bg);border-right:4px solid var(--kid-c,var(--p))} .kid.girl{--kid-c:#ff5d8f} .kid.boy{--kid-c:#4a90d9} .kid__ic{font-size:28px;flex-shrink:0} .kid__info{flex:1;min-width:0} .kid__name{font-size:14px;font-weight:700;display:block} .kid__age{font-size:12px;color:var(--muted);margin-top:2px;display:block} .kid__acts{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap} .kid__edit{font-size:12px;font-weight:700;color:var(--text);padding:7px 14px;border-radius:10px;background:var(--soft);text-decoration:none;white-space:nowrap;transition:.2s} .kid__edit:hover{background:color-mix(in srgb,var(--p) 15%,transparent)} .kid__edit--alert{background:#fff3cd;color:#7d5a00;animation:trkPulse 1.5s ease infinite} .kid__shop{font-size:12px;font-weight:700;color:var(--p);padding:6px 12px;border-radius:10px;border:1.5px solid var(--p);text-decoration:none;white-space:nowrap;transition:.2s} .kid__shop:hover{background:var(--p);color:#fff} @media(max-width:480px){.kid__acts{flex-basis:100%;justify-content:flex-end;margin-top:2px}} .kids-empty{text-align:center;padding:20px 0;color:var(--muted);font-size:14px} /* address book */ .addr-list{display:flex;flex-direction:column;gap:10px} .addr{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--bg);border-right:4px solid var(--line)} .addr.is-default{border-right-color:var(--p)} .addr__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .addr__title{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px} .addr__badge{font-size:10.5px;font-weight:700;color:#fff;background:var(--p);border-radius:20px;padding:2px 9px} .addr__text{font-size:12.5px;color:var(--muted);line-height:1.6} .addr__acts{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap} .addr__act{font-size:12px;font-weight:700;color:var(--text);padding:7px 14px;border-radius:10px;background:var(--soft); text-decoration:none;white-space:nowrap;transition:.2s;border:none;cursor:pointer;font-family:inherit} .addr__act:hover{background:color-mix(in srgb,var(--p) 15%,transparent)} .addr__act--del{color:#e74c3c} .addr__act--del:hover{background:#fff5f5} @media(max-width:480px){.addr__acts{flex-basis:100%;justify-content:flex-end;margin-top:2px}} /* order filter tabs */ .acc__tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px} .acc__tab{padding:7px 16px;border-radius:20px;font-size:13px;font-weight:700;text-decoration:none;transition:.2s;background:var(--soft);color:var(--muted)} .acc__tab.is-active{background:var(--p);color:#fff} .acc__tab.is-warn{outline:2px solid #f39c12;outline-offset:1px} /* ─── Child form (add/edit) ───────────────────── */ .kform-page{min-height:72vh;display:flex;align-items:center;justify-content:center;padding:32px 16px} .kform{background:#fff;border-radius:24px;padding:32px 28px;width:100%;max-width:440px;box-shadow:var(--shadow-md)} .kform__icon{font-size:52px;text-align:center;margin-bottom:12px;display:block} .kform h1{font-size:19px;font-weight:900;text-align:center;margin-bottom:6px} .kform__sub{font-size:14px;color:var(--muted);text-align:center;margin-bottom:24px;line-height:1.7} .kform__gender{display:flex;gap:12px} .kform__gopt{flex:1;cursor:pointer} .kform__gopt input{position:absolute;opacity:0;width:0;height:0} .kform__gbody{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;border-radius:14px;border:2px solid var(--line);transition:.2s;font-weight:700;font-size:13px} .kform__gbody em{font-style:normal;font-size:32px} .kform__gopt input:checked + .kform__gbody{border-color:var(--p);background:var(--soft);color:var(--p)} .kform__skip{display:block;text-align:center;margin-top:16px;font-size:13px;color:var(--muted);text-decoration:none} .kform__skip:hover{color:var(--p)} .kform__del{margin-top:10px;display:block;width:100%;padding:11px;background:none;border:1.5px solid #e74c3c;border-radius:12px;color:#e74c3c;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:.2s} .kform__del:hover{background:#e74c3c;color:#fff} /* ─── Child sizes ─────────────────────────────── */ .csz{padding-top:24px;padding-bottom:60px} .csz__hero{display:flex;align-items:center;gap:14px;margin-bottom:20px} .csz__av{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:24px;flex-shrink:0} .csz__av.girl{background:linear-gradient(135deg,#ff5d8f,#ff8a5b)} .csz__av.boy{background:linear-gradient(135deg,#4a90d9,#6c63ff)} .csz__hero h1{font-size:18px;font-weight:800;margin-bottom:3px} .csz__hero small{font-size:13px;color:var(--muted)} .csz__alert{padding:12px 16px;border-radius:12px;font-size:13px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:10px;line-height:1.5} .csz__alert--warn{background:#fff8e1;border:1.5px solid #f5a623;color:#7d5a00} .csz__alert--info{background:#e8f8f5;border:1.5px solid var(--mint);color:#00756a} .csz__layout{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start} @media(max-width:640px){.csz__layout{grid-template-columns:1fr}} .csz__sec{background:#fff;border-radius:18px;padding:18px 20px;box-shadow:var(--shadow-sm)} .csz__sec-title{font-size:15px;font-weight:800;margin-bottom:16px} .csz__row{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)} .csz__row:last-child{border-bottom:none} .csz__row-date{font-size:12px;color:var(--muted);flex-shrink:0;min-width:68px;padding-top:2px} .csz__row-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1} .csz__chip{background:var(--soft);border-radius:8px;padding:3px 9px;font-size:12px;font-weight:600} .csz__badge{background:var(--p);color:#fff;border-radius:8px;padding:2px 8px;font-size:11px;font-weight:700} .csz__foot{max-width:440px;margin:20px auto 0} @media(max-width:640px){.csz__foot{max-width:100%}} /* legacy aliases */ .account-section{background:#fff;border-radius:var(--radius);padding:16px;margin-bottom:12px;box-shadow:var(--shadow-sm)} .account-section__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} .account-section h2{font-size:15px;font-weight:700} .account-avatar{width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:24px;font-weight:700;flex-shrink:0} .account-header{display:flex;align-items:center;gap:14px;margin-bottom:24px} .size-alert{background:#fff9e6;border:1px solid #ffeaa7;color:#856404;padding:12px 14px;border-radius:12px;font-size:13px;margin-bottom:12px} .size-alert--info{background:#e8f8f7;border-color:#b2dfdb;color:#00695c} .badge-latest{font-size:10px;background:var(--primary);color:#fff;padding:2px 7px;border-radius:20px} .skip-link{display:block;margin-top:16px;font-size:13px;color:var(--muted);text-align:center;text-decoration:none} /* ─── Toast ───────────────────────────────────── */ .toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:#2D3436;color:#fff;padding:10px 20px;border-radius:50px;font-size:14px;z-index:999;animation:fadeInUp .3s ease} @keyframes fadeInUp{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}} /* ─── Collections (legacy) ────────────────────── */ .collections-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px} .collection-card{display:block;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.07);transition:transform .2s,box-shadow .2s} .collection-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.12)} .collection-card__img{width:100%;height:180px;object-fit:cover;display:block} .collection-card__img--ph{height:180px;background:linear-gradient(135deg,#667eea,#764ba2)} .collection-card__body{padding:14px 16px 16px} .collection-card__name{font-size:15px;font-weight:700;color:var(--text);margin:0 0 6px} .collection-card__count{font-size:12px;color:var(--text-muted);background:#f4f4f4;padding:3px 10px;border-radius:20px} /* ─── Order Card (legacy) ─────────────────────── */ .ocard{background:#fff;border:1.5px solid #efefef;border-radius:16px;overflow:hidden;transition:box-shadow .15s;margin-bottom:12px} .ocard:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)} .ocard--unpaid{border-color:#f39c12} .ocard__head{display:flex;justify-content:space-between;align-items:flex-start;padding:14px 16px 10px;gap:10px} .ocard__meta{display:flex;flex-direction:column;gap:3px} .ocard__num{font-weight:900;font-size:14px;color:var(--primary);text-decoration:none} .ocard__num:hover{text-decoration:underline} .ocard__date{font-size:12px;color:#aaa} .ocard__right{display:flex;flex-direction:column;align-items:flex-end;gap:5px} .ocard__amount{font-size:16px;font-weight:900;color:#2c3e50} .ocard__amount small{font-size:11px;font-weight:400;color:#888} .ocard__badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap} .ocard__badge--new{background:#fff3cd;color:#856404} .ocard__badge--processing{background:#cce5ff;color:#004085} .ocard__badge--shipped{background:#d4edda;color:#155724} .ocard__badge--delivered{background:#d1ecf1;color:#0c5460} .ocard__badge--cancelled{background:#f8d7da;color:#721c24} .ocard__items{padding:0 16px 12px;display:flex;flex-direction:column;gap:8px;border-top:1px solid #f5f5f5;padding-top:10px} .ocard__item{display:flex;align-items:center;gap:10px} .ocard__thumb{width:48px;height:48px;border-radius:10px;object-fit:cover;border:1px solid #f0f0f0;flex-shrink:0} .ocard__thumb--empty{display:flex;align-items:center;justify-content:center;background:#f8f9fa;font-size:20px} .ocard__item-info{display:flex;flex-direction:column;gap:2px} .ocard__item-name{font-size:13px;font-weight:600;color:#333} .ocard__item-meta{font-size:11px;color:#aaa} .ocard__actions{display:flex;gap:8px;padding:0 12px 12px;border-top:1px solid #fef3e2;padding-top:10px} .ocard__actions form{flex:1} .ocard__btn{display:block;width:100%;padding:10px;border-radius:10px;font-size:13px;font-weight:700;text-align:center;text-decoration:none;border:none;cursor:pointer;font-family:inherit;transition:opacity .15s,transform .1s} .ocard__btn:active{transform:scale(.97)} .ocard__btn--pay{background:var(--primary);color:#fff;flex:2} .ocard__btn--cancel{background:#fff;border:1.5px solid #e74c3c;color:#e74c3c} .ocard__btn--cancel:hover{background:#e74c3c;color:#fff} /* ═══ صفحه محصول (Product Page v2) ═══ */ .pp{max-width:var(--maxw);margin:0 auto} .pp__bc{font-size:13px;color:var(--muted);padding:14px 0 8px} .pp__bc a{color:var(--p);font-weight:600} .pp__grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start} /* min-width:0 لازم است: بدون آن، ستون گالری به‌اندازه‌ی مجموع عرض تامبنیل‌ها (با عکس زیاد) کش می‌آید و ستون از ویوپورت بیرون می‌زند. با این، .pp__thumbs خودش اسکرول افقی می‌کند */ .pp__gallery,.pp__info{min-width:0} .pp__gallery{position:sticky;top:92px} .pp__main{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--soft);aspect-ratio:3/3.6;box-shadow:var(--shadow-sm)} .pp__main img{width:100%;height:100%;object-fit:cover} .pp__art{width:100%;height:100%;display:grid;place-items:center;font-size:110px} /* گالری اسلایدی عکس اصلی — قابل سوایپ/درگ (همان الگوی .pc__slides) */ .pp__slides{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;cursor:grab} .pp__slides::-webkit-scrollbar{display:none} .pp__slides.dragging{scroll-snap-type:none;cursor:grabbing} /* min-width:0 لازم است: بدون آن، flex-item عکس‌های خیلی بلند/باریک را طبق اندازه‌ی طبیعی‌شان حداقل عرض می‌گیرد و کل صفحه اسکرول افقی پیدا می‌کند */ .pp__slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;display:block} .pp__slide img{width:100%;height:100%;object-fit:cover} .pp__dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:2;pointer-events:none} .pp__dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.65);box-shadow:0 1px 4px rgba(0,0,0,.35);transition:.25s var(--ease)} .pp__dots span.on{width:20px;border-radius:6px;background:#fff} .pp__off-badge{position:absolute;top:14px;right:14px;z-index:2;background:var(--grad);color:#fff;font-weight:800;font-size:13px; padding:6px 14px;border-radius:50px;box-shadow:0 8px 20px color-mix(in srgb,var(--p) 40%,transparent)} .pp__thumbs{display:flex;gap:9px;margin-top:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px} .pp__thumbs::-webkit-scrollbar{display:none} .pp__thumb{width:66px;height:84px;object-fit:cover;border-radius:12px;border:2px solid transparent;cursor:pointer; flex:0 0 auto;opacity:.65;transition:.2s var(--ease)} .pp__thumb.active,.pp__thumb:hover{border-color:var(--p);opacity:1} .pp__brand{display:inline-block;font-size:12.5px;font-weight:700;color:var(--p);background:var(--soft); border-radius:20px;padding:4px 12px;margin-bottom:8px} .pp__name{font-size:26px;font-weight:900;line-height:1.45;margin-bottom:14px} .pp__price{display:flex;align-items:center;gap:11px;margin-bottom:14px;flex-wrap:wrap} .pp__price b{font-size:28px;font-weight:900;color:var(--p)} .pp__price b small{font-size:15px;font-weight:600} .pp__price del{font-size:17px;color:var(--muted)} .pp__off{background:var(--p);color:#fff;font-size:12px;font-weight:800;padding:3px 10px;border-radius:20px} .pp__desc{color:var(--muted);font-size:14px;line-height:1.9;margin-bottom:18px} .pp__kids{display:flex;flex-direction:column;gap:8px;margin-bottom:18px} .pp__kid{display:flex;align-items:center;gap:10px;font-size:14px;padding:11px 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--card)} .pp__kid-ic{font-size:18px;flex-shrink:0} .pp__kid small{color:var(--muted);font-weight:500} .pp__kid.ok{border-color:color-mix(in srgb,var(--mint) 55%,var(--line));background:color-mix(in srgb,var(--mint) 10%,var(--card))} .pp__kid.out{border-color:#ffd28a;background:#fff8ec} .pp__kid.na{background:var(--soft)} @media (max-width:768px){ .pp__grid{grid-template-columns:1fr;gap:18px} .pp__gallery{position:static} .pp__name{font-size:21px} .pp__price b{font-size:24px} }