/* ===== block-0 ===== */ /* ══════════════════ 1. DESIGN TOKENS ══════════════════ */ :root{ /* ── category hue scale (oklch-derived; every ink passes AA on its own tint) ── */ --c1-t:#FFE4D7; --c1-i:#9C3200; --c1-s:#EA5B1E; /* نارنجی — ماشین و سواری */ --c2-t:#FBEBCB; --c2-i:#805000; --c2-s:#C38100; /* کهربایی — پازل و رنگ */ --c3-t:#DBF5DB; --c3-i:#006F19; --c3-s:#25AB3A; /* سبز — سازها و موسیقی */ --c4-t:#CFF7EB; --c4-i:#007456; --c4-s:#00B288; /* فیروزه‌ای — خانه‌بازی */ --c5-t:#CCF5FF; --c5-i:#006C8E; --c5-s:#00A8D6; /* آبی آسمانی — فکری */ --c6-t:#D9EFFF; --c6-i:#0859AC; --c6-s:#2A8EFF; /* آبی — لگو و ساختنی */ --c7-t:#EEE8FF; --c7-i:#6343A4; --c7-s:#9A71F5; /* بنفش — کنترلی */ --c8-t:#FFE1F4; --c8-i:#912E6E; --c8-s:#DB55A9; /* صورتی — عروسک */ --pink:#FF00A3; --pink-dark:#B00371; --pink-soft:#FEDFF3; --purple:#9A71F5; --violet:#6343A4; --blue:#2A8EFF; --mint:#25AB3A; --teal:#00B288; --amber:#C38100; --orange:#EA5B1E; --ink:#23252F; --muted:#5F6578; /* was #767B8B → 4.22 on white, under AA. now 5.80 */ --muted-soft:#767B8B; /* the old value, kept for places that are decoration only */ --pink-text:#C2007C; /* pink as TEXT on white: 5.86 */ --pink-ink:#D6008A; /* pink as a BACKGROUND under white text: 4.97 */ --line:#E7E9F0; --bg:#FFFFFF; --bg-soft:#F6F7FA; /* radius scale — 4 / 8 / 14 / 20 / 28, nothing in between */ --r-xs:8px; --r-sm:14px; --r-md:20px; --r-lg:28px; --radius-card:20px; --radius-banner:28px; /* elevation: a tight contact shadow + a wide ambient one, always paired */ --e1:0 1px 2px rgba(23,25,40,.05), 0 2px 8px rgba(23,25,40,.04); --e2:0 1px 3px rgba(23,25,40,.06), 0 6px 18px rgba(23,25,40,.06); --e3:0 4px 8px rgba(23,25,40,.07), 0 16px 38px rgba(23,25,40,.10); --e-pink:0 4px 10px rgba(255,46,126,.14), 0 18px 40px rgba(255,46,126,.18); --shadow:var(--e2); --shadow-hover:var(--e-pink); --hair:#EDEFF5; --grad-hero:linear-gradient(120deg,#FF52C0 0%,#B04BEA 52%,#2A8EFF 100%); --grad-deals:linear-gradient(120deg,#FFB5E4 0%,#C59BF0 50%,#8FC7FF 100%); --grad-mint:linear-gradient(135deg,#2A8EFF,#0859AC); --grad-btn:linear-gradient(90deg,#D6008A,#C42E96); /* white text now 4.97–5.03; was 2.91–3.63 */ --grad-brand:linear-gradient(90deg,#FF00A3,#FF52C0); /* the original, for decoration and large display type */ --w:1680px; --font:'Vazirmatn', Tahoma, system-ui, -apple-system, sans-serif; --font-display:'Lalezar', 'Vazirmatn', Tahoma, sans-serif; } /* ══════════════════ 2. RESET ══════════════════ */ *,*::before,*::after{ box-sizing:border-box; } [hidden]{ display:none !important; } html,body{ margin:0; padding:0; } html{ overflow-x:clip; } body{ font-family:var(--font); background:var(--bg); color:var(--ink); font-size:15px; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4,p{ margin:0; } ul{ margin:0; padding:0; list-style:none; } a{ color:inherit; text-decoration:none; } img,svg{ display:block; max-width:100%; } button,input{ font-family:inherit; font-size:inherit; } button{ cursor:pointer; border:none; background:none; color:inherit; } :focus-visible{ outline:2px solid var(--pink); outline-offset:2px; border-radius:6px; } /* ══════════════════ 12. SHOP MECHANICS ══════════════════ */ /* ---- rating on cards ---- */ .rate{ display:inline-flex; align-items:center; gap:4px; font-size:12.5px; color:var(--muted); margin-block:2px; } .rate svg{ width:13px; height:13px; color:#FF00A3; flex:none; } .rate b{ font-weight:700; color:#412838; font-variant-numeric:tabular-nums; } .rate i{ font-style:normal; font-size:12.5px; } .p-link{ color:inherit; } .p-link:hover{ color:var(--pink); } /* ---- stock bar on deal cards ---- */ .stock{ margin-top:2px; } .stock-bar{ height:5px; border-radius:99px; background:#FFE1F4; overflow:hidden; } .stock-bar i{ display:block; height:100%; border-radius:99px; background:var(--grad-btn); } .stock-txt{ display:block; font-size:12px; color:var(--muted); margin-top:4px; } .stock-txt b{ color:var(--pink); font-weight:800; } .add-sm{ padding:7px 10px !important; font-size:12.5px !important; margin-top:4px; } .add-sm svg{ width:14px; height:14px; } /* ---- countdown ---- */ .countdown{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:14px; flex-wrap:wrap; } .cd-lbl{ color:#fff; font-size:13px; font-weight:600; opacity:.95; margin-inline-end:4px; } .cd-box{ background:rgba(255,255,255,.96); border-radius:12px; min-width:52px; padding:5px 8px 4px; display:flex; flex-direction:column; align-items:center; box-shadow:0 4px 12px rgba(120,40,110,.18); } .cd-box b{ font-size:19px; font-weight:800; color:var(--pink-dark); line-height:1.1; font-variant-numeric:tabular-nums; } .cd-box small{ font-size:12px; color:var(--muted); } .cd-sep{ color:#fff; font-weight:800; font-size:17px; opacity:.85; } /* ---- search suggestions ---- */ .search{ position:relative; } .sugg{ position:absolute; top:calc(100% + 8px); inset-inline:0; z-index:120; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--e3); padding:6px; max-height:min(64vh,420px); overflow:auto; } .sugg-h{ font-size:12.5px; color:var(--muted); padding:7px 10px 4px; font-weight:700; } .sugg-i{ display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border-radius:var(--r-sm); text-align:start; font-size:14px; color:var(--ink); cursor:pointer; } .sugg-i:hover,.sugg-i[aria-selected="true"]{ background:var(--bg-soft); } .sugg-i .sg-img{ width:38px; height:38px; border-radius:10px; background:#FFEAF7; display:grid; place-items:center; flex:none; } .sugg-i .sg-img svg{ width:78%; height:78%; } .sugg-i .sg-t{ flex:1; min-width:0; } .sugg-i b{ display:block; font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sugg-i em{ font-style:normal; color:var(--pink); font-weight:800; font-size:13px; } .sugg-i mark{ background:#FFD9F1; color:inherit; border-radius:3px; padding:0 1px; } .sugg-empty{ padding:18px 12px; text-align:center; color:var(--muted); font-size:13px; } /* ---- scrim + drawer ---- */ .cart-scrim{ position:fixed; inset:0; background:rgba(60,6,40,.45); backdrop-filter:blur(2px); z-index:900; opacity:0; transition:opacity .28s ease; } .cart-scrim.on{ opacity:1; } .drawer{ position:fixed; top:0; bottom:0; inset-inline-end:0; width:min(400px,92vw); z-index:901; background:#fff; box-shadow:-18px 0 50px rgba(60,6,40,.22); display:flex; flex-direction:column; transform:translateX(105%); transition:transform .34s cubic-bezier(.22,.7,.25,1); } html[dir="rtl"] .drawer{ transform:translateX(-105%); } .drawer.on, html[dir="rtl"] .drawer.on{ transform:none; } .dw-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line); flex:none; } .dw-head h2{ font-size:16px; font-weight:800; } .dw-x{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--bg-soft); color:var(--pink-dark); transition:.18s; } .dw-x:hover{ background:var(--line); } .dw-x svg{ width:17px; height:17px; } .dw-ship{ padding:11px 18px; background:linear-gradient(90deg,#FFF1F9,#FFF8FC); border-bottom:1px solid var(--line); flex:none; } .dw-ship p{ font-size:12.5px; color:#412838; margin-bottom:6px; } .dw-ship b{ color:var(--pink); font-weight:800; } .ship-bar{ height:6px; border-radius:99px; background:#FFDCF2; overflow:hidden; } .ship-bar i{ display:block; height:100%; border-radius:99px; background:var(--grad-btn); transition:width .45s cubic-bezier(.2,.7,.2,1); } .dw-body{ flex:1; overflow-y:auto; padding:12px 14px; } .dw-row{ display:grid; grid-template-columns:62px 1fr auto; gap:11px; align-items:center; padding:10px; border-radius:var(--r-sm); transition:background .2s; } .dw-row + .dw-row{ border-top:1px solid var(--hair); } .dw-row:hover{ background:var(--bg-soft); } .dw-img{ width:62px; height:62px; border-radius:12px; display:grid; place-items:center; overflow:hidden; } .dw-img svg{ width:82%; height:82%; } .dw-meta{ min-width:0; } .dw-meta b{ display:block; font-size:13px; font-weight:600; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .dw-meta .u{ font-size:12.5px; color:var(--muted); } .dw-side{ display:flex; flex-direction:column; align-items:flex-end; gap:7px; } .dw-price{ font-size:14px; font-weight:800; color:var(--pink); font-variant-numeric:tabular-nums; white-space:nowrap; } .qty{ display:inline-flex; align-items:center; gap:2px; border:1px solid var(--line); border-radius:99px; padding:2px; } .qty button{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; color:var(--pink-dark); font-weight:800; font-size:15px; line-height:1; transition:.15s; } .qty button:hover{ background:var(--pink-soft); } .qty b{ min-width:22px; text-align:center; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; } .dw-del{ font-size:12px; color:var(--muted); text-decoration:underline; } .dw-del:hover{ color:#B00371; } .dw-empty{ text-align:center; padding:46px 20px; } .dw-empty svg{ width:96px; height:96px; margin:0 auto 14px; opacity:.9; } .dw-empty b{ display:block; font-size:14.5px; font-weight:800; margin-bottom:5px; } .dw-empty p{ font-size:13px; color:var(--muted); } .dw-foot{ flex:none; padding:14px 18px 18px; border-top:1px solid var(--line); background:var(--bg-soft); } .dw-sum{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:11px; font-size:14px; } .dw-sum b{ font-size:18px; font-weight:800; color:var(--pink); font-variant-numeric:tabular-nums; } .dw-go{ width:100%; } .dw-clear{ display:block; margin:9px auto 0; font-size:12.5px; color:var(--muted); text-decoration:underline; } .dw-clear:hover{ color:#B00371; } /* ---- toast ---- */ .toast-wrap{ position:fixed; bottom:22px; inset-inline-start:22px; z-index:950; display:flex; flex-direction:column; gap:9px; pointer-events:none; } .toast{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:11px 15px; box-shadow:var(--e3); font-size:13px; font-weight:600; max-width:330px; animation:tin .34s cubic-bezier(.2,.8,.25,1); } .toast .tk{ width:26px; height:26px; border-radius:50%; background:var(--grad-btn); color:#fff; display:grid; place-items:center; flex:none; } .toast .tk svg{ width:15px; height:15px; } .toast.out{ animation:tout .3s ease forwards; } @keyframes tin{ from{ opacity:0; transform:translateY(14px) scale(.96) } to{ opacity:1; transform:none } } @keyframes tout{ to{ opacity:0; transform:translateY(10px) scale(.97) } } /* ---- FAQ ---- */ .faq{ max-width:900px; margin-inline:auto; display:flex; flex-direction:column; gap:10px; } .faq-item{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--e1); transition:box-shadow .22s, border-color .22s; } .faq-item[open]{ box-shadow:var(--e2); border-color:#FFB5E4; } .faq-item summary{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px; cursor:pointer; font-size:15px; font-weight:700; list-style:none; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary svg{ width:19px; height:19px; color:var(--pink); flex:none; transition:transform .25s ease; } .faq-item[open] summary svg{ transform:rotate(180deg); } .faq-item summary:hover{ color:var(--pink); } .faq-a{ padding:0 18px 16px; } .faq-a p{ font-size:14px; color:#5B4351; line-height:1.85; } /* ---- mobile bottom nav ---- */ .mnav{ display:none; position:fixed; bottom:0; inset-inline:0; z-index:880; background:rgba(255,255,255,.97); backdrop-filter:blur(12px); border-top:1px solid var(--line); box-shadow:0 -6px 22px rgba(60,6,40,.10); padding:7px 4px calc(7px + env(safe-area-inset-bottom)); } .mnav-i{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:12px; font-weight:600; color:var(--muted); position:relative; padding:3px 2px; } .mnav-i svg{ width:22px; height:22px; } .mnav-i.is-on{ color:var(--pink); } .mnav-badge{ position:absolute; top:-1px; inset-inline-end:26%; min-width:16px; height:16px; padding:0 4px; border-radius:99px; background:var(--pink); color:#fff; font-size:12px; font-weight:800; display:grid; place-items:center; } /* ---- back to top ---- */ .to-top{ position:fixed; bottom:22px; inset-inline-end:22px; z-index:870; width:44px; height:44px; border-radius:50%; background:var(--grad-btn); color:#fff; display:grid; place-items:center; box-shadow:0 8px 22px rgba(255,0,163,.34); transition:transform .22s ease, opacity .22s ease; } .to-top svg{ width:20px; height:20px; } .to-top:hover{ transform:translateY(-3px) scale(1.06); } body.locked{ overflow:hidden; } @media (max-width:820px){ .mnav{ display:flex; } body{ padding-bottom:64px; } .to-top{ bottom:78px; } /* on phones the toast sits at the top so it never covers the checkout button or the bottom nav */ .toast-wrap{ top:12px; bottom:auto; inset-inline:12px; z-index:960; align-items:stretch; } .toast{ max-width:none; animation-name:tinTop; } .toast.out{ animation-name:toutTop; } @keyframes tinTop{ from{ opacity:0; transform:translateY(-14px) scale(.96) } to{ opacity:1; transform:none } } @keyframes toutTop{ to{ opacity:0; transform:translateY(-10px) scale(.97) } } .countdown{ gap:5px; } .cd-box{ min-width:46px; } .cd-box b{ font-size:16px; } .cd-lbl{ width:100%; text-align:center; margin:0 0 2px; } } @media (prefers-reduced-motion: reduce){ .drawer{ transition:none; } .cart-scrim{ transition:none; } .toast{ animation:none; } .ship-bar i{ transition:none; } .to-top:hover{ transform:none; } } /* ══════════════════ CATEGORY NAV BAR + MEGA MENU ══════════════════ */ .navbar{ position:relative; background:#fff; border-top:1px solid var(--line); box-shadow:0 1px 0 var(--line); } .nav-row{ display:flex; align-items:center; gap:20px; height:46px; } .mega-wrap{ position:static; } .mega-btn{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; color:var(--ink); padding:8px 4px; white-space:nowrap; } .mega-btn svg{ width:17px; height:17px; color:var(--pink); } .mega-btn:hover,.mega-btn[aria-expanded="true"]{ color:var(--pink); } .mega{ position:absolute; top:100%; left:50%; transform:translateX(-50%); width:min(1180px, calc(100vw - 32px)); z-index:130; background:#fff; border:1px solid var(--line); border-top:none; border-radius:0 0 var(--r-md) var(--r-md); box-shadow:0 18px 44px rgba(23,25,40,.16); display:grid; grid-template-columns:246px 1fr; min-height:320px; overflow:hidden; } .mm-tabs{ background:#FAFBFD; border-inline-end:1px solid var(--line); padding:8px 0; } .mm-tab{ width:100%; display:flex; align-items:center; gap:9px; padding:9px 16px; font-size:13px; font-weight:600; color:var(--ink); text-align:start; transition:background .15s, color .15s; } .mm-tab svg{ width:26px; height:26px; flex:none; } .mm-tab span{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mm-tab .chev{ width:15px; height:15px; opacity:0; color:var(--pink); } .mm-tab:hover,.mm-tab.on{ background:#fff; color:var(--pink); } .mm-tab.on .chev{ opacity:1; } .mm-body{ padding:22px 26px; } .mm-panel{ display:flex; gap:28px; justify-content:space-between; } .mm-col h4{ font-size:15px; font-weight:800; margin-bottom:12px; } .mm-col h4 a:hover{ color:var(--pink); } .mm-col ul{ display:grid; grid-template-columns:repeat(2,minmax(130px,1fr)); gap:9px 26px; } .mm-col li a{ font-size:13px; color:#5A5F70; } .mm-col li a:hover{ color:var(--pink); } .mm-art{ flex:none; width:190px; text-align:center; background:#F7F8FB; border-radius:var(--r-md); padding:16px 14px; } .mm-art svg{ width:82px; height:82px; margin:0 auto 8px; } .mm-art p{ font-size:12.5px; color:var(--muted); margin-bottom:10px; line-height:1.7; } .nav-links{ display:flex; align-items:center; gap:18px; flex:1; min-width:0; overflow:hidden; } .nav-links a{ font-size:13px; font-weight:600; color:#4A4F60; white-space:nowrap; transition:color .15s; } .nav-links a:hover{ color:var(--pink); } .nl-hot{ display:inline-flex; align-items:center; gap:5px; color:var(--pink) !important; font-weight:700 !important; } .nl-hot svg{ width:15px; height:15px; } .nav-help{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--muted); white-space:nowrap; } .nav-help svg{ width:17px; height:17px; } .nav-help:hover{ color:var(--pink); } /* ---- hero carousel ---- */ .hero-main::before{ background:var(--hero-grad, var(--grad-hero)) !important; transition:background .6s ease; } .hero-slides{ position:relative; z-index:2; display:grid; } .hero-slide{ grid-area:1/1; display:flex; flex-direction:column; justify-content:center; opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); } .hero-slide.on{ opacity:1; transform:none; pointer-events:auto; } .hero-main > .hero-arr{ position:absolute; top:50%; translate:0 -50%; z-index:4; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.9); color:var(--pink-dark); display:grid; place-items:center; box-shadow:0 4px 14px rgba(23,25,40,.18); opacity:0; transition:opacity .22s, transform .22s; } .hero-arr svg{ width:19px; height:19px; } .hero-arr.prev{ inset-inline-start:14px; } .hero-arr.next{ inset-inline-end:14px; } .hero-main:hover .hero-arr, .hero-arr:focus-visible{ opacity:1; } .hero-arr:hover{ transform:scale(1.08); } .hero-dots button{ cursor:pointer; } /* ---- SEO description block ---- */ .seo-sec{ margin-block:36px 44px; } .seo{ position:relative; background:#F9FAFC; border:1px solid var(--line); border-radius:var(--r-md); padding:24px 26px 18px; } .seo h2{ font-size:17px; font-weight:800; margin-bottom:12px; } .seo h3{ font-size:15px; font-weight:700; margin:18px 0 7px; color:#2E3140; } .seo p{ font-size:14px; line-height:2.05; color:#5A5F70; text-align:justify; } .seo-body{ max-height:132px; overflow:hidden; position:relative; transition:max-height .4s ease; } .seo-body::after{ content:""; position:absolute; inset-inline:0; bottom:0; height:70px; background:linear-gradient(180deg,rgba(249,250,252,0),#F9FAFC); pointer-events:none; transition:opacity .3s; } .seo.open .seo-body{ max-height:2600px; } .seo.open .seo-body::after{ opacity:0; } .seo-more{ display:block; margin:12px auto 0; font-size:13px; font-weight:700; color:var(--pink); padding:7px 18px; border-radius:99px; border:1px solid #FFC4EA; background:#fff; transition:.2s; } .seo-more:hover{ background:#FFF0F9; } @media (prefers-reduced-motion: reduce){ .seo-body{ transition:none; } } /* ---- density pass: tighter cards on a white canvas ---- */ .prod{ padding:10px; gap:4px; } .prod b{ font-size:13.5px; line-height:1.7; min-height:48px; } .prod .price{ font-size:16.5px; } .prod .price .cur{ font-size:12.5px; } .prod .add{ padding:8px 12px; font-size:12.5px; } .cat{ padding:12px 6px; } .cat svg,.cat-media{ width:56px; height:56px; } .cat b{ font-size:13px; } .deal{ padding:11px; gap:5px; } .deal b{ font-size:13.5px; line-height:1.7; min-height:48px; } .mag-img{ height:132px; } @media (max-width:1200px){ .nav-help{ display:none; } } @media (max-width:1000px){ .nav-links li:nth-child(n+5){ display:none; } } @media (max-width:820px){ .navbar{ display:none !important; } .hero-main > .hero-arr{ display:none; } } @media (prefers-reduced-motion: reduce){ .mm-tab{ transition:none; } .hero-slide{ transition:none; } .hero-main::before{ transition:none; } } /* ══════════════════ A11Y ══════════════════ */ .skip-link{ position:fixed; top:-60px; inset-inline-start:16px; z-index:9999; background:var(--pink); color:#fff; padding:11px 20px; border-radius:0 0 var(--r-sm) var(--r-sm); font-weight:700; font-size:14px; box-shadow:var(--e3); transition:top .2s ease; } .skip-link:focus{ top:0; } main:focus{ outline:none; } .sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ══════════════════ 3. THE ONE CONTAINER (golden rule) ══════════════════ */ .nofd .sec-head h2,.nofd .hero-main h1,.nofd .hero-main .hero-h,.nofd .deals-title h2,.nofd .brand-name, .nofd .banner h3,.nofd .promo h3,.nofd .deal-promo h3,.nofd .start b{ font-weight:800; } .container{ width:100%; max-width:var(--w); margin-inline:auto; padding-inline:clamp(16px,3vw,44px); } .section{ margin-block:40px; } /* ══════════════════ 4. BASE COMPONENTS ══════════════════ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:999px; padding:10px 22px; font-weight:700; font-size:14px; transition:transform .25s ease, box-shadow .25s ease, background .2s ease; white-space:nowrap; } .btn-primary{ background:var(--grad-btn); color:#fff; box-shadow:0 6px 18px rgba(255,46,126,.28); } .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(255,46,126,.34); } .btn-ghost{ background:#fff; border:1px solid var(--line); color:var(--ink); } .btn-ghost:hover{ transform:translateY(-2px); border-color:#FFB5E4; box-shadow:var(--shadow); } .btn-white{ background:#fff; color:var(--pink); box-shadow:0 6px 18px rgba(74,10,50,.14); } .btn-white:hover{ transform:translateY(-2px); } .btn-sm{ padding:8px 17px; font-size:13px; } .btn-lg{ padding:14px 30px; font-size:15px; } .card{ background:#fff; border:1px solid var(--hair); border-radius:var(--radius-card); box-shadow:var(--e1); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .card:hover{ transform:translateY(-4px); box-shadow:var(--e-pink); border-color:rgba(255,46,126,.16); } /* section header: title right, tools left */ .sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; } .sec-head h2{ font-family:var(--font-display); font-size:29px; font-weight:400; line-height:1.55; letter-spacing:.2px; } .sec-head .sub{ font-size:14px; color:var(--muted); margin-top:5px; line-height:1.7; } .sec-head.center{ display:block; text-align:center; } .head-tools{ display:flex; align-items:center; gap:10px; } .see-all{ font-size:14px; font-weight:700; color:var(--pink); display:inline-flex; align-items:center; gap:4px; } .see-all:hover{ color:var(--pink-dark); } .arrows{ display:flex; gap:8px; } .arrow{ width:34px; height:34px; border-radius:50%; background:#fff; border:1px solid var(--line); display:grid; place-items:center; color:var(--ink); transition:.2s; flex-shrink:0; } .arrow:hover{ background:var(--pink); border-color:var(--pink); color:#fff; } .arrow svg{ width:15px; height:15px; } /* horizontal scrollers */ .scroller{ display:grid; grid-auto-flow:column; gap:16px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; padding-bottom:4px; } .scroller::-webkit-scrollbar{ display:none; } .price{ font-size:19px; font-weight:800; color:var(--pink); font-variant-numeric:tabular-nums; letter-spacing:-.2px; line-height:1.3; } .price .cur{ font-size:13px; font-weight:600; color:var(--muted); margin-inline-start:3px; letter-spacing:0; } .price-old{ font-size:13px; color:var(--muted); text-decoration:line-through; opacity:.8; } .price-range{ font-size:16.5px; } .price-range .range-from,.price-range .range-to{ font-weight:600; color:var(--muted); } .price-range .cur{ margin-inline-start:2px; } /* ══════════════════ 5. HEADER ══════════════════ */ .site-header{ position:sticky; top:0; z-index:100; background:#fff; box-shadow:0 1px 0 var(--line); } .header-row{ display:flex; align-items:center; gap:16px; padding-block:14px; } .brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; } .brand-logo-wrap{ position:relative; display:grid; place-items:center; width:52px; height:52px; flex-shrink:0; } .brand-logo{ width:52px; height:52px; object-fit:contain; position:relative; z-index:2; } .brand-fb{ position:absolute; inset:0; width:52px; height:52px; border-radius:var(--r-sm); background:linear-gradient(135deg,var(--pink),var(--purple)); display:grid; place-items:center; z-index:1; box-shadow:0 6px 16px rgba(255,0,163,.28); } .brand-fb svg{ width:32px; height:32px; } .brand-name{ font-family:var(--font-display); font-size:25px; font-weight:400; color:var(--pink); line-height:1.35; } .brand-tag{ font-size:12px; color:var(--muted); line-height:1.4; } .search{ flex:1; min-width:0; position:relative; } .search input{ width:100%; height:48px; border-radius:999px; border:1px solid var(--line); background:#FFF8FC; padding-inline:20px 56px; color:var(--ink); outline:none; transition:.2s; } .search input::placeholder{ color:var(--muted); } .search input:focus{ background:#fff; border-color:#FFB5E4; box-shadow:0 0 0 4px rgba(255,46,126,.08); } .search button{ position:absolute; inset-inline-end:5px; top:5px; width:38px; height:38px; border-radius:50%; background:var(--grad-btn); color:#fff; display:grid; place-items:center; transition:.2s; } .search button:hover{ transform:scale(1.06); } .search button svg{ width:17px; height:17px; } .header-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; } .cart-btn{ position:relative; width:44px; height:44px; border-radius:50%; background:var(--grad-btn); color:#fff; display:grid; place-items:center; box-shadow:0 6px 16px rgba(255,46,126,.26); transition:.2s; } .cart-btn:hover{ transform:translateY(-2px); } .cart-btn svg{ width:20px; height:20px; } .cart-btn.bump{ animation:bump .45s ease; } @keyframes bump{ 0%,100%{transform:scale(1)} 35%{transform:scale(1.22) rotate(-8deg)} } .cart-badge{ position:absolute; top:-3px; inset-inline-end:-3px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--amber); color:#FFFFFF; font-size:12.5px; font-weight:800; display:grid; place-items:center; border:2px solid #fff; } .burger{ display:none; width:44px; height:44px; border-radius:var(--r-xs); border:1px solid var(--hair); place-items:center; } .burger svg{ width:20px; height:20px; } /* ══════════════════ 6. HERO ══════════════════ */ .hero-grid{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,7fr); gap:16px; min-height:320px; } .hero-side{ display:grid; grid-template-rows:1fr 1fr; gap:16px; } .hero-main{ position:relative; overflow:visible; border-radius:var(--radius-banner); padding:44px; --hero-pad:44px; display:flex; flex-direction:column; justify-content:center; } .hero-main::before{ content:""; position:absolute; inset:0; border-radius:var(--radius-banner); background:var(--grad-hero); box-shadow:0 20px 48px rgba(255,0,163,.26); z-index:0; } .hero-main > *{ position:relative; z-index:2; } .hero-main h1,.hero-main .hero-h{ font-family:var(--font-display); font-size:clamp(34px,3.4vw,52px); line-height:1.42; font-weight:400; color:#fff; text-shadow:0 3px 18px rgba(96,6,63,.22); } .hero-main .lead{ font-size:15px; color:rgba(255,255,255,.88); margin-top:10px; max-width:34ch; } .hero-main .btn{ margin-top:26px; align-self:flex-start; padding:14px 32px; font-size:15px; } .hero-art{ position:absolute; inset-block:0; inset-inline-end:0; width:54%; pointer-events:none; z-index:2; overflow:visible; } /* the hero toy deliberately breaks out of the card — this is what reads as depth */ .hero-break{ position:absolute; z-index:3; inset-inline-end:4%; top:-34px; width:clamp(190px,19vw,320px); pointer-events:none; } .hero-break::before{ content:""; position:absolute; inset:6% 6% 14%; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.5),transparent 66%); filter:blur(6px); z-index:-1; } .hero-break svg{ width:100%; filter:drop-shadow(0 22px 26px rgba(96,6,63,.34)); animation:float 6.5s ease-in-out infinite; } @media (max-width:900px){ .hero-break{ width:clamp(130px,34vw,190px); top:-22px; inset-inline-end:2%; } } .hero-art .t{ position:absolute; filter:drop-shadow(0 12px 14px rgba(96,6,63,.24)); animation:float 6s ease-in-out infinite; } @keyframes float{ 0%,100%{ translate:0 0 } 50%{ translate:0 -11px } } .hero-dots{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; direction:ltr; gap:7px; } .hero-dots button{ width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.55); transition:.25s; } .hero-dots button.on{ width:24px; background:#fff; } .promo{ position:relative; overflow:hidden; border-radius:var(--radius-banner); padding:20px 22px; display:flex; flex-direction:column; justify-content:center; } .promo h3{ font-family:var(--font-display); font-size:19px; font-weight:400; line-height:1.5; } .promo p{ font-size:13px; margin-top:2px; } .promo .btn{ margin-top:12px; align-self:flex-start; } .promo svg.art{ position:absolute; inset-inline-end:14px; top:50%; translate:0 -50%; width:74px; height:74px; filter:drop-shadow(0 8px 10px rgba(96,6,63,.18)); } .promo-pink{ background:var(--c8-t); } .promo-pink h3{ color:var(--pink); } .promo-pink p{ color:var(--muted); } .promo-mint{ background:var(--grad-mint); } .promo-mint h3{ color:#fff; } .promo-mint p{ color:rgba(255,255,255,.85); } /* ══════════════════ 7. CATEGORY STRIP (8) ══════════════════ */ .cats{ display:grid; grid-template-columns:repeat(8,1fr); gap:12px; } .cat{ padding:16px 8px; text-align:center; } .cat-ph{ width:64px; height:64px; object-fit:cover; border-radius:var(--r-sm); margin-inline:auto; margin-bottom:8px; box-shadow:0 4px 10px rgba(96,6,63,.14); transition:transform .3s cubic-bezier(.34,1.56,.64,1); } .cat:hover .cat-ph{ transform:translateY(-3px) scale(1.05); } .cat svg{ width:64px; height:64px; margin-inline:auto; margin-bottom:8px; filter:drop-shadow(0 6px 8px rgba(96,6,63,.14)); transition:transform .3s cubic-bezier(.34,1.56,.64,1); } .cat:hover svg{ transform:translateY(-3px) rotate(-5deg); } .cat b{ display:block; font-size:14px; font-weight:800; } .cat span{ font-size:12px; color:var(--muted); } /* ══════════════════ 8. DEALS BOX ══════════════════ */ .deals{ position:relative; border-radius:var(--radius-banner); background:var(--grad-deals); padding:28px; overflow:hidden; } .deals-title{ text-align:center; margin-bottom:20px; } .deals-title h2{ font-family:var(--font-display); font-size:32px; font-weight:400; color:#fff; text-shadow:0 2px 10px rgba(120,40,110,.24); } .deals-title svg{ margin:6px auto 0; width:190px; height:12px; } .deals-row{ display:grid; grid-auto-flow:column; gap:14px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; padding-bottom:2px; } .deals-row::-webkit-scrollbar{ display:none; } .deal-promo{ width:190px; border-radius:var(--r-md); background:linear-gradient(160deg,#FF29B2,#B00371); color:#fff; padding:18px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; } .deal-promo .tag{ background:#fff; color:var(--pink); font-size:12.5px; font-weight:800; padding:4px 12px; border-radius:999px; } .deal-promo svg{ width:74px; height:74px; margin:2px auto; filter:drop-shadow(0 8px 10px rgba(0,0,0,.2)); } .deal-promo h3{ font-family:var(--font-display); font-size:17px; font-weight:400; line-height:1.65; } .deal-promo .btn{ margin-top:auto; } .deal{ width:180px; background:#fff; border-radius:var(--r-md); padding:14px; box-shadow:var(--e2); position:relative; display:flex; flex-direction:column; gap:6px; transition:transform .25s ease, box-shadow .25s ease; } .deal:hover{ transform:translateY(-4px); box-shadow:0 6px 12px rgba(120,40,110,.12), 0 22px 46px rgba(120,40,110,.2); } .off{ position:absolute; top:10px; inset-inline-end:10px; width:38px; height:38px; border-radius:50%; background:var(--grad-btn); color:#fff; font-size:12.5px; font-weight:800; display:grid; place-items:center; z-index:2; } .deal-img{ background:#F5F6FA; border-radius:var(--r-sm); aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden; } .deal-img svg{ width:88%; height:88%; } .deal b{ font-size:13.5px; font-weight:700; line-height:1.7; min-height:48px; color:#412838; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .deal-prices{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .deals .arrow{ position:absolute; top:50%; translate:0 -50%; z-index:5; box-shadow:var(--shadow); } .deals .arrow.prev{ inset-inline-start:8px; } .deals .arrow.next{ inset-inline-end:8px; } /* ══════════════════ 9. START HERE (4) ══════════════════ */ .starts{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .start{ border-radius:var(--radius-card); min-height:112px; padding:20px; display:flex; align-items:center; justify-content:space-between; gap:10px; transition:transform .25s ease, box-shadow .25s ease; } .start:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); } .start b{ display:block; font-family:var(--font-display); font-size:17px; font-weight:400; line-height:1.5; } .start span{ font-size:12.5px; color:var(--muted); } .start svg{ width:62px; height:62px; flex-shrink:0; filter:drop-shadow(0 6px 8px rgba(96,6,63,.14)); } /* ══════════════════ 10. BANNER MOSAIC (6) ══════════════════ */ .mosaic{ display:grid; gap:16px; } .m-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .banner{ position:relative; overflow:hidden; border-radius:var(--radius-banner); padding:24px; display:flex; align-items:center; justify-content:space-between; gap:14px; transition:transform .25s ease, box-shadow .25s ease; } .banner:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(74,10,50,.14); } .m-row-1 .banner,.m-row-2 .banner{ min-height:200px; } .m-row-3 .banner{ min-height:160px; } .banner .txt{ position:relative; z-index:2; } .banner h3{ font-family:var(--font-display); font-size:21px; font-weight:400; line-height:1.6; } .banner p{ font-size:13px; margin-top:3px; } .banner .btn{ margin-top:12px; } .banner svg.art{ position:relative; z-index:2; width:120px; height:120px; flex-shrink:0; filter:drop-shadow(0 12px 14px rgba(0,0,0,.24)); } .m-row-3 .banner svg.art{ width:96px; height:96px; } .banner.photo{ padding:0; display:block; } .banner.photo .ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; } .banner.photo .banner-overlay{ position:absolute; inset:0; z-index:1; } .banner.photo .txt{ position:absolute; z-index:3; inset-block:0; inset-inline-start:0; width:58%; padding:26px; display:flex; flex-direction:column; justify-content:center; } .banner.photo h3{ text-shadow:0 2px 10px rgba(0,0,0,.35); } .banner .glow{ position:absolute; z-index:1; width:220px; height:220px; border-radius:50%; inset-inline-start:2%; top:50%; translate:0 -50%; background:radial-gradient(circle,rgba(255,255,255,.3),transparent 68%); pointer-events:none; } .banner .notes{ position:absolute; inset:0; z-index:0; opacity:.45; pointer-events:none; } .b-pink{ background:linear-gradient(135deg,#FF52C0,#B00371); color:#fff; } .b-pink p{ color:rgba(255,255,255,.85); } .b-navy{ background:linear-gradient(135deg,#123C56,#0A2233); color:#fff; } .b-navy p{ color:rgba(255,255,255,.75); } .b-violet{ background:linear-gradient(135deg,#FF29B2,#DB008C); color:#fff; } .b-violet p{ color:rgba(255,255,255,.85); } .b-dark{ background:linear-gradient(135deg,#3A1E63,#1E1038); color:#fff; } .b-dark p{ color:rgba(255,255,255,.75); } .b-cream{ background:var(--c2-t); color:var(--ink); } .b-cream p{ color:var(--muted); } .b-sky{ background:var(--c6-t); color:var(--ink); } .b-sky p{ color:var(--muted); } .b-cream .glow,.b-sky .glow{ background:radial-gradient(circle,rgba(255,255,255,.85),transparent 68%); } .sale-badge{ display:inline-block; background:#B00371; color:#fff; font-size:12.5px; font-weight:800; padding:3px 12px; border-radius:999px; margin-bottom:8px; } .cat-media{ display:block; position:relative; width:64px; height:64px; margin-inline:auto; margin-bottom:8px; } .cat-media svg{ position:absolute; inset:0; width:100%; height:100%; margin:0; } .cat-media .cat-ph{ position:absolute; inset:0; width:100%; height:100%; margin:0; } .banner .ph-fb{ position:absolute; z-index:1; inset-inline-end:6%; top:50%; translate:0 -50%; width:120px; height:120px; } .banner .ph-fb svg{ width:100%; height:100%; filter:drop-shadow(0 12px 14px rgba(0,0,0,.26)); } /* ══════════════════ 11. WHY US (5) ══════════════════ */ .whys{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; } .why{ text-align:center; } .why .ic{ width:58px; height:58px; border-radius:var(--r-md); display:grid; place-items:center; margin-inline:auto; margin-bottom:10px; color:var(--pink); transition:transform .3s cubic-bezier(.34,1.56,.64,1); } .why:hover .ic{ transform:translateY(-4px) rotate(-6deg); } .why .ic svg{ width:26px; height:26px; } .why b{ display:block; font-size:14px; font-weight:800; } .why span{ font-size:12.5px; color:var(--muted); line-height:1.7; } /* ══════════════════ 12. PRODUCT CARDS ══════════════════ */ .prod{ width:100%; padding:14px; display:flex; flex-direction:column; gap:9px; position:relative; } .prod-img{ position:relative; background:#F5F6FA; border-radius:var(--r-sm); aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden; } .prod-img svg.art{ width:88%; height:88%; transition:transform .3s cubic-bezier(.34,1.56,.64,1); } .prod:hover .prod-img svg.art{ transform:scale(1.07) rotate(-3deg); } .fav{ position:absolute; top:8px; inset-inline-end:8px; width:30px; height:30px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:var(--shadow); color:var(--muted); z-index:2; transition:.2s; } .fav:hover,.fav.on{ color:var(--pink); } .fav svg{ width:15px; height:15px; } .new-badge{ position:absolute; top:8px; inset-inline-start:8px; background:var(--mint); color:#FFFFFF; font-size:12px; font-weight:800; padding:3px 10px; border-radius:999px; z-index:2; } .chip{ display:inline-block; align-self:flex-start; background:#F1F3F8; color:#6C7285; font-size:12px; font-weight:600; padding:4px 11px; border-radius:999px; letter-spacing:.2px; } .prod b{ font-size:13.5px; font-weight:700; line-height:1.7; min-height:48px; color:#412838; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .add{ width:100%; margin-top:2px; padding:9px; border-radius:999px; background:var(--grad-btn); color:#fff; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; gap:6px; transition:.2s; } .add:hover{ box-shadow:0 8px 18px rgba(255,46,126,.3); transform:translateY(-1px); } .add:active{ transform:scale(.97); } .add svg{ width:15px; height:15px; } .news-row{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 5*12px)/6); } /* soft per-product tint: turns a row of grey wells into a colourful mosaic */ .tn-1{ background:var(--c1-t) !important; } .tn-2{ background:var(--c2-t) !important; } .tn-3{ background:var(--c3-t) !important; } .tn-4{ background:var(--c4-t) !important; } .tn-5{ background:var(--c5-t) !important; } .tn-6{ background:var(--c6-t) !important; } .tn-7{ background:var(--c7-t) !important; } .tn-8{ background:var(--c8-t) !important; } /* ══════════════════ 13. BESTSELLERS (6) ══════════════════ */ .best{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; } .best .prod b{ font-size:13.5px; line-height:1.7; min-height:48px; } .rank{ position:absolute; top:8px; inset-inline-start:8px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:800; color:#fff; z-index:3; box-shadow:0 3px 8px rgba(0,0,0,.16); } .r1{ background:#FF00A3; color:#FFFFFF; } .r2{ background:#FF85D3; color:#FFFFFF; } .r3{ background:#FF52C0; } .r4,.r5,.r6{ background:var(--pink); } /* ══════════════════ 14. MAGAZINE (4) ══════════════════ */ .mags{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .mag{ overflow:hidden; } .mag-img{ position:relative; height:150px; border-radius:var(--r-sm); margin:12px 12px 0; display:grid; place-items:center; overflow:hidden; } .mag-img svg{ width:38%; } .mag-cat{ position:absolute; top:10px; inset-inline-end:10px; font-size:12px; font-weight:800; color:#fff; padding:3px 11px; border-radius:999px; } .c-edu{ background:var(--purple); } .c-guide{ background:var(--blue); } .c-fun{ background:var(--pink); } .c-parent{ background:var(--mint); color:#FFFFFF; } .mag-body{ padding:16px 14px 18px; } .mag-body b{ display:block; font-size:14px; font-weight:800; line-height:1.8; min-height:3.6em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .mag-meta{ display:flex; align-items:center; gap:14px; margin-top:12px; font-size:12.5px; color:#B29CAA; } .mag-meta span{ display:inline-flex; align-items:center; gap:4px; } .mag-meta svg{ width:13px; height:13px; } /* soft organic bands — what makes a kids' store feel like one */ .band{ position:relative; background:linear-gradient(180deg,#FFF2FA,#FFFAFD); margin-block:56px; padding-block:74px; } .band > .container{ position:relative; z-index:2; } .band-wave{ position:absolute; left:0; width:100%; height:56px; display:block; z-index:1; } .band-wave.top{ top:-1px; } .band-wave.bottom{ bottom:-1px; transform:rotate(180deg); } .foot-wave{ display:block; width:100%; height:74px; margin-bottom:-2px; } @media (max-width:768px){ .band{ margin-block:36px; padding-block:48px; } .band-wave,.foot-wave{ height:38px; } } .band-b{ background:#F7F8FB; } .band-c{ background:#F7F8FB; } /* floating confetti shapes that live inside the coloured bands */ .band-deco{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; } .band-deco i{ position:absolute; display:block; border-radius:50%; opacity:.5; animation:drift 9s ease-in-out infinite; } .band-deco i.sq{ border-radius:8px; } @keyframes drift{ 0%,100%{ translate:0 0; rotate:0deg } 50%{ translate:0 -16px; rotate:14deg } } /* ══════════════════ 15. FOOTER ══════════════════ */ .site-footer{ position:relative; overflow:hidden; background:linear-gradient(180deg,#FEEEF8,#FFFFFF); padding-block:18px 0; margin-top:0; } .foot-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.3fr; gap:28px; position:relative; z-index:2; } .foot-col h4{ font-size:15px; font-weight:800; margin-bottom:14px; position:relative; padding-bottom:8px; } .foot-col h4::after{ content:""; position:absolute; bottom:0; inset-inline-start:0; width:26px; height:3px; border-radius:3px; background:var(--grad-btn); } .foot-col li{ margin-bottom:9px; } .foot-col li a{ font-size:14px; color:var(--muted); transition:.18s; display:inline-block; } .foot-col li a:hover{ color:var(--pink); transform:translateX(-4px); } .foot-about p{ font-size:13px; color:var(--muted); line-height:2; } .socials{ display:flex; gap:9px; margin-top:14px; } .socials a{ width:34px; height:34px; border-radius:50%; background:var(--grad-btn); color:#fff; display:grid; place-items:center; box-shadow:0 4px 12px rgba(255,46,126,.24); transition:.2s; } .socials a:hover{ transform:translateY(-3px); } .socials svg{ width:16px; height:16px; } .nl p{ font-size:13px; color:var(--muted); margin-bottom:12px; line-height:2; } .nl form{ display:flex; gap:8px; } .nl input{ flex:1; min-width:0; height:44px; border-radius:999px; border:1px solid var(--line); background:#fff; padding-inline:16px; outline:none; } .nl input:focus{ border-color:#FFB5E4; box-shadow:0 0 0 4px rgba(255,46,126,.08); } .nl .ok{ font-size:13px; color:var(--teal); margin-top:8px; min-height:1em; } .foot-balloon{ position:absolute; bottom:56px; inset-inline-start:2%; width:96px; opacity:.9; z-index:1; pointer-events:none; animation:float 7s ease-in-out infinite; } .foot-bottom{ margin-top:30px; border-top:1px solid var(--line); padding-block:16px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; position:relative; z-index:2; } .copy{ font-size:13px; color:var(--muted); } .seals{ display:flex; gap:10px; } .seal{ width:66px; height:66px; border-radius:12px; background:#fff; border:1px solid var(--line); display:grid; place-items:center; text-align:center; font-size:12px; color:var(--muted); line-height:1.5; padding:6px; } /* ---- every category card owns a colour ---- */ .cat.k1{ background:var(--c1-t); border:1px solid transparent; } .cat.k1 b{ color:var(--c1-i); } .cat.k1:hover{ border-color:var(--c1-s); } .cat.k2{ background:var(--c2-t); border:1px solid transparent; } .cat.k2 b{ color:var(--c2-i); } .cat.k2:hover{ border-color:var(--c2-s); } .cat.k3{ background:var(--c3-t); border:1px solid transparent; } .cat.k3 b{ color:var(--c3-i); } .cat.k3:hover{ border-color:var(--c3-s); } .cat.k4{ background:var(--c4-t); border:1px solid transparent; } .cat.k4 b{ color:var(--c4-i); } .cat.k4:hover{ border-color:var(--c4-s); } .cat.k5{ background:var(--c5-t); border:1px solid transparent; } .cat.k5 b{ color:var(--c5-i); } .cat.k5:hover{ border-color:var(--c5-s); } .cat.k6{ background:var(--c6-t); border:1px solid transparent; } .cat.k6 b{ color:var(--c6-i); } .cat.k6:hover{ border-color:var(--c6-s); } .cat.k7{ background:var(--c7-t); border:1px solid transparent; } .cat.k7 b{ color:var(--c7-i); } .cat.k7:hover{ border-color:var(--c7-s); } .cat.k8{ background:var(--c8-t); border:1px solid transparent; } .cat.k8 b{ color:var(--c8-i); } .cat.k8:hover{ border-color:var(--c8-s); } .cat:hover{ box-shadow:0 4px 10px rgba(23,25,40,.08), 0 14px 30px rgba(23,25,40,.10); } .cat:hover b{ color:inherit; } /* candy strip across the very top of the page */ .top-strip{ height:5px; background:linear-gradient(90deg,#FF00A3,#9A71F5,#2A8EFF,#00A8D6,#00B288,#25AB3A,#C38100,#EA5B1E,#FF00A3); background-size:220% 100%; animation:slide 14s linear infinite; } @keyframes slide{ to{ background-position:220% 0 } } .band-d{ background:#F7F8FB; } /* ══════════════════ MOTION ══════════════════ */ /* staggered scroll reveal */ .rv{ opacity:0; transform:translateY(24px); transition:opacity .62s cubic-bezier(.2,.7,.2,1), transform .62s cubic-bezier(.2,.7,.2,1); } .rv.in{ opacity:1; transform:none; } /* shine sweep across every primary button on hover */ .btn-primary, .add{ position:relative; overflow:hidden; } .btn-primary::after, .add::after{ content:""; position:absolute; top:0; bottom:0; width:44%; left:-60%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg); transition:left .55s ease; pointer-events:none; } .btn-primary:hover::after, .add:hover::after{ left:130%; } /* wishlist heart pop */ .fav.on{ animation:pop .45s cubic-bezier(.34,1.8,.5,1); } .fav.on svg path{ fill:currentColor; } @keyframes pop{ 0%{transform:scale(1)} 45%{transform:scale(1.4)} 100%{transform:scale(1)} } /* confetti burst from the cart button */ .confetti{ position:fixed; width:9px; height:9px; border-radius:2px; pointer-events:none; z-index:9999; animation:fly .9s cubic-bezier(.2,.7,.3,1) forwards; } @keyframes fly{ 0%{ transform:translate(0,0) rotate(0); opacity:1 } 100%{ transform:translate(var(--tx),var(--ty)) rotate(var(--rot)); opacity:0 } } /* toys breathe inside their wells */ .prod-img svg.art, .deal-img svg{ animation:bob 5.5s ease-in-out infinite; } .prod:hover .prod-img svg.art{ animation:none; } @keyframes bob{ 0%,100%{ translate:0 0 } 50%{ translate:0 -6px } } /* section eyebrow sparkle */ @keyframes twinkle{ 0%,100%{ transform:scale(1); opacity:.85 } 50%{ transform:scale(1.35) rotate(18deg); opacity:1 } } .sec-head h2{ position:relative; display:inline-block; padding-bottom:10px; } .sec-head h2::after{ content:""; position:absolute; bottom:0; inset-inline-start:0; width:46px; height:4px; border-radius:4px; background:linear-gradient(90deg,var(--pink),var(--purple),var(--blue)); } .sec-head.center h2::after{ inset-inline-start:50%; translate:-50% 0; } /* category card gains its colour on hover */ .cat{ position:relative; overflow:hidden; } .cat::before{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .28s ease; background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.2)); } .cat:hover::before{ opacity:1; } .cat:hover b{ color:var(--pink); } .cat b,.cat span{ position:relative; z-index:1; } @media (prefers-reduced-motion:reduce){ .rv{ opacity:1 !important; transform:none !important; } .prod-img svg.art,.deal-img svg,.band-deco i,.sec-head h2::after,.sec-head.center h2::before{ animation:none !important; } } /* ══════════════════ 3D & PARALLAX ══════════════════ */ /* hero becomes a real 3D stage */ .hero-main{ perspective:1100px; } .hero-stage{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform .35s ease-out; z-index:2; pointer-events:none; } .hero-art,.hero-break{ transform-style:preserve-3d; } .hero-art .t,.hero-break{ will-change:transform,translate; } /* cards tilt in 3D under the cursor */ .tilt{ transform-style:preserve-3d; transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; } .tilt.on{ transition:transform .08s linear, box-shadow .3s ease; } .tilt .pop{ transition:transform .3s cubic-bezier(.2,.7,.2,1); } .tilt.on .pop{ transform:translateZ(46px) scale(1.06); } .banner.tilt.on .pop{ transform:translateZ(60px) scale(1.07); } .cat.tilt.on .pop{ transform:translateZ(34px) scale(1.1); } /* the lift is now handled by the tilt transform, so cancel the flat hover */ .card.tilt:hover{ transform:none; } /* elements that drift as the page scrolls */ [data-px]{ will-change:translate; } @media (prefers-reduced-motion:reduce){ .hero-stage{ transform:none !important; } .tilt,.tilt .pop{ transform:none !important; } [data-px]{ translate:none !important; } } /* ══════════════════ 16. RESPONSIVE ══════════════════ */ @media (max-width:1200px){ .container{ padding-inline:16px; } } @media (min-width:1500px){ .cats{ grid-template-columns:repeat(8,1fr); } .news-row{ grid-auto-columns:calc((100% - 6*12px)/7); } } @media (max-width:1024px){ .cats{ grid-template-columns:repeat(4,1fr); } .news-row{ grid-auto-columns:calc((100% - 2*16px)/3); } .best{ grid-template-columns:repeat(4,1fr); } .mags{ grid-template-columns:repeat(2,1fr); } .whys{ grid-template-columns:repeat(3,1fr); row-gap:24px; } .starts{ grid-template-columns:repeat(2,1fr); } .hero-main h1,.hero-main .hero-h{ font-size:32px; } } @media (max-width:768px){ .section{ margin-block:40px; } .hero-grid{ grid-template-columns:1fr; } .hero-side{ grid-template-rows:none; grid-template-columns:1fr 1fr; } .hero-main{ order:-1; min-height:280px; padding:26px; --hero-pad:26px; } .hero-main h1,.hero-main .hero-h{ font-size:28px; } .hero-art{ width:46%; opacity:.9; } .m-row{ grid-template-columns:1fr; } .foot-grid{ grid-template-columns:1fr 1fr; } .site-header .burger{ display:grid; } .deals{ padding:20px 16px; } .deals .arrow{ display:none; } } @media (max-width:480px){ .news-row{ grid-auto-columns:calc((100% - 16px)/2); } .best{ grid-template-columns:repeat(2,1fr); } .mags{ grid-template-columns:1fr; } .whys{ grid-template-columns:repeat(2,1fr); } .starts{ grid-template-columns:1fr; } .cats{ display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:132px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; } .cats > *{ scroll-snap-align:start; } .cats::-webkit-scrollbar{ display:none; } .header-row{ flex-wrap:wrap; } .search{ order:3; flex-basis:100%; } .brand-tag{ display:none; } .hero-side{ grid-template-columns:1fr; } .foot-grid{ grid-template-columns:1fr; } .promo svg.art{ width:58px; height:58px; } } @media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ===== bazidan-polish ===== */ :root{--play-pink:#ff169f;--play-purple:#7447e8;--play-glow:0 20px 60px rgba(113,59,205,.18)}body{background:linear-gradient(180deg,#fff 0%,#fff8fd 48%,#f8fbff 100%);overflow-x:hidden}body:before,body:after{content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:50%;opacity:.3;animation:floatBlob 14s ease-in-out infinite alternate}body:before{width:260px;height:260px;top:10%;right:-110px;background:#ffb5e4}body:after{width:220px;height:220px;bottom:6%;left:-100px;background:#b9d6ff;animation-delay:-5s}@keyframes floatBlob{to{transform:translate3d(0,35px,0) scale(1.12)}}.header,.topbar{backdrop-filter:blur(16px);background:rgba(255,255,255,.86)!important}.logo-mark,.brand-mark{filter:drop-shadow(0 8px 14px rgba(255,0,163,.22));transition:transform .35s}.logo-mark:hover,.brand-mark:hover{transform:rotate(-8deg) scale(1.08)}.hero-main{isolation:isolate;overflow:hidden;box-shadow:0 24px 70px rgba(108,45,170,.22);border:1px solid rgba(255,255,255,.45)}.hero-main:after{content:"";position:absolute;inset:auto -10% -42% 25%;height:70%;background:radial-gradient(ellipse,rgba(255,255,255,.25),transparent 65%);transform:rotate(-8deg);pointer-events:none;z-index:0}.hero-slide{transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1)}.hero-slide.on{animation:heroIn .8s cubic-bezier(.2,.8,.2,1) both}@keyframes heroIn{from{opacity:0;transform:translateX(24px) scale(.98)}to{opacity:1;transform:none}}.hero-art{animation:toyFloat 4.6s ease-in-out infinite;transform-origin:center bottom;filter:drop-shadow(0 20px 18px rgba(40,17,80,.2))}@keyframes toyFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(2deg)}}.hero-dots button{position:relative;overflow:hidden;transition:all .3s ease}.hero-dots button.on{width:34px!important}.hero-dots button.on:after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.7);transform:translateX(-100%);animation:dotProgress 5.5s linear forwards}@keyframes dotProgress{to{transform:translateX(0)}}.hero-arr{transition:transform .25s ease,background .25s ease;backdrop-filter:blur(8px)}.hero-arr:hover{transform:scale(1.12)}.hero-arr:active{transform:scale(.94)}.card,.product-card,.cat-card,.feature-card{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;will-change:transform}.card:hover,.product-card:hover,.cat-card:hover,.feature-card:hover{transform:translateY(-8px) rotate(-.4deg);box-shadow:var(--play-glow)}.card img,.product-card img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}.card:hover img,.product-card:hover img{transform:scale(1.07) rotate(1deg)}.btn,.button{position:relative;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease}.btn:hover,.button:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,0,163,.22)}.section-head h2:after{content:"✦";color:var(--play-pink);font-size:.55em;vertical-align:top;margin-inline-start:8px;animation:twinkle 1.8s ease-in-out infinite}@keyframes twinkle{50%{opacity:.3;transform:scale(.7)}}@media(max-width:700px){.hero-main{border-radius:22px}.hero-art{opacity:.85;transform:scale(.82)}.hero-arr{width:34px;height:34px}.card:hover,.product-card:hover,.cat-card:hover{transform:translateY(-4px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}} /* ===== discount-carousel-pro ===== */ /* تخفیف‌ها — نسخه‌ی ویترینی */ #deals{max-width:none;padding-inline:0;margin-block:clamp(22px,4vw,54px)} #deals .deals{border-radius:0;padding:58px max(20px,4vw) 54px;background:linear-gradient(180deg,#ff63c8 0%,#fb009c 54%,#f5009b 100%);position:relative;isolation:isolate;overflow:hidden} #deals .deals:before,#deals .deals:after{content:"";position:absolute;z-index:-1;left:-4%;width:108%;height:145px;pointer-events:none} #deals .deals:before{top:-56px;background:#fff;border-radius:0 0 52% 48%/0 0 58% 62%;transform:rotate(-1deg)} #deals .deals:after{bottom:-76px;background:#fff;border-radius:52% 48% 0 0/62% 58% 0 0;transform:rotate(1deg)} #deals .deals-title{margin:0 auto 28px;position:relative;z-index:2} #deals .deals-title h2{font-size:clamp(25px,3vw,38px);text-shadow:0 5px 0 rgba(177,0,105,.1);letter-spacing:-.03em} #deals .deals-title:before{content:"پیشنهادهای داغ بازی‌دان";display:block;color:#fff;font-size:13px;font-weight:700;opacity:.9;margin-bottom:3px} #deals .countdown{margin-top:13px} #deals .deals-row{display:flex;direction:rtl;align-items:stretch;gap:14px;max-width:1240px;margin:auto;padding:8px 4px 18px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain} #deals .deal-promo{flex:0 0 190px;min-height:310px;scroll-snap-align:start;background:linear-gradient(150deg,#ff4fc4,#d9008c);border:1px solid rgba(255,255,255,.32);border-radius:18px;padding:18px 14px 15px;box-shadow:0 14px 24px rgba(124,0,87,.2);text-align:center;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden} #deals .deal-promo:after{content:"✦ ✧ ✦";position:absolute;top:12px;left:10px;color:#fff;opacity:.6;letter-spacing:10px;transform:rotate(-12deg)} #deals .deal-promo .tag{background:#fff;color:#d9008c;padding:5px 12px;font-size:12.5px;box-shadow:0 5px 14px rgba(0,0,0,.1)} #deals .deal-promo svg{width:94px;height:94px;margin:14px auto 6px;filter:drop-shadow(0 10px 10px rgba(94,0,66,.25));animation:giftBob 3.4s ease-in-out infinite}@keyframes giftBob{50%{transform:translateY(-8px) rotate(3deg)}} #deals .deal-promo h3{font-size:17px;color:#fff;line-height:1.5} #deals .deal-promo .btn{margin-top:14px;border:1px solid rgba(255,255,255,.75)} #deals .deal{flex:0 0 205px;min-height:310px;scroll-snap-align:start;border-radius:16px;padding:10px;background:#fff;box-shadow:0 14px 25px rgba(120,0,80,.17);gap:5px} #deals .deal:hover{transform:translateY(-9px) rotate(-.6deg);box-shadow:0 22px 32px rgba(120,0,80,.24)} #deals .deal-img{aspect-ratio:1.05/1;background:#fbfbfd;border:1px solid #f0f0f4;border-radius:12px} #deals .deal-img svg{animation:none;transition:transform .45s ease}#deals .deal:hover .deal-img svg{transform:scale(1.08) rotate(2deg)} #deals .deal b{font-size:13.5px;line-height:1.7;min-height:48px} #deals .deal .off{top:15px;inset-inline-start:15px;background:#e50049;color:#fff;box-shadow:none} #deals .deal-prices{gap:5px}.deals .arrow{width:42px;height:42px;background:#fff;color:#e5009b;border:3px solid #ff8bd7;box-shadow:0 8px 16px rgba(110,0,76,.2)}#deals .arrow:hover{background:#ffe4f7;transform:scale(1.1)} #deals .deals-row::-webkit-scrollbar{height:7px}#deals .deals-row::-webkit-scrollbar-thumb{background:rgba(255,255,255,.7);border-radius:10px} @media(max-width:700px){#deals .deals{padding:45px 12px 42px}#deals .deals-row{gap:10px;padding-inline:4px}#deals .deal-promo,#deals .deal{flex-basis:174px;min-height:285px}#deals .deals-title h2{font-size:25px}#deals .arrow{display:grid;top:auto;bottom:13px;transform:none;width:34px;height:34px}#deals .arrow.prev{inset-inline-start:calc(50% - 42px)}#deals .arrow.next{inset-inline-end:calc(50% - 42px)}} @media(prefers-reduced-motion:reduce){#deals .deal-promo svg{animation:none}} /* ===== discount-carousel-layout-fix ===== */ /* چیدمان نهایی مطابق ویترین مرجع */ #deals .deals{padding-top:28px;padding-bottom:38px} #deals .deals-title{display:none} #deals .deals-row{max-width:1450px;gap:16px;padding-top:10px;padding-bottom:12px;align-items:stretch} #deals .deal-promo{order:0;flex:0 0 220px;min-height:430px;border-radius:20px;padding:24px 16px;background:linear-gradient(160deg,#f948b9 0%,#d70a91 100%);justify-content:center} #deals .deal-promo:before{content:"تخفیف خورده‌های بازی‌دان";display:block;color:#fff;font-family:var(--font-display);font-size:22px;font-weight:400;line-height:1.5;text-shadow:0 3px 8px rgba(101,0,68,.2);order:2} #deals .deal-promo:after{content:"✦ ✧ ✦";top:22px;left:22px;letter-spacing:8px} #deals .deal-promo .tag{order:1;margin-bottom:3px;background:#fff;color:#d5008d;font-size:12.5px} #deals .deal-promo svg{order:3;width:92px;height:92px;margin:12px auto 6px} #deals .deal-promo h3{display:none} #deals .deal-promo .btn{order:4;margin-top:12px;background:#fff;color:#d5008d;border:0;box-shadow:0 8px 16px rgba(100,0,70,.16)} #deals .deal{flex-basis:214px;min-height:430px;border-radius:20px;padding:11px;box-shadow:0 10px 24px rgba(120,0,80,.17)} #deals .deal-img{aspect-ratio:1/1;border-radius:14px} #deals .deal b{font-size:13.5px;line-height:1.7;min-height:48px} #deals .deal .rate{margin-top:auto} #deals .deal .add{margin-top:auto} #deals .arrow{top:50%;z-index:8} @media(max-width:900px){#deals .deals-row{max-width:100%;gap:12px}#deals .deal-promo{flex-basis:195px}#deals .deal{flex-basis:195px}} @media(max-width:700px){#deals .deals{padding-top:22px}#deals .deal-promo{flex-basis:180px;min-height:360px}#deals .deal{flex-basis:180px;min-height:360px}#deals .deal-promo:before{font-size:18px}#deals .deals-row{gap:10px}} /* ===== start-here-posters ===== */ /* Scoped category posters. The discount carousel is unchanged. */ #start-here{background:radial-gradient(ellipse at 50% 0%,#3786ee 0%,transparent 65%),linear-gradient(125deg,#084aad,#11378c);padding-block:64px 70px;isolation:isolate} #start-here .container{max-width:1380px;position:relative;z-index:1} #start-here .sec-head{margin-bottom:30px} #start-here .sec-head h2{color:#fff;font-size:clamp(26px,3vw,36px);line-height:1.6;text-shadow:0 4px 16px #05265955} #start-here .sec-head h2:after{background:#8edaff;animation:none} #start-here .sec-head .sub{color:#e1efff;font-size:15px} #start-here .band-deco i{background:#8dd5ff!important;opacity:.25} #start-here .starts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;padding:10px 6px 20px} #start-here .start{display:block;position:relative;padding:0;min-height:0;background:none;border:0;border-radius:22px;perspective:1000px;box-shadow:none;outline-offset:7px} #start-here .start:hover{box-shadow:none;transform:none} #start-here .start:focus-visible{outline:3px solid #a5e8ff} #start-here .start-poster{--rx:0deg;--ry:0deg;--lift:0px;display:block;position:relative;aspect-ratio:4/5;min-height:0;background:#0b3484;border-radius:22px;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));transition:transform .35s ease,box-shadow .35s ease;box-shadow:0 5px 0 #05275a,0 16px 28px #00194355} #start-here .start-photo{display:block;position:absolute;inset:0 0 auto;width:100%;aspect-ratio:1;object-fit:cover;object-position:center;border-radius:22px 22px 0 0;transform:translateZ(1px)} #start-here [data-poster="1"] .start-poster{background:#391777} #start-here [data-poster="2"] .start-poster{background:#005c79} #start-here [data-poster="3"] .start-poster{background:#703b08} #start-here .start-caption{display:flex;flex-direction:column;justify-content:flex-end;position:absolute;inset:auto 0 0;min-height:37%;padding:24px 18px 20px;border-radius:0 0 22px 22px;background:linear-gradient(0deg,#04162eeb,#05182b88 65%,transparent);transform:translateZ(22px);color:#fff;text-align:right;pointer-events:none} #start-here .start-caption b{color:#fff;font-size:clamp(18px,1.65vw,23px);line-height:1.55;font-weight:400;text-shadow:0 2px 7px #0008} #start-here .start-caption>span{color:#e6f2ff;font-size:15px;line-height:1.7;margin-top:3px} #start-here .start-shine{display:block;position:absolute;inset:0;border:1px solid #ffffff40;border-radius:22px;background:radial-gradient(circle at var(--light-x,50%) var(--light-y,30%),#ffffff35,transparent 60%);opacity:0;pointer-events:none;transform:translateZ(25px);transition:opacity .3s ease} #start-here .start:is(:hover,:focus-visible) .start-shine{opacity:1} #start-here .start:focus-visible .start-poster{--lift:-5px} @media(hover:hover) and (pointer:fine){#start-here .start:hover .start-poster{--lift:-7px;box-shadow:0 6px 0 #05275a,0 24px 35px #00194370}} @media(max-width:900px){#start-here .starts{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:690px;margin:auto}#start-here .start-caption b{font-size:23px}} @media(max-width:540px){#start-here{padding-block:48px 45px}#start-here .starts{gap:16px 12px;padding-inline:2px}#start-here .start-poster{aspect-ratio:4/5.8;border-radius:16px}#start-here .start-photo{border-radius:16px 16px 0 0}#start-here .start-caption{padding:26px 10px 12px;min-height:42%;border-radius:0 0 16px 16px;transform:none}#start-here .start-caption b{font-size:18px;line-height:1.5}#start-here .start-caption>span{font-size:15px;line-height:1.6}#start-here .start-shine{border-radius:16px}#start-here .start:active .start-poster{transform:scale(.98)}} @media(prefers-reduced-motion:reduce){#start-here .start-poster{transform:none!important;transition:none}#start-here .start-shine{display:none}} /* ===== final-ui-polish ===== */ /* تخفیف‌ها: صورتی بازی‌دان */ #deals .deals{background:linear-gradient(145deg,#ff55bf 0%,#f30b9e 52%,#d90087 100%)} #deals .deal-promo{background:linear-gradient(160deg,#ff79cf,#c90080)} /* شروع کنیم: قاب کوچک‌تر و متناسب */ #start-here{padding-block:46px 52px} #start-here .starts{max-width:1120px;margin-inline:auto;gap:16px;padding-bottom:10px} #start-here .start-poster{aspect-ratio:4/4.65;border-radius:18px} #start-here .start-photo{border-radius:18px 18px 0 0} #start-here .start-caption{min-height:34%;padding:18px 15px 15px;border-radius:0 0 18px 18px} #start-here .start-caption b{font-size:clamp(16px,1.35vw,20px)} #start-here .start-caption>span{font-size:13px} #start-here .start-shine{border-radius:18px} /* مجله: عنوان جمع‌وجور، وسط‌چین و کارت سه‌بعدی */ .band-c{padding-block:48px 58px} .band-c .sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin-bottom:24px} .band-c .sec-head>div:first-child{display:flex;flex-direction:column;align-items:center} .band-c .sec-head h2{font-size:clamp(24px,2.7vw,32px);line-height:1.5} .band-c .sec-head .sub{font-size:14px} .band-c .head-tools{margin-top:3px}.band-c .see-all{font-size:13px} .band-c .mags{max-width:1120px;margin-inline:auto;gap:18px} .band-c .mag{transform-style:preserve-3d;transition:transform .35s ease,box-shadow .35s ease;box-shadow:0 10px 20px rgba(38,49,99,.1)} .band-c .mag:hover{transform:perspective(800px) rotateX(2deg) rotateY(-4deg) translateY(-7px);box-shadow:14px 20px 32px rgba(39,47,100,.2)} .band-c .mag-img{height:128px;transform:translateZ(10px);box-shadow:inset 0 0 0 1px #fff8} .band-c .mag-body{text-align:center;padding:13px 12px 15px;transform:translateZ(7px)} .band-c .mag-body b{font-size:14px;line-height:1.7;min-height:3.4em} .band-c .mag-meta{justify-content:center;font-size:12px;margin-top:9px} /* منوی دسته‌بندی: بازشدن نرم */ .mega{opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-10px) scale(.98);transform-origin:top center;transition:opacity .24s ease,transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear .3s} .mega:not([hidden]){opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1);transition-delay:0s} @media(max-width:700px){#start-here{padding-block:38px 42px}.band-c{padding-block:38px 45px}.band-c .mags{gap:12px}.band-c .mag-img{height:105px}.band-c .mag-body{padding:10px 8px 12px}.band-c .mag-body b{font-size:13px}} @media(prefers-reduced-motion:reduce){.mega{transition:none}.band-c .mag{transition:none}.band-c .mag:hover{transform:none}} /* ===== visual-pass ===== */ /* دور نهایی پولیش بصری */ .hero-main{box-shadow:0 28px 70px #3d1f7a38;border:1px solid #ffffff66} .hero-main:before{content:"✦ ✧ ✦";position:absolute;z-index:1;top:22px;inset-inline-start:32%;font-size:18px;letter-spacing:16px;color:#ffffffaa;animation:sparkleDrift 5s ease-in-out infinite;pointer-events:none}@keyframes sparkleDrift{50%{transform:translateY(8px) rotate(4deg);opacity:.45}} .hero-stage{filter:drop-shadow(0 24px 18px #25154d33)} .hero-break{filter:drop-shadow(0 14px 10px #27125244)} /* کارت‌های محصول */ .prod{position:relative;overflow:hidden;border:1px solid #edf0f7;box-shadow:0 8px 20px #2027440c;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease} .prod:hover{box-shadow:0 18px 35px #552c9a1c} .prod .prod-img{background:linear-gradient(145deg,#f8f8ff,#eef5ff);border-radius:18px;overflow:hidden}.prod .prod-img svg{transition:transform .45s ease}.prod:hover .prod-img svg{transform:scale(1.08) rotate(2deg)} /* نوار اعتماد */ .whys{position:relative;isolation:isolate}.whys:before{content:"";position:absolute;inset:-14px -3%;z-index:-1;border-radius:28px;background:linear-gradient(110deg,#fff4fb,#f0f7ff);border:1px solid #edf0f8;box-shadow:0 12px 30px #23325a0b} .why{padding:18px 10px;border-radius:18px;transition:transform .3s ease,background .3s ease}.why:hover{transform:translateY(-5px);background:#ffffffaa}.why .ic{box-shadow:0 8px 18px #26366a18;transition:transform .3s ease}.why:hover .ic{transform:rotate(-8deg) scale(1.08)} /* فوتر */ .site-footer{background:linear-gradient(145deg,#101d4f,#162d78 58%,#173e9c);color:#fff;position:relative;overflow:hidden}.site-footer:before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;background:#458dff2e;top:-220px;inset-inline-end:-120px;filter:blur(4px)}.site-footer .foot-col h3,.site-footer .foot-col h4{color:#fff}.site-footer .foot-col p,.site-footer .foot-col a,.site-footer .foot-col li{color:#dbe7ff}.site-footer .foot-col a:hover{color:#ff9bdd}.site-footer .social a{background:#ffffff18;border-color:#ffffff32;color:#fff;transition:.25s}.site-footer .social a:hover{background:#ff2caf;color:#fff;transform:translateY(-3px)} @media(max-width:700px){.hero-main:before{inset-inline-start:14%;font-size:15px}.whys:before{inset-inline:-2%}} @media(prefers-reduced-motion:reduce){.hero-main:before{animation:none}.prod,.why,.site-footer .social a{transition:none}} /* ===== footer-wave-fix ===== */ .foot-wave{height:100px;background:#f7f9ff;margin-bottom:-1px}.site-footer{margin-top:-1px}@media(max-width:768px){.foot-wave{height:60px}}@media(prefers-reduced-motion:reduce){.foot-wave{transition:none}} /* ===== magazine-motion-polish ===== */ /* مجله: ورود سینمایی در اسکرول + عمق سه‌بعدی در هاور */ .band-c .mag.rv{opacity:0;transform:perspective(900px) translateY(34px) rotateX(8deg) rotateY(-5deg) scale(.96);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;transform-origin:center bottom} .band-c .mag.rv.in{opacity:1;transform:perspective(900px) translateY(0) rotateX(0) rotateY(0) scale(1)} .band-c .mag.rv.in:hover{transform:perspective(900px) translateY(-9px) rotateX(3deg) rotateY(-6deg) rotateZ(-.4deg) scale(1.015);box-shadow:18px 26px 38px rgba(35,45,103,.2)} .band-c .mag.rv.in:hover .mag-img svg{transform:translateZ(18px) scale(1.12) rotate(3deg);filter:drop-shadow(0 12px 10px rgba(55,46,130,.22))} .band-c .mag-img{transition:transform .45s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d} .band-c .mag-body{transform-style:preserve-3d} .band-c .mag-body b{transition:color .25s ease}.band-c .mag:hover .mag-body b{color:#d40087} @media(max-width:700px){.band-c .mag.rv{transform:translateY(28px) scale(.97)}.band-c .mag.rv.in{transform:translateY(0) scale(1)}.band-c .mag.rv.in:active{transform:translateY(-3px) scale(.985)}.band-c .mag.rv.in:hover{transform:translateY(-4px) scale(1.01)} } @media(prefers-reduced-motion:reduce){.band-c .mag.rv,.band-c .mag.rv.in,.band-c .mag.rv.in:hover{opacity:1;transform:none!important;transition:none}.band-c .mag-img svg{transition:none!important}} /* ===== footer-color-unify ===== */ .foot-wave{background:#f7f9ff}.foot-wave path{fill:#193d91}.site-footer{background:#193d91}.site-footer:before{background:#458dff20} /* ===== why-glass-blue ===== */ /* ══════════ چرا بازی‌دان؟ — آبی متحرک + آیکن شیشه‌ای ══════════ */ .why-band{ background:linear-gradient(160deg,#0B3C9E 0%,#1149B8 46%,#092C78 100%); overflow:hidden; isolation:isolate; padding-block:66px; } .why-band > .container{ position:relative; z-index:2; } .why-band .band-wave{ z-index:3; } /* --- animated aurora --- */ .why-band .aurora{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; } .why-band .aurora i{ position:absolute; display:block; border-radius:50%; filter:blur(64px); will-change:transform; opacity:.55; } .why-band .aurora i:nth-child(1){ width:min(54vw,760px); aspect-ratio:1; top:-26%; inset-inline-start:-10%; background:radial-gradient(circle,#4BA4FF 0%,rgba(75,164,255,0) 70%); animation:auroraA 19s ease-in-out infinite alternate; } .why-band .aurora i:nth-child(2){ width:min(46vw,620px); aspect-ratio:1; bottom:-30%; inset-inline-end:-8%; background:radial-gradient(circle,#00D6DC 0%,rgba(0,214,220,0) 70%); opacity:.42; animation:auroraB 24s ease-in-out infinite alternate; } .why-band .aurora i:nth-child(3){ width:min(38vw,520px); aspect-ratio:1; top:18%; inset-inline-start:52%; background:radial-gradient(circle,#9A6BFF 0%,rgba(154,107,255,0) 70%); opacity:.34; animation:auroraC 28s ease-in-out infinite alternate; } @keyframes auroraA{ from{ transform:translate3d(0,0,0) scale(1) } to{ transform:translate3d(9%,14%,0) scale(1.18) } } @keyframes auroraB{ from{ transform:translate3d(0,0,0) scale(1.1) } to{ transform:translate3d(-11%,-12%,0) scale(.9) } } @keyframes auroraC{ from{ transform:translate3d(0,0,0) scale(.95) } to{ transform:translate3d(-14%,10%,0) scale(1.22) } } /* --- kill the light card + repaint the confetti for a dark field --- */ .why-band .whys::before{ display:none; } .why-band .band-deco i{ background:#BFE0FF !important; opacity:.28; } /* --- type on blue --- */ .why-band .sec-head h2{ color:#fff; text-shadow:0 4px 18px rgba(3,20,62,.35); } .why-band .sec-head .sub{ color:#CFE2FF; } .why-band .sec-head h2::after{ background:linear-gradient(90deg,#8FD3FF,#5FA8FF); } .why-band .why b{ color:#fff; font-size:15px; } .why-band .why span{ color:#C3D8F7; } /* --- iOS-style liquid glass --- */ .why-band .why .ic{ width:66px; height:66px; border-radius:21px; position:relative; overflow:hidden; background:linear-gradient(150deg,rgba(255,255,255,.28),rgba(255,255,255,.09)); -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%); border:1px solid rgba(255,255,255,.36); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 -12px 22px rgba(255,255,255,.06), 0 10px 26px rgba(3,18,58,.36); color:#fff; transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, background .45s ease; } .why-band .why .ic::before{ /* specular sheen */ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(125% 85% at 26% 10%, rgba(255,255,255,.55), transparent 58%); } .why-band .why .ic::after{ /* travelling glint on hover */ content:""; position:absolute; inset:-40% -120%; pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%); transform:translateX(-60%); transition:transform .75s cubic-bezier(.2,.8,.2,1); } .why-band .why:hover .ic::after{ transform:translateX(60%); } .why-band .why .ic svg{ position:relative; z-index:1; filter:drop-shadow(0 2px 5px rgba(3,18,58,.4)); } .why-band .why:hover .ic{ transform:translateY(-5px) rotate(-5deg) scale(1.06); background:linear-gradient(150deg,rgba(255,255,255,.38),rgba(255,255,255,.14)); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.85), inset 0 -12px 22px rgba(255,255,255,.09), 0 16px 34px rgba(3,18,58,.44); } /* --- 3D enter / exit --- */ .why-band .whys{ perspective:1100px; } /* Visible by default. Motion is progressive enhancement so a JS/runtime error can never hide this section. */ .why-band .why{ transform-style:preserve-3d; opacity:1; background:none; transform:none; transition:opacity .65s ease, transform .9s cubic-bezier(.2,.8,.2,1), background .3s ease; } .why-band.why-motion-ready .why{ opacity:0; transform:rotateX(-20deg) translateY(34px) translateZ(-70px) scale(.93); } .why-band.why-motion-ready .why.in{ opacity:1; transform:rotateX(0) translateY(0) translateZ(0) scale(1); } .why-band.why-motion-ready .why.out-top{ opacity:0; transform:rotateX(20deg) translateY(-34px) translateZ(-70px) scale(.93); } .why-band .why:hover{ background:rgba(255,255,255,.09); transform:rotateX(0) translateY(-6px) translateZ(24px) scale(1.02); } @media (max-width:700px){ .why-band{ padding-block:52px; } .why-band .why .ic{ width:60px; height:60px; border-radius:19px; } .why-band .aurora i{ filter:blur(48px); } } @media (prefers-reduced-motion: reduce){ .why-band .aurora i{ animation:none !important; } .why-band .why, .why-band .why.in, .why-band .why.out-top{ opacity:1 !important; transform:none !important; transition:none; } .why-band .why .ic, .why-band .why .ic::after{ transition:none; } .why-band .why:hover .ic{ transform:none; } } /* ===== footer-credit ===== */ /* امضای استودیو — دقیقاً وسط نوار پایین فوتر */ .foot-bottom{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; } .foot-bottom .copy{ justify-self:start; color:#B9C8EA; } .foot-bottom .seals{ justify-self:end; } .foot-credit{ justify-self:center; text-align:center; font-size:12px; line-height:1.6; color:#93A9D6; letter-spacing:.04em; white-space:nowrap; } .foot-credit a{ color:#B9C8EA; text-decoration:none; transition:color .2s ease; } .foot-credit a:hover{ color:#fff; text-decoration:underline; } @media (max-width:760px){ .foot-bottom{ grid-template-columns:1fr; justify-items:center; text-align:center; row-gap:14px; } .foot-bottom .copy,.foot-bottom .seals,.foot-credit{ justify-self:center; } } /* ===== new-arrivals-coverflow ===== */ /* ══════════ تازه رسیده‌ها — ویترین سه‌بعدی صورتی ══════════ */ #new{ max-width:none; padding-inline:0; position:relative; isolation:isolate; margin-block:clamp(18px,3vw,40px); padding-block:36px 40px; background:linear-gradient(158deg,#FF6AC9 0%,#FB1BA0 48%,#D9008C 100%); overflow:hidden; } #new::before,#new::after{ /* white curves that carve the band out of the page */ content:""; position:absolute; z-index:0; inset-inline:-4%; height:132px; background:#fff; pointer-events:none; } #new::before{ top:-62px; border-radius:0 0 52% 48%/0 0 60% 64%; transform:rotate(-1deg); } #new::after{ bottom:-70px; border-radius:52% 48% 0 0/64% 60% 0 0; transform:rotate(1deg); } #new > .sec-head{ position:relative; z-index:3; max-width:var(--w); margin-inline:auto; padding-inline:clamp(16px,3vw,44px); margin-bottom:14px; } #new .sec-head h2{ color:#fff; text-shadow:0 4px 16px rgba(126,0,86,.3); } #new .sec-head .sub{ color:#FFE2F5; } #new .sec-head h2::after{ background:rgba(255,255,255,.85); } #new .see-all{ color:#fff; } #new .arrow{ width:40px; height:40px; background:rgba(255,255,255,.95); border:0; color:#D9008C; box-shadow:0 8px 20px rgba(122,0,84,.26); } #new .arrow:hover{ background:#fff; transform:scale(1.09); } /* the 3D stage */ #new .news-row{ position:relative; z-index:2; display:flex; gap:0; max-width:var(--w); margin-inline:auto; padding:26px 0 30px; overflow-x:auto; overflow-y:visible; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; } #new .news-row::-webkit-scrollbar{ display:none; } #new .news-row::before,#new .news-row::after{ content:""; flex:0 0 clamp(18px,5vw,74px); } #new .news-row > .prod{ flex:0 0 178px; margin-inline:7px; transform-origin:50% 60%; will-change:transform, opacity; transition:box-shadow .35s ease; } @media (prefers-reduced-motion: no-preference){ #new .news-row > .prod{ transition:transform .18s linear, opacity .18s linear, box-shadow .35s ease; } } #new .news-row > .prod.is-hero{ z-index:3; } /* ===== product-card-redesign ===== */ /* ══════════ کارت محصول ══════════ */ .prod{ background:#fff; border:1px solid #EEF0F7; border-radius:22px; padding:13px 13px 15px; gap:8px; overflow:hidden; position:relative; box-shadow:0 2px 4px rgba(24,28,60,.04), 0 12px 28px rgba(24,28,60,.07); transition:box-shadow .38s cubic-bezier(.2,.8,.2,1), border-color .3s ease; } .prod::before{ /* soft brand wash that wakes up on hover */ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; background:radial-gradient(120% 62% at 50% 0%, rgba(255,0,163,.07), transparent 68%); transition:opacity .38s ease; } .prod:hover{ border-color:#FFC9EB; box-shadow:0 6px 12px rgba(140,20,110,.08), 0 26px 48px rgba(140,20,110,.16); } .prod:hover::before{ opacity:1; } .prod > *{ position:relative; z-index:1; } /* image well: spotlight behind the toy + a ground shadow under it */ .prod .prod-img{ background:linear-gradient(168deg,#FDFDFF 0%,#F4F6FC 100%); border-radius:16px; aspect-ratio:1/1; overflow:hidden; position:relative; box-shadow:inset 0 0 0 1px rgba(30,40,90,.04); } .prod .prod-img::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(58% 46% at 50% 38%, rgba(255,255,255,.95), transparent 72%); } .prod .prod-img::after{ /* contact shadow so the toy sits on something */ content:""; position:absolute; left:50%; bottom:11%; translate:-50% 0; width:56%; height:11px; border-radius:50%; pointer-events:none; background:radial-gradient(ellipse,rgba(40,20,70,.2),transparent 72%); transition:width .45s ease, opacity .45s ease; opacity:.8; } .prod:hover .prod-img::after{ width:44%; opacity:.5; } .prod .prod-img svg.art{ width:86%; height:86%; position:relative; z-index:1; transition:transform .45s cubic-bezier(.34,1.4,.5,1); filter:drop-shadow(0 8px 10px rgba(40,20,70,.12)); } .prod:hover .prod-img svg.art{ transform:translateY(-7px) scale(1.07) rotate(-2.5deg); } /* badges */ .prod .new-badge{ top:10px; inset-inline-start:10px; padding:4px 11px; font-size:12px; letter-spacing:.03em; background:linear-gradient(135deg,#25AB3A,#00B288); box-shadow:0 4px 12px rgba(0,140,90,.32); } .prod .fav{ top:10px; inset-inline-end:10px; width:32px; height:32px; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(30,40,90,.06); box-shadow:0 3px 10px rgba(30,40,90,.10); transition:transform .25s cubic-bezier(.34,1.6,.5,1), color .2s ease, background .2s ease; } .prod .fav:hover{ transform:scale(1.12); background:#fff; } /* meta */ .prod .chip{ background:#F3F5FA; color:#6B7186; font-size:12px; padding:3px 10px; } .prod b{ font-size:13.5px; line-height:1.7; min-height:48px; color:#22263A; } .prod b .p-link{ transition:color .2s ease; } .prod:hover b .p-link{ color:var(--pink); } .prod .rate{ margin-block:1px; } .prod .price{ font-size:18px; letter-spacing:-.3px; } /* CTA */ .prod .add{ margin-top:6px; padding:11px 14px; font-size:13px; border-radius:14px; background:var(--grad-btn); box-shadow:0 6px 16px rgba(255,0,163,.26); transition:transform .22s cubic-bezier(.34,1.5,.5,1), box-shadow .3s ease, filter .2s ease; } .prod .add:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(255,0,163,.34); filter:saturate(1.1); } .prod .add:active{ transform:translateY(0) scale(.97); } @media (max-width:900px){ #new .news-row > .prod{ flex-basis:166px; } #new .news-row{ padding-block:24px 30px; } } @media (max-width:900px){ /* the white curve is shallower on small screens, so the heading clears it */ #new::before{ top:-46px; height:96px; } #new::after{ bottom:-52px; height:96px; } #new{ padding-block:70px 56px; } } @media (max-width:560px){ #new{ padding-block:64px 48px; } #new .news-row > .prod{ flex-basis:150px; margin-inline:5px; } .prod{ border-radius:18px; padding:10px 10px 12px; } } @media (prefers-reduced-motion: reduce){ #new .news-row > .prod{ transform:none !important; opacity:1 !important; transition:none; } #new .news-row{ scroll-snap-type:none; } .prod,.prod .add,.prod .fav,.prod .prod-img svg.art,.prod .prod-img::after{ transition:none; } .prod:hover .prod-img svg.art{ transform:none; } } /* ===== add-to-cart-popup ===== */ /* ══════════ پاپ‌آپ افزودن به سبد ══════════ */ .apop-scrim{ position:fixed; inset:0; z-index:970; background:rgba(46,12,48,.34); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; transition:opacity .26s ease; } .apop-scrim.on{ opacity:1; } .apop{ position:fixed; z-index:971; top:50%; left:50%; width:min(336px,calc(100vw - 32px)); background:#fff; border-radius:24px; padding:26px 22px 20px; text-align:center; box-shadow:0 18px 50px rgba(60,10,60,.3), 0 2px 6px rgba(60,10,60,.1); translate:-50% -50%; transform:scale(.84) translateY(22px); opacity:0; transition:transform .42s cubic-bezier(.34,1.56,.64,1), opacity .26s ease; } .apop.on{ transform:scale(1) translateY(0); opacity:1; } .apop-x{ position:absolute; top:12px; inset-inline-end:12px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:#8A8FA3; background:#F4F5F9; transition:.18s; } .apop-x:hover{ background:#EAECF3; color:#3A3F55; } .apop-x svg{ width:15px; height:15px; } .apop-check{ width:62px; height:62px; margin:0 auto 14px; position:relative; } .apop-check svg{ width:100%; height:100%; overflow:visible; } .apop-check .ring{ fill:none; stroke:url(#apopGrad); stroke-width:3.4; stroke-linecap:round; stroke-dasharray:170; stroke-dashoffset:170; } .apop-check .tick{ fill:none; stroke:url(#apopGrad); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:34; stroke-dashoffset:34; } .apop.on .ring{ animation:apopRing .62s cubic-bezier(.2,.8,.2,1) forwards; } .apop.on .tick{ animation:apopTick .38s cubic-bezier(.2,.8,.2,1) .42s forwards; } @keyframes apopRing{ to{ stroke-dashoffset:0 } } @keyframes apopTick{ to{ stroke-dashoffset:0 } } .apop-title{ font-size:15.5px; font-weight:800; color:#22263A; margin-bottom:14px; } .apop-row{ display:flex; align-items:center; gap:11px; text-align:start; background:#F8F9FC; border:1px solid #EEF0F7; border-radius:16px; padding:10px 12px; } .apop-img{ width:52px; height:52px; border-radius:12px; display:grid; place-items:center; flex:none; overflow:hidden; } .apop-img svg{ width:84%; height:84%; } .apop-meta{ min-width:0; flex:1; } .apop-meta b{ display:block; font-size:13px; font-weight:600; line-height:1.55; color:#22263A; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .apop-meta span{ font-size:13px; font-weight:800; color:var(--pink); } .apop-count{ font-size:12.5px; color:#767B8B; margin-top:11px; } .apop-btns{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:16px; } .apop-btns .btn{ padding:11px 10px; font-size:13px; border-radius:13px; } .apop-btns .btn-ghost{ border:1px solid #E4E7F0; color:#3A3F55; background:#fff; } .apop-btns .btn-ghost:hover{ background:#F4F5F9; } @media (prefers-reduced-motion: reduce){ .apop{ transition:none; transform:translateY(0) scale(1); } .apop-scrim{ transition:none; } .apop.on .ring,.apop.on .tick{ animation:none; stroke-dashoffset:0; } } /* ===== new-stage-fantasy ===== */ /* ══════════ ویترین فانتزی ══════════ */ #new{ background:linear-gradient(158deg,#FF77CF 0%,#FB2BA6 46%,#D1008A 100%); } /* شب‌تاب‌ها و حباب‌های شناور */ #new .stage-fx{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; } #new .stage-fx .tw{ position:absolute; width:5px; height:5px; border-radius:50%; background:#fff; box-shadow:0 0 8px 2px rgba(255,255,255,.75); animation:twinkle 3.4s ease-in-out infinite; } #new .stage-fx .bb{ position:absolute; border-radius:50%; background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55),rgba(255,255,255,.07) 58%,transparent 72%); border:1px solid rgba(255,255,255,.22); animation:floatUp linear infinite; } #new .stage-fx .st{ position:absolute; color:rgba(255,255,255,.72); animation:spinDrift 14s linear infinite; } #new .stage-fx .st svg{ width:100%; height:100%; display:block; } @keyframes twinkle{ 0%,100%{ opacity:.15; transform:scale(.6) } 50%{ opacity:1; transform:scale(1.15) } } @keyframes floatUp{ 0%{ transform:translateY(18px) scale(.9); opacity:0 } 12%{ opacity:.85 } 88%{ opacity:.6 } 100%{ transform:translateY(-118px) scale(1.1); opacity:0 } } @keyframes spinDrift{ 0%{ transform:rotate(0) translateY(0) } 50%{ transform:rotate(180deg) translateY(-14px) } 100%{ transform:rotate(360deg) translateY(0) } } /* نورافکن پشت کارت وسط */ #new .news-row::after{ flex:0 0 clamp(18px,5vw,74px); } #new .spot{ position:absolute; z-index:1; left:50%; top:50%; translate:-50% -46%; width:min(560px,82vw); aspect-ratio:1.35/1; border-radius:50%; pointer-events:none; background:radial-gradient(ellipse,rgba(255,255,255,.4) 0%,rgba(255,255,255,.12) 42%,transparent 68%); filter:blur(14px); animation:spotPulse 6.5s ease-in-out infinite; } @keyframes spotPulse{ 0%,100%{ opacity:.75; transform:scale(1) } 50%{ opacity:1; transform:scale(1.07) } } /* کارت وسط، برجسته‌تر */ #new .news-row > .prod.is-hero{ box-shadow:0 10px 20px rgba(120,0,84,.2), 0 34px 60px rgba(120,0,84,.3); } /* ── ورود سه‌بعدی ── */ #new .news-row.pre > .prod{ opacity:0; } #new .news-row.enter > .prod{ animation:cardFlyIn .9s cubic-bezier(.2,.82,.25,1) both; } @keyframes cardFlyIn{ from{ opacity:0; transform:perspective(1400px) rotateY(-42deg) rotateX(12deg) translate3d(0,58px,-240px) scale(.84); } to { opacity:1; transform:perspective(1400px) rotateY(0) rotateX(0) translate3d(0,0,0) scale(1); } } @media (max-width:700px){ #new .spot{ width:min(340px,88vw); } #new .stage-fx .bb{ display:none; } } @media (prefers-reduced-motion: reduce){ #new .stage-fx .tw,#new .stage-fx .bb,#new .stage-fx .st,#new .spot{ animation:none !important; } #new .stage-fx .bb{ opacity:.3; } #new .news-row.pre > .prod,#new .news-row.enter > .prod{ opacity:1 !important; animation:none !important; } } /* ===== new-card-compact ===== */ /* کارت‌های ویترین جمع‌وجورتر از کارت‌های صفحه */ #new .news-row > .prod{ padding:9px 9px 11px; gap:6px; border-radius:18px; } #new .news-row > .prod .prod-img{ aspect-ratio:1/.84; border-radius:13px; } #new .news-row > .prod .prod-img svg.art{ width:82%; height:82%; } #new .news-row > .prod .chip{ font-size:12px; padding:2px 8px; } #new .news-row > .prod b{ font-size:13.5px; line-height:1.7; min-height:48px; } #new .news-row > .prod .rate{ font-size:12px; } #new .news-row > .prod .rate svg{ width:11px; height:11px; } #new .news-row > .prod .price{ font-size:15px; } #new .news-row > .prod .price .cur{ font-size:12px; } #new .news-row > .prod .add{ margin-top:4px; padding:8px 10px; font-size:12.5px; border-radius:12px; } #new .news-row > .prod .add svg{ width:13px; height:13px; } #new .news-row > .prod .fav{ width:27px; height:27px; top:8px; inset-inline-end:8px; } #new .news-row > .prod .fav svg{ width:13px; height:13px; } #new .news-row > .prod .new-badge{ top:8px; inset-inline-start:8px; font-size:12px; padding:3px 9px; } #new .spot{ width:min(460px,78vw); } @media (max-width:560px){ #new .news-row > .prod b{ font-size:13.5px; min-height:48px; } #new .news-row > .prod .price{ font-size:15px; } } /* ===== routes-shell ===== */ /* ══════════════════ مسیرها ══════════════════ */ .route{ display:none; } .route.is-on{ display:block; } /* بردکرامب */ .crumb{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:13px; color:var(--muted); padding-block:16px 4px; } .crumb a{ color:var(--muted); transition:color .2s; } .crumb a:hover{ color:var(--pink); } .crumb i{ opacity:.5; font-style:normal; } .crumb b{ color:var(--ink); font-weight:600; } .page-head{ margin-block:6px 18px; } .page-head h1{ font-family:var(--font-display); font-size:clamp(22px,2.6vw,30px); font-weight:400; line-height:1.5; } .page-head .cnt{ font-size:13px; color:var(--muted); margin-top:4px; } /* ══════════════════ دسته‌بندی ══════════════════ */ .cat-wrap{ display:grid; grid-template-columns:258px minmax(0,1fr); gap:22px; align-items:start; margin-block:6px 48px; } .filters{ position:sticky; top:96px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:16px 16px 18px; box-shadow:var(--e1); } .filters h2{ font-size:15px; font-weight:800; margin-bottom:4px; } .fgroup{ border-top:1px solid var(--hair); padding-block:13px; } .fgroup:first-of-type{ border-top:0; } .fgroup > h3{ font-size:13px; font-weight:700; margin-bottom:9px; display:flex; align-items:center; justify-content:space-between; } .fopt{ display:flex; align-items:center; gap:8px; padding:5px 0; font-size:13px; cursor:pointer; } .fopt input{ width:16px; height:16px; accent-color:var(--pink); flex:none; cursor:pointer; } .fopt .n{ margin-inline-start:auto; font-size:12.5px; color:var(--muted); } .frange{ display:flex; align-items:center; gap:8px; } .frange input[type="number"]{ width:100%; min-width:0; border:1px solid var(--line); border-radius:10px; padding:8px 9px; font-size:13px; text-align:center; } .frange span{ color:var(--muted); font-size:13px; } .fclear{ width:100%; margin-top:12px; padding:9px; border-radius:12px; border:1px solid var(--line); font-size:13px; font-weight:700; color:var(--pink); background:#fff; transition:.2s; } .fclear:hover{ background:#FFF2FA; border-color:#FFC4EA; } .sortbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:9px 12px; margin-bottom:16px; box-shadow:var(--e1); } .sortbar .lbl{ font-size:13px; color:var(--muted); margin-inline-end:2px; display:flex; align-items:center; gap:6px; } .sortbar .lbl svg{ width:15px; height:15px; } .sortbar button{ font-size:13px; font-weight:600; color:#5A5F70; padding:6px 12px; border-radius:99px; transition:.18s; } .sortbar button:hover{ background:#F5F6FA; } .sortbar button[aria-pressed="true"]{ background:var(--pink); color:#fff; } .fbtn{ display:none; } .chips-active{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; } .chips-active .ch{ display:inline-flex; align-items:center; gap:6px; background:#FFF0F9; border:1px solid #FFC9EB; color:#B0186E; font-size:12.5px; font-weight:600; padding:5px 10px; border-radius:99px; } .chips-active .ch button{ color:inherit; opacity:.7; display:grid; place-items:center; } .chips-active .ch button:hover{ opacity:1; } .chips-active .ch svg{ width:12px; height:12px; } .pgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } .pgrid .prod{ width:100%; } .empty-state{ grid-column:1/-1; text-align:center; padding:56px 20px; } .empty-state svg{ width:92px; height:92px; margin:0 auto 14px; opacity:.85; } .empty-state b{ display:block; font-size:15px; font-weight:800; margin-bottom:6px; } .empty-state p{ font-size:13px; color:var(--muted); } .pager{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:26px; } .pager button{ min-width:36px; height:36px; padding:0 10px; border-radius:11px; border:1px solid var(--line); background:#fff; font-size:13px; font-weight:700; color:#4A4F60; transition:.18s; } .pager button:hover:not(:disabled){ border-color:#FFC4EA; color:var(--pink); } .pager button[aria-current="page"]{ background:var(--grad-btn); color:#fff; border-color:transparent; } .pager button:disabled{ opacity:.4; cursor:default; } /* ══════════════════ محصول ══════════════════ */ .pdp{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:26px; align-items:start; margin-block:6px 40px; } .pdp-main{ display:grid; grid-template-columns:340px minmax(0,1fr); gap:26px; align-items:start; } .gal{ position:sticky; top:96px; } .gal-big{ background:linear-gradient(168deg,#FDFDFF,#F3F5FC); border:1px solid var(--line); border-radius:var(--r-md); aspect-ratio:1/1; display:grid; place-items:center; position:relative; overflow:hidden; } .gal-big::after{ content:""; position:absolute; left:50%; bottom:11%; translate:-50% 0; width:52%; height:13px; border-radius:50%; background:radial-gradient(ellipse,rgba(40,20,70,.18),transparent 72%); } .gal-big svg{ width:74%; height:74%; position:relative; z-index:1; filter:drop-shadow(0 12px 14px rgba(40,20,70,.14)); transition:transform .4s cubic-bezier(.34,1.4,.5,1); } .gal-big:hover svg{ transform:scale(1.06); } .gal-thumbs{ display:flex; gap:9px; margin-top:11px; } .gal-thumbs button{ flex:1; aspect-ratio:1/1; border-radius:13px; border:1.5px solid var(--line); background:#F7F8FC; display:grid; place-items:center; transition:.2s; overflow:hidden; } .gal-thumbs button svg{ width:72%; height:72%; } .gal-thumbs button:hover{ border-color:#FFB5E4; } .gal-thumbs button[aria-current="true"]{ border-color:var(--pink); background:#FFF3FA; } .pdp-title{ font-size:20px; font-weight:800; line-height:1.7; margin-bottom:8px; } .pdp-sub{ font-size:13px; color:var(--muted); margin-bottom:12px; } .pdp-meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--hair); margin-bottom:14px; } .pdp-meta .rate{ font-size:13px; } .pdp-meta .rate svg{ width:15px; height:15px; } .pdp-meta .sold{ font-size:13px; color:var(--muted); } .vars{ margin-bottom:16px; } .vars h3{ font-size:13px; font-weight:700; margin-bottom:9px; } .vopts{ display:flex; gap:8px; flex-wrap:wrap; } .vopts button{ padding:8px 15px; border-radius:12px; border:1.5px solid var(--line); background:#fff; font-size:13px; font-weight:600; color:#4A4F60; transition:.18s; } .vopts button:hover{ border-color:#FFB5E4; } .vopts button[aria-pressed="true"]{ border-color:var(--pink); color:var(--pink); background:#FFF3FA; } .spec-list{ display:grid; gap:0; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; } .spec-list div{ display:grid; grid-template-columns:130px minmax(0,1fr); font-size:13px; } .spec-list div + div{ border-top:1px solid var(--hair); } .spec-list dt{ padding:11px 14px; background:#FAFBFD; color:var(--muted); font-weight:600; } .spec-list dd{ padding:11px 14px; margin:0; color:var(--ink); } .tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-block:26px 16px; } .tabs button{ padding:11px 16px; font-size:14px; font-weight:700; color:var(--muted); border-bottom:2.5px solid transparent; margin-bottom:-1px; transition:.2s; } .tabs button:hover{ color:var(--ink); } .tabs button[aria-selected="true"]{ color:var(--pink); border-bottom-color:var(--pink); } .tabpane{ font-size:14px; line-height:2.05; color:#4A4F60; } .tabpane p + p{ margin-top:11px; } .rev{ border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; } .rev + .rev{ margin-top:10px; } .rev-top{ display:flex; align-items:center; gap:10px; margin-bottom:7px; } .rev-top b{ font-size:13px; } .rev-top .rate{ font-size:12.5px; } .rev-top .when{ margin-inline-start:auto; font-size:12.5px; color:var(--muted); } .rev p{ font-size:13px; line-height:1.95; color:#4A4F60; } .buybox{ position:sticky; top:96px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:16px; box-shadow:var(--e2); } .buybox .seller{ display:flex; align-items:center; gap:9px; padding-bottom:12px; border-bottom:1px solid var(--hair); margin-bottom:12px; font-size:13px; } .buybox .seller svg{ width:18px; height:18px; color:var(--pink); flex:none; } .buybox .seller b{ font-weight:700; } .buybox .perk{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:#4A4F60; padding:5px 0; } .buybox .perk svg{ width:15px; height:15px; color:var(--c4-i); flex:none; } .buybox .pbox{ margin-block:13px 12px; text-align:end; } .buybox .pbox .old{ display:block; font-size:13px; color:var(--muted); text-decoration:line-through; } .buybox .pbox .now{ font-size:23px; font-weight:800; color:var(--pink); letter-spacing:-.4px; } .buybox .pbox .cur{ font-size:13px; color:var(--muted); font-weight:600; margin-inline-start:4px; } .buybox .off-pill{ display:inline-block; background:var(--grad-btn); color:#fff; font-size:12.5px; font-weight:800; padding:3px 9px; border-radius:99px; margin-inline-end:7px; } .buybox .add{ width:100%; } .buybox .stock-warn{ font-size:12.5px; color:#B0186E; text-align:center; margin-top:9px; font-weight:600; } .related{ margin-block:34px 46px; } /* ══════════════════ ارتقای صفحه محصول ══════════════════ */ .gal-actions{ position:absolute; top:12px; inset-inline-end:12px; z-index:5; display:flex; flex-direction:column; gap:8px; } .gal-actions .gal-act, .gal-actions .fav{ position:static; inset:auto; width:38px; height:38px; border-radius:13px; display:grid; place-items:center; background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.86); box-shadow:0 6px 18px rgba(43,31,66,.10); color:#5D6270; backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); transition:transform .2s ease, color .2s ease, box-shadow .2s ease, background .2s ease; } .gal-actions .gal-act:hover, .gal-actions .fav:hover{ transform:translateY(-2px); color:var(--pink); background:#fff; box-shadow:0 9px 22px rgba(255,0,163,.13); } .gal-actions .gal-act svg, .gal-actions .fav svg{ width:18px; height:18px; } .gal-actions .fav.on{ color:var(--pink); background:#FFF3FA; } .kid-benefits{ margin:0 0 18px; padding:14px; border:1px solid #F2DDED; border-radius:18px; background:linear-gradient(120deg,#FFF8FC 0%,#FBFAFF 52%,#F6FAFF 100%); } .kid-benefits-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; } .kid-benefits-head b{ font-size:13px; font-weight:800; color:#332C39; } .kid-benefits-head span{ font-size:12px; color:var(--muted); } .kid-benefit-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .kid-benefit{ min-width:0; padding:10px; border-radius:14px; background:rgba(255,255,255,.88); border:1px solid rgba(231,233,240,.9); display:grid; grid-template-columns:32px minmax(0,1fr); gap:8px; align-items:center; } .kid-benefit .kb-ic{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:#FFF0F9; color:var(--pink); } .kid-benefit:nth-child(2) .kb-ic{ background:#EEF7FF; color:var(--c6-i); } .kid-benefit:nth-child(3) .kb-ic{ background:#EEFAF1; color:var(--c3-i); } .kid-benefit svg{ width:17px; height:17px; } .kid-benefit small{ display:block; font-size:12px; color:var(--muted); line-height:1.45; } .kid-benefit strong{ display:block; margin-top:2px; font-size:12.5px; font-weight:800; color:#353945; line-height:1.55; } .buybox{ overflow:hidden; } .buy-status{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:-2px 0 12px; padding:9px 10px; border-radius:13px; background:#F2FBF5; color:#136B31; font-size:12.5px; font-weight:700; } .buy-status span{ display:inline-flex; align-items:center; gap:6px; } .buy-status i{ width:7px; height:7px; border-radius:50%; background:#25AB3A; box-shadow:0 0 0 4px rgba(37,171,58,.12); } .buy-status small{ font-size:12px; color:#5E7565; font-weight:600; } .delivery-card{ margin:12px 0; padding:11px 12px; border:1px dashed #D9DDE8; border-radius:15px; display:grid; grid-template-columns:34px minmax(0,1fr); gap:9px; align-items:center; background:#FAFBFD; } .delivery-card .dc-ic{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:#EAF5FF; color:#0859AC; } .delivery-card svg{ width:18px; height:18px; } .delivery-card b{ display:block; font-size:12.5px; margin-bottom:2px; } .delivery-card span{ display:block; font-size:12px; color:var(--muted); line-height:1.6; } .qty-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:11px 0; } .qty-row > span{ font-size:12.5px; color:#4A4F60; font-weight:700; } .qty-pick{ display:inline-flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--line); border-radius:13px; background:#fff; } .qty-pick button{ width:30px; height:30px; border-radius:10px; display:grid; place-items:center; font-size:17px; font-weight:800; color:var(--pink-dark); transition:.15s; } .qty-pick button:hover:not(:disabled){ background:var(--pink-soft); } .qty-pick button:disabled{ opacity:.35; cursor:default; } .qty-pick b{ width:30px; text-align:center; font-size:14px; font-variant-numeric:tabular-nums; } .buy-actions{ display:grid; grid-template-columns:1fr; gap:10px; } .buybox .add{ width:100%; min-height:58px; padding:15px 18px; border-radius:18px; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-size:15px; font-weight:900; letter-spacing:-.1px; box-shadow:0 14px 28px rgba(255,0,163,.24); } .buybox .add svg{ width:18px; height:18px; } .buybox .add:hover{ transform:translateY(-2px) scale(1.01); box-shadow:0 18px 34px rgba(255,0,163,.30); } .buybox .add:active{ transform:translateY(0) scale(.985); } .buybox .quick-buy{ width:100%; min-height:46px; border:1.5px solid #FFC4EA; border-radius:999px; background:#fff; color:var(--pink-dark); font-size:13px; font-weight:800; transition:.2s; } .buybox .quick-buy:hover{ background:#FFF3FA; transform:translateY(-1px); } .buybox .buy-note{ text-align:center; margin-top:10px; font-size:12px; color:var(--muted); } @media(max-width:700px){ .buybox .add{ min-height:60px; font-size:14.5px; } .buybox .quick-buy{ min-height:48px; } } .review-summary{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:18px; align-items:center; padding:17px; margin-bottom:14px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(120deg,#FFF9FD,#FAFBFF); } .review-score{ text-align:center; padding-inline-end:16px; border-inline-end:1px solid var(--line); } .review-score strong{ display:block; font-size:34px; line-height:1; font-weight:900; color:#2F3039; } .review-score > span{ display:block; margin-top:5px; font-size:12px; color:var(--muted); } .review-stars{ display:flex; justify-content:center; gap:2px; margin-top:8px; color:var(--pink); } .review-stars svg{ width:15px; height:15px; } .review-overall b{ display:block; font-size:13px; margin-bottom:8px; } .review-overall p{ font-size:12.5px; color:var(--muted); line-height:1.8; margin-top:7px; } .review-meter{ height:8px; overflow:hidden; border-radius:99px; background:#F1EAF0; } .review-meter i{ display:block; height:100%; border-radius:inherit; background:var(--grad-btn); } .pdp-zoom{ position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:24px; background:rgba(28,20,34,.55); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); opacity:0; pointer-events:none; transition:opacity .22s ease; } .pdp-zoom.on{ opacity:1; pointer-events:auto; } .pdp-zoom-card{ width:min(620px,92vw); aspect-ratio:1/1; position:relative; display:grid; place-items:center; border-radius:28px; background:#fff; box-shadow:0 28px 80px rgba(20,12,30,.28); transform:scale(.96); transition:transform .26s cubic-bezier(.22,1,.36,1); } .pdp-zoom.on .pdp-zoom-card{ transform:none; } .pdp-zoom-card > svg{ width:72%; height:72%; filter:drop-shadow(0 18px 20px rgba(40,20,70,.16)); } .pdp-zoom-x{ position:absolute; top:14px; inset-inline-end:14px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:#F6F7FA; color:#5D6270; } .pdp-zoom-x svg{ width:18px; height:18px; } .pdp-mini-toast{ position:fixed; top:18px; left:50%; z-index:1300; translate:-50% -10px; opacity:0; background:#2F3039; color:#fff; border-radius:99px; padding:9px 15px; font-size:12.5px; font-weight:700; box-shadow:0 10px 28px rgba(0,0,0,.18); transition:.22s; pointer-events:none; } .pdp-mini-toast.on{ opacity:1; translate:-50% 0; } @media (max-width:720px){ .kid-benefit-grid{ grid-template-columns:1fr; } .kid-benefit{ grid-template-columns:34px minmax(0,1fr); } .review-summary{ grid-template-columns:1fr; } .review-score{ padding:0 0 13px; border-inline-end:0; border-bottom:1px solid var(--line); } .gal-actions{ top:9px; inset-inline-end:9px; } .gal-actions .gal-act,.gal-actions .fav{ width:35px; height:35px; border-radius:12px; } } @media (prefers-reduced-motion: reduce){ .gal-actions .gal-act,.gal-actions .fav,.buybox .quick-buy,.pdp-zoom,.pdp-zoom-card,.pdp-mini-toast{ transition:none !important; } } /* ══════════════════ پرداخت ══════════════════ */ .co-wrap{ margin-block:10px 48px; } .stepper{ display:flex; align-items:flex-start; justify-content:center; gap:0; max-width:860px; margin:10px auto 28px; } .stepper .st{ flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; position:relative; text-align:center; } .stepper .st::before{ content:""; position:absolute; top:17px; inset-inline-start:50%; width:100%; height:2.5px; background:var(--line); z-index:0; } .stepper .st:last-child::before{ display:none; } .stepper .st.done::before{ background:var(--c4-s); } .stepper .dot{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#fff; border:2.5px solid var(--line); color:var(--muted); font-size:14px; font-weight:800; position:relative; z-index:1; transition:.28s; } .stepper .st.on .dot{ border-color:var(--pink); color:var(--pink); box-shadow:0 0 0 5px rgba(255,0,163,.12); } .stepper .st.done .dot{ background:var(--c4-s); border-color:var(--c4-s); color:#fff; } .stepper .dot svg{ width:17px; height:17px; } .stepper .st span{ font-size:12.5px; font-weight:700; color:var(--muted); } .stepper .st.on span{ color:var(--pink); } .stepper .st.done span{ color:var(--c4-i); } .co-grid{ display:grid; grid-template-columns:minmax(0,1fr) 306px; gap:22px; align-items:start; } .co-panel{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:18px; box-shadow:var(--e1); } .co-panel > h2{ font-size:15px; font-weight:800; margin-bottom:14px; } .co-step{ display:none; } .co-step.is-on{ display:block; animation:coIn .38s cubic-bezier(.2,.8,.25,1) both; } @keyframes coIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } } .co-row{ display:grid; grid-template-columns:76px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 0; } .co-row + .co-row{ border-top:1px solid var(--hair); } .co-row .im{ width:76px; height:76px; border-radius:13px; display:grid; place-items:center; overflow:hidden; } .co-row .im svg{ width:80%; height:80%; } .co-row .mt b{ display:block; font-size:14px; font-weight:600; line-height:1.6; } .co-row .mt span{ font-size:12.5px; color:var(--muted); } .co-row .rt{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; } .co-row .pr{ font-size:15px; font-weight:800; color:var(--pink); white-space:nowrap; } .field{ margin-bottom:13px; } .field label{ display:block; font-size:13px; font-weight:700; margin-bottom:6px; } .field label .req{ color:var(--pink); } .field input,.field select,.field textarea{ width:100%; border:1.5px solid var(--line); border-radius:12px; padding:11px 13px; font-size:14px; background:#fff; color:var(--ink); transition:border-color .2s, box-shadow .2s; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--pink); box-shadow:0 0 0 3px rgba(255,0,163,.12); } .field .err{ display:none; font-size:12.5px; color:#C8003F; margin-top:5px; font-weight:600; } .field.bad input,.field.bad select{ border-color:#E5567C; } .field.bad .err{ display:block; } .fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:0 13px; } .fgrid .full{ grid-column:1/-1; } .pick{ display:flex; align-items:center; gap:11px; border:1.5px solid var(--line); border-radius:14px; padding:13px; cursor:pointer; transition:.18s; } .pick + .pick{ margin-top:9px; } .pick:hover{ border-color:#FFB5E4; } .pick input{ width:18px; height:18px; accent-color:var(--pink); flex:none; } .pick .pt{ flex:1; min-width:0; } .pick .pt b{ display:block; font-size:14px; font-weight:700; } .pick .pt span{ font-size:12.5px; color:var(--muted); } .pick .cost{ font-size:13px; font-weight:700; color:var(--c4-i); white-space:nowrap; } .pick:has(input:checked){ border-color:var(--pink); background:#FFF8FC; } /* ---- checkout location + gift/urgent options ---- */ .co-subcard{ margin-top:14px; padding:14px; border:1px solid var(--line); border-radius:14px; background:#FCFCFE; } .co-subcard h3{ margin:0 0 4px; font-size:14px; font-weight:800; } .co-subcard > p{ margin:0 0 11px; font-size:12.5px; color:var(--muted); line-height:1.8; } .co-checks{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .co-check{ display:flex; align-items:center; gap:8px; min-height:46px; padding:9px 11px; border:1.5px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; font-size:13px; font-weight:700; } .co-check:hover{ border-color:#FFB5E4; } .co-check:has(input:checked){ border-color:var(--pink); background:#FFF5FB; color:var(--pink-dark); } .co-check input{ width:18px; height:18px; accent-color:var(--pink); flex:none; } .co-note{ margin-top:10px; padding:10px 12px; border-radius:12px; background:#F2F7FF; border:1px solid #D8E8FF; color:#34506F; font-size:12.5px; line-height:1.85; } .co-note.is-local{ background:#F1FBF5; border-color:#CBECD9; color:#17603B; } .co-urgent{ margin-top:10px; } .co-urgent .pick{ background:#FFF9F0; border-color:#F3D5A3; } .co-urgent .pick:has(input:checked){ background:#FFF4E4; border-color:#EA9A21; } .transport-methods{ display:grid; gap:9px; } .transport-sub{ margin-top:10px; padding:12px; border:1px dashed #D8DAE4; border-radius:14px; background:#FAFBFD; } .transport-sub > b{ display:block; font-size:13px; margin-bottom:9px; } .carrier-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .carrier-chip{ display:flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:8px 10px; border:1.5px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; font-size:13px; font-weight:700; transition:.18s; } .carrier-chip:hover{ border-color:#FFB5E4; } .carrier-chip input{ width:16px; height:16px; accent-color:var(--pink); } .carrier-chip:has(input:checked){ border-color:var(--pink); background:#FFF8FC; color:var(--pink-dark); } .transport-err{ display:block; margin-top:8px; font-size:12px; font-weight:700; color:#C8003F; } .transport-confirm{ margin-top:10px; padding:12px 13px; border:1.5px solid #F0D39A; border-radius:14px; background:#FFF9EE; } .transport-confirm-label{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; } .transport-confirm-label input{ width:19px; height:19px; margin-top:2px; accent-color:var(--pink); flex:none; } .transport-confirm-label span{ min-width:0; } .transport-confirm-label b{ display:block; font-size:13px; font-weight:800; color:#704500; margin-bottom:3px; } .transport-confirm-label small{ display:block; font-size:12px; line-height:1.8; color:#795D32; } .transport-confirm:has(input:checked){ border-color:#8ED3AC; background:#F2FBF6; } .transport-confirm:has(input:checked) b{ color:#17603B; } .co-done-badge{ display:inline-flex; align-items:center; justify-content:center; padding:7px 13px; border-radius:999px; background:#ECFAF2; color:#177245; font-size:12.5px; font-weight:800; margin-bottom:10px; } .co-order-number{ max-width:340px; margin:18px auto 0; padding:13px 16px; border:1.5px dashed #FFB5E4; border-radius:16px; background:#FFF8FC; display:flex; align-items:center; justify-content:space-between; gap:12px; } .co-order-number span{ font-size:12.5px; color:var(--muted); font-weight:700; } .co-order-number strong{ color:var(--pink-dark); font-size:20px; font-weight:900; direction:ltr; unicode-bidi:plaintext; } .co-account-note{ max-width:520px; margin:16px auto 0; padding:14px 16px; border-radius:16px; background:#F3F7FF; border:1px solid #DCE8FF; text-align:right; } .co-account-note b{ display:block; font-size:13.5px; font-weight:800; color:#254E83; margin-bottom:4px; } .co-account-note p{ margin:0; font-size:12.5px; line-height:1.9; color:#52677F; } .co-done-actions{ margin-top:18px; display:flex; flex-wrap:wrap; justify-content:center; gap:9px; } @media (max-width:560px){ .carrier-grid{ grid-template-columns:1fr; } .co-done-actions .btn{ width:100%; } } .co-location-help{ display:block; margin-top:5px; color:var(--muted); font-size:11.5px; line-height:1.7; } .co-location-help.ok{ color:#177245; } .co-location-help.warn{ color:#9A5B00; } @media (max-width:620px){ .co-checks{ grid-template-columns:1fr; } } /* ---- checkout packaging studio ---- */ .pack-intro{ margin:-4px 0 14px; color:var(--muted); font-size:12.5px; line-height:1.9; } .pack-section{ margin-top:12px; padding:15px; border:1px solid var(--line); border-radius:16px; background:#FCFCFE; } .pack-section + .pack-section{ margin-top:12px; } .pack-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; } .pack-head > div b{ display:block; font-size:14px; font-weight:800; } .pack-head > div span{ display:block; color:var(--muted); font-size:12px; margin-top:2px; } .paper-qty{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; white-space:nowrap; } .paper-qty input{ width:64px; border:1.5px solid var(--line); border-radius:10px; padding:7px; text-align:center; } .pack-none{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; margin-bottom:10px; cursor:pointer; } .pack-none input,.paper-card > input,.swatch input,.gender-grid input,.gift-toggle input,.gift-template > input{ accent-color:var(--pink); } .paper-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .paper-card{ position:relative; display:grid; grid-template-columns:118px minmax(0,1fr); gap:10px; align-items:center; padding:10px; border:1.5px solid var(--line); border-radius:14px; background:#fff; cursor:pointer; overflow:hidden; } .paper-card:hover{ border-color:#FFB5E4; } .paper-card:has(>input:checked){ border-color:var(--pink); box-shadow:0 0 0 3px rgba(255,0,163,.08); } .paper-card > input{ position:absolute; top:10px; inset-inline-end:10px; width:18px; height:18px; z-index:2; } .paper-art{ min-height:108px; border-radius:12px; display:grid; grid-template-columns:repeat(3,1fr); place-items:center; position:relative; overflow:hidden; font-size:19px; border:1px solid rgba(0,0,0,.05); background-size:cover; background-position:center; } .paper-card.girl .paper-art{ background:linear-gradient(135deg,#FFF0F8,#FFD3ED); color:#D02986; } .paper-card.boy .paper-art{ background:linear-gradient(135deg,#EEF7FF,#CFE8FF); color:#1269B2; } .paper-art strong{ grid-column:1/-1; font-size:12px; background:rgba(255,255,255,.84); padding:4px 8px; border-radius:99px; } .paper-meta{ min-width:0; align-self:start; padding-top:3px; } .paper-meta b{ display:block; font-size:13px; font-weight:800; } .paper-meta small{ display:block; color:var(--muted); font-size:11.5px; line-height:1.7; margin-top:3px; } .swatch-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; } .swatch{ display:flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:8px; border:1.5px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; font-size:12px; font-weight:700; } .swatch input{ position:absolute; opacity:0; pointer-events:none; } .swatch i{ width:18px; height:18px; border-radius:50%; background:var(--sw); border:1px solid rgba(20,20,30,.18); box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); } .swatch:has(input:checked){ border-color:var(--pink); background:#FFF5FB; color:var(--pink-dark); } .swatch.none{ color:var(--muted); } .gender-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; } .gender-grid label{ cursor:pointer; } .gender-grid input{ position:absolute; opacity:0; } .gender-grid span{ display:grid; place-items:center; min-height:48px; border:1.5px solid var(--line); border-radius:13px; background:#fff; font-size:14px; font-weight:800; } .gender-grid label:has(input:checked) span{ border-color:var(--pink); background:#FFF5FB; color:var(--pink-dark); } .pack-error{ color:#C8003F; font-size:12px; font-weight:700; margin-top:7px; } .gift-toggle{ display:flex; align-items:center; gap:10px; cursor:pointer; } .gift-toggle > input{ width:20px; height:20px; flex:none; } .gift-toggle b{ display:block; font-size:14px; } .gift-toggle small{ display:block; color:var(--muted); font-size:11.5px; margin-top:2px; } #coGiftCardFields{ margin-top:14px; } .gift-template-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; } .gift-template{ cursor:pointer; position:relative; } .gift-template > input{ position:absolute; top:7px; inset-inline-end:7px; z-index:3; } .gift-template > em{ display:block; text-align:center; font-style:normal; font-size:11px; font-weight:700; color:var(--muted); margin-top:5px; } .mini-card{ min-height:132px; border:1.5px solid var(--line); border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:10px 7px; background:linear-gradient(145deg,#EAF5FF,#C9E4FF); overflow:hidden; } .gift-template:has(input:checked) .mini-card{ border-color:var(--pink); box-shadow:0 0 0 3px rgba(255,0,163,.08); } .mini-card i{ font-style:normal; font-size:28px; } .mini-card b{ font-size:11px; margin-top:5px; } .mini-card small{ font-size:9px; color:#456; margin-top:4px; } .mini-card.dino{ background:linear-gradient(145deg,#EDFFF0,#CFF4D5); } .mini-card.star{ background:linear-gradient(145deg,#FFF2FA,#FFD5EC); } .mini-card.flower{ background:linear-gradient(145deg,#FFF3F6,#FFE0E7); } .gift-message-field{ margin-top:13px; } .gift-preview-wrap{ display:grid; grid-template-columns:minmax(220px,360px) auto; align-items:center; gap:13px; margin-top:12px; } .gift-preview{ aspect-ratio:1.65/1; border-radius:18px; padding:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow:0 12px 28px rgba(40,40,70,.10); border:1px solid rgba(0,0,0,.06); background:linear-gradient(145deg,#EAF5FF,#C9E4FF); position:relative; overflow:hidden; } .gift-preview[data-template="boy-dino"]{ background:linear-gradient(145deg,#EDFFF0,#CFF4D5); } .gift-preview[data-template="girl-star"]{ background:linear-gradient(145deg,#FFF2FA,#FFD5EC); } .gift-preview[data-template="girl-flower"]{ background:linear-gradient(145deg,#FFF3F6,#FFE0E7); } .gift-preview .gp-deco{ font-size:32px; } .gift-preview b{ font-size:16px; margin-top:4px; } .gift-preview p{ font-size:12.5px; line-height:1.9; margin:8px 0; max-width:92%; white-space:pre-wrap; } .gift-preview small{ font-size:10.5px; opacity:.72; } @media (max-width:760px){ .stepper{ max-width:100%; } .stepper .st span{ font-size:10.5px; } .paper-grid{ grid-template-columns:1fr; } .swatch-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .gift-template-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .gift-preview-wrap{ grid-template-columns:1fr; } } @media (max-width:430px){ .stepper .st span{ font-size:9.5px; } .stepper .dot{ width:32px; height:32px; } .stepper .st::before{ top:15px; } .paper-card{ grid-template-columns:92px minmax(0,1fr); } .paper-art{ min-height:92px; } } /* admin-managed wrapping paper catalog */ .paper-card{ grid-template-columns:118px minmax(0,1fr); } .paper-art{ background:var(--paper-bg,linear-gradient(135deg,#FFF0F8,#FFD3ED)); color:var(--paper-ink,#D02986); } .paper-art.has-image{ background-image:var(--paper-img); background-size:cover; background-position:center; } .paper-art.has-image i{ opacity:0; } .paper-art.has-image strong{ background:rgba(255,255,255,.9); backdrop-filter:blur(3px); } .paper-admin-note{ margin-top:9px; padding:9px 11px; border-radius:11px; background:#F7F8FC; border:1px dashed #DADDEA; color:var(--muted); font-size:11.5px; line-height:1.8; } .paper-admin-note b{ color:var(--ink); } /* fantasy laminated gift cards */ .mini-card,.gift-preview,.studio-card-mini{ --gift-bg:linear-gradient(145deg,#EAF5FF,#C9E4FF); --gift-accent:#2A8EFF; background:var(--gift-bg) !important; position:relative; isolation:isolate; } .mini-card::before,.gift-preview::before,.studio-card-mini::before{ content:""; position:absolute; inset:-25% -15% auto auto; width:74%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.78) 0 12%,rgba(255,255,255,.22) 13% 37%,transparent 38%); z-index:-1; } .mini-card::after,.gift-preview::after,.studio-card-mini::after{ content:"✦ · ★ · ✧"; position:absolute; inset-inline:9px; bottom:6px; color:var(--gift-accent); opacity:.38; font-size:10px; letter-spacing:4px; white-space:nowrap; overflow:hidden; } .mini-card i,.gift-preview .gp-deco,.studio-card-mini span{ filter:drop-shadow(0 4px 7px rgba(40,30,70,.16)); } .mini-card b,.gift-preview b,.studio-card-mini b{ color:#32263A; } .gift-preview{ border:2px solid color-mix(in srgb,var(--gift-accent) 22%,#fff); } .gift-preview .fantasy-kicker{ font-size:9.5px; font-weight:900; color:var(--gift-accent); letter-spacing:.08em; margin-bottom:2px; } .gift-template > em{ color:#5F6578; } .gift-template:has(input:checked) > em{ color:var(--pink-dark); } /* ---- live gift-building studio ---- */ .gift-studio{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:18px; align-items:start; } .gift-studio-controls{ min-width:0; } .gift-studio-live{ position:sticky; top:92px; padding:16px; border:1px solid #F0D9EA; border-radius:20px; background:linear-gradient(180deg,#FFFDFE,#FFF8FC); box-shadow:0 16px 36px rgba(98,29,74,.08); overflow:hidden; } .studio-live-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; } .studio-live-head > div b{ display:block; font-size:14px; font-weight:900; margin-top:2px; } .studio-kicker{ display:block; color:var(--pink-text); font-size:10.5px; font-weight:800; letter-spacing:.02em; } .studio-live-badge{ display:inline-grid; place-items:center; min-width:44px; height:24px; padding-inline:8px; border-radius:99px; background:#FEE8F6; color:#B00371; border:1px solid #FFC5E8; font-size:9px; font-weight:900; letter-spacing:.08em; } .gift-stage{ --studio-ribbon:#D7D9DF; --studio-shavings:#E8DCC2; position:relative; min-height:315px; display:grid; place-items:center; border-radius:18px; overflow:hidden; isolation:isolate; background:radial-gradient(circle at 50% 15%,#fff 0 12%,transparent 36%),linear-gradient(155deg,#FFF5FB 0%,#F4F0FF 50%,#EAF5FF 100%); border:1px solid #F0E6EF; } .gift-stage:before{ content:""; position:absolute; width:260px; height:76px; border-radius:50%; background:rgba(69,38,83,.11); filter:blur(11px); bottom:33px; left:50%; transform:translateX(-50%); z-index:-1; } .studio-spark{ position:absolute; color:#FF73C6; opacity:.55; font-size:17px; animation:studioTwinkle 2.8s ease-in-out infinite; } .studio-spark.s1{ top:34px; inset-inline-start:34px; }.studio-spark.s2{ top:70px; inset-inline-end:30px; animation-delay:.7s; color:#7A7AF4; }.studio-spark.s3{ top:132px; inset-inline-start:22px; animation-delay:1.3s; color:#F1A120; } @keyframes studioTwinkle{ 50%{ transform:translateY(-5px) scale(1.18); opacity:.95 } } .studio-box-wrap{ position:relative; width:238px; height:205px; transform:perspective(700px) rotateX(2deg) rotateY(-3deg); filter:drop-shadow(0 16px 13px rgba(69,38,83,.14)); z-index:2; } .studio-box-body,.studio-box-lid{ position:absolute; inset-inline:18px; border:1px solid rgba(30,30,50,.08); background-color:#D6B079; background-image:linear-gradient(135deg,rgba(255,255,255,.11),rgba(0,0,0,.035)); background-size:cover; background-position:center; transition:background .24s ease, filter .24s ease; } .studio-box-body{ bottom:14px; height:137px; border-radius:12px 12px 18px 18px; } .studio-box-lid{ top:29px; inset-inline:7px; height:45px; border-radius:11px; z-index:4; box-shadow:0 7px 10px rgba(50,30,45,.10); } .gift-stage[data-paper="girl"] .studio-paper-skin{ background-color:#FFD3EB; background-image:radial-gradient(circle at 18px 18px,#FF78BC 0 3px,transparent 4px),radial-gradient(circle at 42px 38px,#fff 0 5px,transparent 6px),linear-gradient(135deg,#FFF1F8,#FFCFE9); background-size:58px 58px,72px 72px,auto; } .gift-stage[data-paper="boy"] .studio-paper-skin{ background-color:#CFE7FF; background-image:radial-gradient(circle at 18px 18px,#2A8EFF 0 3px,transparent 4px),linear-gradient(45deg,transparent 46%,rgba(255,255,255,.85) 47% 53%,transparent 54%),linear-gradient(135deg,#EEF7FF,#C9E4FF); background-size:58px 58px,42px 42px,auto; } .studio-ribbon{ position:absolute; z-index:7; background:var(--studio-ribbon); box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 2px 5px rgba(0,0,0,.08); transition:background .2s ease, opacity .2s ease; } .studio-ribbon-v{ width:22px; top:28px; bottom:14px; left:50%; transform:translateX(-50%); } .studio-ribbon-h{ height:21px; top:87px; inset-inline:18px; } .studio-bow{ position:absolute; z-index:9; width:74px; height:48px; left:50%; top:14px; transform:translateX(-50%); color:var(--studio-ribbon); transition:color .2s ease, opacity .2s ease; } .studio-bow i{ position:absolute; top:9px; width:39px; height:30px; border:10px solid currentColor; background:rgba(255,255,255,.12); } .studio-bow i:first-child{ right:34px; border-radius:60% 45% 55% 45%; transform:rotate(15deg); }.studio-bow i:nth-child(2){ left:34px; border-radius:45% 60% 45% 55%; transform:rotate(-15deg); } .studio-bow b{ position:absolute; width:25px; height:25px; border-radius:50%; background:currentColor; left:50%; top:13px; transform:translateX(-50%); box-shadow:0 2px 5px rgba(0,0,0,.12); } .gift-stage.no-ribbon .studio-ribbon,.gift-stage.no-ribbon .studio-bow{ opacity:0; } .studio-gender-tag{ position:absolute; z-index:10; bottom:28px; inset-inline-end:28px; max-width:118px; padding:5px 8px; border-radius:9px; background:rgba(255,255,255,.88); color:#513A4A; font-size:10px; font-weight:800; box-shadow:0 4px 10px rgba(40,20,35,.12); transform:rotate(-3deg); } .studio-shavings{ position:absolute; width:285px; height:110px; left:50%; bottom:23px; transform:translateX(-50%); z-index:1; pointer-events:none; transition:opacity .2s ease; } .studio-shavings i{ position:absolute; width:52px; height:18px; border-top:5px solid var(--studio-shavings); border-radius:50%; filter:drop-shadow(0 1px 0 rgba(0,0,0,.06)); } .studio-shavings i:nth-child(1){left:3px;top:43px;transform:rotate(-22deg)}.studio-shavings i:nth-child(2){left:25px;top:69px;transform:rotate(20deg)}.studio-shavings i:nth-child(3){left:48px;top:28px;transform:rotate(42deg)}.studio-shavings i:nth-child(4){left:76px;top:76px;transform:rotate(-26deg)}.studio-shavings i:nth-child(5){left:105px;top:52px;transform:rotate(12deg)}.studio-shavings i:nth-child(6){left:127px;top:84px;transform:rotate(-10deg)}.studio-shavings i:nth-child(7){left:154px;top:45px;transform:rotate(28deg)}.studio-shavings i:nth-child(8){left:183px;top:76px;transform:rotate(-20deg)}.studio-shavings i:nth-child(9){left:211px;top:35px;transform:rotate(36deg)}.studio-shavings i:nth-child(10){left:233px;top:65px;transform:rotate(-9deg)}.studio-shavings i:nth-child(11){left:72px;top:48px;transform:rotate(-47deg)}.studio-shavings i:nth-child(12){left:190px;top:51px;transform:rotate(54deg)} .gift-stage.no-shavings .studio-shavings{ opacity:0; } .studio-card-mini{ position:absolute; z-index:12; inset-inline-start:16px; bottom:16px; width:116px; min-height:72px; padding:8px; border-radius:11px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; transform:rotate(5deg); border:1px solid rgba(0,0,0,.08); box-shadow:0 8px 18px rgba(40,20,35,.16); background:linear-gradient(145deg,#EAF5FF,#C9E4FF); } .studio-card-mini[hidden]{ display:none; }.studio-card-mini[data-template="boy-dino"]{ background:linear-gradient(145deg,#EDFFF0,#CFF4D5); }.studio-card-mini[data-template="girl-star"]{ background:linear-gradient(145deg,#FFF2FA,#FFD5EC); }.studio-card-mini[data-template="girl-flower"]{ background:linear-gradient(145deg,#FFF3F6,#FFE0E7); } .studio-card-mini span{ font-size:19px; line-height:1; }.studio-card-mini b{ font-size:9.5px; margin-top:3px; }.studio-card-mini small{ display:block; max-width:95px; font-size:7.8px; line-height:1.45; margin-top:3px; color:#655; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .studio-choice-list{ margin-top:12px; display:grid; gap:2px; } .studio-choice-list > div{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 2px; border-bottom:1px dashed #EDE4EB; font-size:11.5px; }.studio-choice-list > div:last-child{ border-bottom:0; } .studio-choice-list span{ color:var(--muted); }.studio-choice-list b{ font-size:11px; text-align:end; } .studio-total{ margin-top:9px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; border-radius:13px; background:#FFF0F9; border:1px solid #FFD0EC; font-size:12px; font-weight:800; }.studio-total b{ color:var(--pink-dark); font-size:15px; } .studio-hint{ margin-top:9px; color:var(--muted); font-size:10.5px; line-height:1.75; text-align:center; } @media (max-width:1080px){ .gift-studio{ grid-template-columns:1fr; }.gift-studio-live{ position:relative; top:auto; order:-1; }.gift-stage{ min-height:290px; } } @media (max-width:520px){ .gift-studio-live{ padding:12px; }.gift-stage{ min-height:265px; }.studio-box-wrap{ transform:scale(.9); }.studio-choice-list{ grid-template-columns:1fr 1fr; gap:4px 10px; }.studio-choice-list > div{ display:block; }.studio-choice-list b{ display:block; margin-top:2px; text-align:start; } } @media (prefers-reduced-motion:reduce){ .studio-spark{ animation:none; } } .summary{ position:sticky; top:96px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:16px; box-shadow:var(--e2); } .summary h2{ font-size:15px; font-weight:800; margin-bottom:12px; } .sline{ display:flex; justify-content:space-between; align-items:baseline; font-size:13px; padding:6px 0; } .sline span{ color:var(--muted); } .sline b{ font-weight:700; } .sline.free b{ color:var(--c4-i); } .stotal{ display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--line); margin-top:9px; padding-top:12px; font-size:14px; } .stotal b{ font-size:19px; font-weight:800; color:var(--pink); } .co-nav{ display:flex; gap:10px; margin-top:16px; } .co-nav .btn{ flex:1; padding:13px; border-radius:13px; font-size:15px; } .co-back{ border:1.5px solid var(--line); background:#fff; color:#4A4F60; flex:0 0 auto !important; padding-inline:20px !important; } .co-back:hover{ background:#F5F6FA; } .co-done{ text-align:center; padding:40px 20px; } .co-done .tick{ width:78px; height:78px; margin:0 auto 18px; } .co-done .tick svg{ width:100%; height:100%; overflow:visible; } .co-done .ring2{ fill:none; stroke:var(--c4-s); stroke-width:3.4; stroke-linecap:round; stroke-dasharray:214; stroke-dashoffset:214; animation:apopRing .7s cubic-bezier(.2,.8,.2,1) forwards; } .co-done .tick2{ fill:none; stroke:var(--c4-s); stroke-width:4.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:42; stroke-dashoffset:42; animation:apopTick .4s cubic-bezier(.2,.8,.2,1) .5s forwards; } .co-done h2{ font-size:19px; font-weight:800; margin-bottom:8px; } .co-done p{ font-size:14px; color:var(--muted); line-height:2; } .co-done .oid{ display:inline-block; margin-top:14px; background:#F5F6FA; border:1px solid var(--line); border-radius:12px; padding:9px 16px; font-size:14px; font-weight:700; } /* ══════════════════ responsive ══════════════════ */ @media (max-width:1080px){ .pdp{ grid-template-columns:minmax(0,1fr); } .buybox{ position:static; } .pdp-main{ grid-template-columns:290px minmax(0,1fr); } } @media (max-width:900px){ .cat-wrap{ grid-template-columns:minmax(0,1fr); } .filters{ position:fixed; inset:0 0 0 auto; width:min(320px,88vw); z-index:901; border-radius:0; overflow-y:auto; transform:translateX(-105%); transition:transform .34s cubic-bezier(.22,.7,.25,1); } html[dir="rtl"] .filters{ transform:translateX(105%); } .filters.on,html[dir="rtl"] .filters.on{ transform:none; } .fbtn{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:99px; border:1px solid var(--line); font-size:13px; font-weight:700; background:#fff; } .fbtn svg{ width:15px; height:15px; } .pgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } .pdp-main{ grid-template-columns:minmax(0,1fr); } .gal{ position:static; max-width:400px; margin-inline:auto; } .co-grid{ grid-template-columns:minmax(0,1fr); } .summary{ position:static; } } @media (max-width:640px){ .pgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .fgrid{ grid-template-columns:1fr; } .co-row{ grid-template-columns:58px minmax(0,1fr); } .co-row .im{ width:58px; height:58px; } .co-row .rt{ grid-column:2; flex-direction:row; align-items:center; justify-content:space-between; } .stepper .st span{ font-size:12px; } .spec-list div{ grid-template-columns:104px minmax(0,1fr); } } @media (prefers-reduced-motion: reduce){ .co-step.is-on{ animation:none; } .co-done .ring2,.co-done .tick2{ animation:none; stroke-dashoffset:0; } .filters{ transition:none; } .gal-big:hover svg{ transform:none; } } /* ===== dani-mascot ===== */ /* ══════════ دانی — شخصیت بازی‌دان ══════════ */ .dani-wrap{ text-align:center; padding:8px 12px; } .dani-box{ width:124px; margin:0 auto 12px; } .dani{ width:100%; height:auto; display:block; overflow:visible; filter:drop-shadow(0 10px 14px rgba(150,10,100,.16)); } .dani-bob{ transform-box:fill-box; transform-origin:center; animation:daniBob 2.6s ease-in-out infinite; } @keyframes daniBob{ 0%,100%{ translate:0 0 } 50%{ translate:0 -3px } } .dani-wrap .dani{ animation:daniIdle 4.2s ease-in-out infinite; } @keyframes daniIdle{ 0%,100%{ rotate:-1.6deg; translate:0 0 } 50%{ rotate:1.6deg; translate:0 -4px } } .dani-t{ display:block; font-size:15px; font-weight:800; color:var(--ink); margin-bottom:6px; } .dani-p{ font-size:13px; color:var(--muted); line-height:1.9; max-width:34ch; margin-inline:auto; } .dani-wrap .btn{ margin-top:14px; } .dani-sm .dani-box{ width:92px; } @media (prefers-reduced-motion: reduce){ .dani-bob,.dani-wrap .dani{ animation:none !important; } } /* ===== delight-pack ===== */ /* توست افزودن به سبد — جا برای متن و دکمه‌ی برگرداندن */ .toast{ max-width:400px !important; gap:11px; align-items:center; padding:11px 13px 11px 11px; } .toast .tx{ flex:1; min-width:0; font-size:13px; line-height:1.75; } .toast .tk{ align-self:flex-start; margin-top:1px; } @media (max-width:700px){ .toast{ max-width:none !important; } } /* ══════════ راهنمای هدیه ══════════ */ /* Gift finder: scoped motion and responsive dialog */ .gift-cta{position:relative;isolation:isolate;display:flex;align-items:center;gap:26px;flex-wrap:wrap;overflow:hidden;padding:28px 36px;margin-block:26px;border:1px solid #f3cbe9;border-radius:28px;background:radial-gradient(ellipse at 12% 100%,#dceaff 0,transparent 55%),linear-gradient(115deg,#f3edff,#fff2fa 65%,#ffe4f3);box-shadow:0 12px 32px #8c32600a} .gift-cta:before,.gift-cta:after{content:"";position:absolute;z-index:-1;width:230px;height:230px;border:1px solid #ffffffb0;border-radius:50%;left:-65px;top:-110px;pointer-events:none} .gift-cta:after{width:300px;height:300px;left:-100px;top:-145px} .gift-cta .gc-art{position:relative;flex:none;width:112px;display:grid;place-items:center} .gift-cta .gc-art:before{content:"";position:absolute;inset:12px -2px 0;border-radius:50%;background:#ffffff91;box-shadow:0 0 0 10px #ffffff35} .gift-cta .gc-art>.dani{position:relative;width:108px;filter:drop-shadow(0 12px 7px #b724731e);animation:gfFloat 4.4s ease-in-out infinite} .gift-cta .gc-t{flex:1;min-width:190px} .gift-cta .gc-t b{display:block;font-family:var(--font-display);font-size:clamp(25px,3vw,32px);font-weight:400;line-height:1.6;color:#761854} .gift-cta .gc-t>span{display:block;font-size:14px;line-height:1.9;color:#765b77} .gc-kicker{display:inline-flex;align-items:center;gap:6px;margin-bottom:5px;font-size:11px;font-weight:800;color:#965082;letter-spacing:0} .gc-kicker:before{content:"✦";color:#c6338d;font-size:15px} .gc-action{display:flex;flex-direction:column;align-items:center;gap:10px} #giftOpen{gap:22px;padding:14px 24px;border-radius:16px;background:linear-gradient(110deg,#a92091,#d30989);box-shadow:0 8px 20px #ba1b8530;transition:transform .25s,box-shadow .25s} #giftOpen:hover{transform:translateY(-3px);box-shadow:0 12px 26px #ba1b8545} #giftOpen svg{width:20px;height:20px;transition:transform .25s} #giftOpen:hover svg{transform:translateX(-4px)} .gc-action small{font-size:11px;color:#765b77} .gf-spark{position:absolute;font-style:normal;color:#b879e1;animation:gfSpark 3.5s ease-in-out infinite;pointer-events:none} .gf-spark.s1{right:0;top:10px;font-size:24px;color:#d19821} .gf-spark.s2{left:0;top:40%;font-size:17px;animation-delay:-1.2s} .gf-spark.s3{right:12px;bottom:0;font-size:13px;animation-delay:-2s} .gf-scrim{position:fixed;inset:0;z-index:975;background:#29173585;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);opacity:0;transition:opacity .3s ease} .gf-scrim.on{opacity:1} .gf{position:fixed;z-index:976;top:50%;left:50%;translate:-50% -50%;width:min(620px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain;background:#fffdfd;border:1px solid #fff;border-radius:30px;padding:0;box-shadow:0 32px 100px #250a3b45;transform:translateY(28px) scale(.94);opacity:0;transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .3s ease;scrollbar-width:thin;scrollbar-color:#e4c9dd transparent} .gf.on{transform:translateY(0) scale(1);opacity:1} .gf-x{position:absolute;z-index:3;top:16px;inset-inline-end:16px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#ffffffc9;border:1px solid #eaddeb;color:#755c79;transition:background .2s,transform .2s} .gf-x:hover{background:#fff;transform:rotate(90deg)} .gf-x svg{width:16px;height:16px} .gf-head{position:relative;overflow:hidden;text-align:center;padding:22px 52px 20px;background:radial-gradient(ellipse at 20% 0,#e9e3ff,transparent 60%),linear-gradient(120deg,#fff4fb,#ffedf7);border-bottom:1px solid #f4e5f0} .gf-head .dani-box{position:relative;width:90px;margin:0 auto 6px;isolation:isolate} .gf-head .dani-box:before{content:"";position:absolute;inset:9px -10px 0;z-index:-1;border:1px solid #ffffff;border-radius:50%;background:#ffffff80;box-shadow:0 0 0 10px #ffffff38} .gf-head .dani-box>.dani{width:86px;animation:gfFloat 4s ease-in-out infinite;filter:drop-shadow(0 8px 6px #aa3a7a1a)} .gf-head h2{font-family:var(--font-display);font-size:29px;line-height:1.5;font-weight:400;color:#65164c;margin:0} .gf-head p{font-size:12px;line-height:1.8;color:#7e5c78;margin-top:4px} .gf-eyebrow{position:absolute;right:22px;top:20px;font-size:10px;font-weight:800;color:#916482} .gf-steps{display:flex;list-style:none;gap:12px;margin:22px 30px 0;padding:0} .gf-steps li{position:relative;display:flex;align-items:center;gap:8px;flex:1;font-size:12px;color:#84798e;font-weight:700} .gf-steps li:not(:last-child):after{content:"";height:1px;background:#e8deed;flex:1;margin-inline-start:3px} .gf-steps i{display:grid;place-items:center;width:28px;height:28px;flex:none;border:1px solid #e8deed;border-radius:50%;font-size:12px;font-style:normal;transition:background .3s,color .3s,box-shadow .3s} .gf-steps .active{color:#a91877} .gf-steps .active i{background:#b81581;color:white;border-color:#b81581;box-shadow:0 0 0 4px #fbeaf5} .gf-steps .done i{background:#f6e7f2;border-color:#ebcfe3;color:#a91877} .gf-bar{display:flex;gap:6px;margin:16px 30px 0} .gf-bar i{position:relative;flex:1;height:4px;overflow:hidden;border-radius:99px;background:#eee8f0} .gf-bar i:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#9873db,#d22893);transform:scaleX(0);transform-origin:right;transition:transform .4s ease} .gf-bar i.on:after{transform:scaleX(1)} #gfBody{padding:22px 30px 8px} .gf-q{font-size:19px;font-weight:800;color:#35223e;margin:0 0 5px;outline:none} .gf-hint{font-size:12px;color:#81758a;margin:0 0 18px;line-height:1.8} .gf-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .gf-opts button{position:relative;display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;align-items:center;gap:4px 12px;text-align:right;padding:20px 16px;border:1.5px solid #ece3ee;border-radius:18px;background:#fff;color:#47344f;min-width:0;transition:border-color .2s,background .2s,box-shadow .2s,transform .2s} .gf-option-icon{grid-row:1/3;display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#f3edff;color:#8260b5;transition:transform .25s,background .25s} .gf-opts button:nth-child(2) .gf-option-icon{background:#fff0e4;color:#b27336} .gf-opts button:nth-child(3) .gf-option-icon{background:#e8f6f4;color:#388e82} .gf-opts button:nth-child(4) .gf-option-icon{background:#ffebf4;color:#b55384} .gf-option-icon svg{width:28px;height:28px} .gf-opts button>span:not(.gf-option-icon){font-size:14px;font-weight:800} .gf-opts button small{font-size:11px;font-weight:400;color:#81758a;line-height:1.6} .gf-opts button:after{content:"✓";position:absolute;top:7px;left:8px;display:grid;place-items:center;background:#b81581;color:#fff;border-radius:50%;width:17px;height:17px;font-size:10px;opacity:0;transform:scale(.4);transition:opacity .2s,transform .25s} .gf-opts button:hover{border-color:#dba7d0;transform:translateY(-3px);box-shadow:0 8px 18px #734b8310} .gf-opts button[aria-pressed="true"]{border-color:#bc258c;background:#fff6fc;box-shadow:0 0 0 3px #bc258c0c;color:#97136e} .gf-opts button[aria-pressed="true"]:after{opacity:1;transform:scale(1)} .gf-opts button[aria-pressed="true"] .gf-option-icon{transform:rotate(-6deg) scale(1.06)} .gf button:focus-visible,#giftOpen:focus-visible{outline:3px solid #8c5abd;outline-offset:3px} .gf-nav{position:sticky;bottom:0;z-index:4;display:flex;gap:12px;margin:14px 0 0;padding:16px 30px 22px;background:#fffdfdf5;border-top:1px solid #f0e9f1;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} .gf-nav .btn{flex:1;min-height:49px;padding:12px 16px;border-radius:14px;font-size:13px} .gf-nav .btn-primary{background:linear-gradient(105deg,#9d228e,#cc168d);box-shadow:0 6px 16px #b3208720;color:white} .gf-nav .btn-primary:disabled{background:#eee8f0;color:#9d8ea2;box-shadow:none;cursor:not-allowed;opacity:1;transform:none} .gf-nav .ghost{flex:0 0 auto;padding-inline:20px;border:1px solid #e7dcea;background:#fff;color:#736078;box-shadow:none} .gf-summary{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px} .gf-summary span{font-size:10px;padding:5px 10px;border-radius:30px;background:#f5ecf6;color:#7b4b78} .gf-res{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px} .gf-res .prod{width:100%;min-width:0} .gf-none{text-align:center;padding:16px 4px} .gf-reveal .gf-opts button,.gf-reveal .gf-res .prod{animation:gfCardIn .4s both cubic-bezier(.2,.8,.2,1)} .gf-reveal .gf-opts button:nth-child(2),.gf-reveal .gf-res .prod:nth-child(2){animation-delay:45ms} .gf-reveal .gf-opts button:nth-child(3),.gf-reveal .gf-res .prod:nth-child(3){animation-delay:90ms} .gf-reveal .gf-opts button:nth-child(4),.gf-reveal .gf-res .prod:nth-child(4){animation-delay:135ms} @keyframes gfFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}} @keyframes gfSpark{0%,100%{transform:scale(.8) rotate(-10deg);opacity:.45}50%{transform:scale(1.15) rotate(15deg);opacity:1}} @keyframes gfCardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} @media(max-width:600px){ .gift-cta{padding:22px 20px;gap:12px 18px;border-radius:24px}.gift-cta .gc-art{width:78px}.gift-cta .gc-art>.dani{width:78px}.gift-cta .gc-t{min-width:160px}.gift-cta .gc-t b{font-size:25px}.gift-cta .gc-t>span{font-size:12px}.gc-kicker{font-size:10px}.gc-action{width:100%;flex-direction:row;justify-content:space-between;margin-top:8px}#giftOpen{padding:12px 22px}.gc-action small{font-size:10px} .gf{width:calc(100vw - 16px);max-height:calc(100dvh - 20px);border-radius:25px}.gf-head{padding:18px 42px 16px}.gf-head .dani-box{width:74px}.gf-head .dani-box>.dani{width:70px}.gf-head h2{font-size:26px}.gf-eyebrow{right:17px;top:18px;font-size:9px}.gf-steps{margin:18px 20px 0;gap:8px}.gf-steps li{gap:6px;font-size:11px}.gf-bar{margin-inline:20px}#gfBody{padding:20px 18px 6px}.gf-q{font-size:17px}.gf-opts{gap:10px}.gf-opts button{grid-template-columns:1fr;text-align:center;justify-items:center;padding:16px 8px;gap:6px}.gf-option-icon{grid-row:auto;width:42px;height:42px;border-radius:13px}.gf-opts button>span:not(.gf-option-icon){font-size:13px}.gf-opts button small{font-size:10px}.gf-nav{padding:14px 18px 18px;gap:8px}.gf-nav .btn{font-size:12px}.gf-nav .ghost{padding-inline:14px} } @media(max-height:700px){.gf-head{padding-top:16px;padding-bottom:12px}.gf-head .dani-box{width:55px}.gf-head .dani-box>.dani{width:52px}.gf-head h2{font-size:24px}.gf-steps{margin-top:16px}#gfBody{padding-top:16px}.gf-opts button{padding-block:12px}} @media(prefers-reduced-motion:reduce){.gift-cta *,.gf *,.gf,.gf-scrim{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* ══════════ پیش‌نمایش سریع روی کارت ══════════ */ .prod-img{ touch-action:pan-y; } .pv-track{ position:absolute; inset:0; display:flex; z-index:1; transition:transform .38s cubic-bezier(.2,.8,.2,1); } .pv-slide{ flex:0 0 100%; display:grid; place-items:center; position:relative; } .pv-slide svg{ width:86%; height:86%; } .pv-slide.s2 svg{ transform:rotate(-14deg) scale(.86); } .pv-dots{ position:absolute; bottom:7px; left:50%; translate:-50% 0; z-index:3; display:flex; gap:5px; direction:ltr; } .pv-dots i{ width:6px; height:6px; border-radius:99px; background:rgba(40,20,70,.22); transition:.22s; } .pv-dots i.on{ width:16px; background:var(--pink); } .pv-nav{ position:absolute; top:50%; translate:0 -50%; z-index:4; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--pink-dark); display:grid; place-items:center; box-shadow:0 2px 8px rgba(30,20,60,.18); opacity:0; transition:opacity .2s; } .pv-nav svg{ width:13px; height:13px; } .pv-nav.p{ inset-inline-start:6px; } .pv-nav.n{ inset-inline-end:6px; } .prod:hover .pv-nav,.pv-nav:focus-visible{ opacity:1; } .pv-info{ position:absolute; inset-inline:0; bottom:0; z-index:3; background:linear-gradient(0deg,rgba(255,255,255,.97) 62%,rgba(255,255,255,0)); padding:16px 9px 8px; display:flex; flex-direction:column; gap:3px; transform:translateY(101%); transition:transform .3s cubic-bezier(.2,.8,.2,1); } .prod:hover .pv-info,.prod:focus-within .pv-info{ transform:none; } .pv-info span{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:#4A4F60; } .pv-info span svg{ width:12px; height:12px; color:var(--pink); flex:none; } @media (hover:none){ .pv-nav{ display:none; } .pv-info{ position:static; transform:none; background:none; padding:7px 0 0; } } /* ══════════ پرواز به سبد + برگرداندن ══════════ */ .fly{ position:fixed; z-index:965; pointer-events:none; border-radius:14px; overflow:hidden; display:grid; place-items:center; will-change:transform,opacity; } .fly svg{ width:82%; height:82%; } .toast .undo{ margin-inline-start:auto; padding:5px 12px; border-radius:99px; border:1px solid #FFC4EA; background:#fff; color:var(--pink); font-size:12.5px; font-weight:800; pointer-events:auto; transition:.18s; flex:none; } .toast .undo:hover{ background:#FFF0F9; } .toast-wrap{ pointer-events:none; } .toast{ pointer-events:auto; } /* ══════════ کنترل حرکت ══════════ */ .motion-btn{ position:absolute; z-index:6; inset-inline-end:calc(clamp(16px,3vw,44px)); top:14px; display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:99px; background:rgba(255,255,255,.92); color:#B0186E; font-size:12.5px; font-weight:700; box-shadow:0 4px 12px rgba(120,0,84,.2); transition:.18s; } .motion-btn:hover{ background:#fff; } .motion-btn svg{ width:13px; height:13px; } @media (max-width:700px){ .motion-btn{ top:10px; padding:6px 11px; font-size:12.5px; } } /* entrance moves less so reading text never jumps */ .rv{ transform:translateY(10px) !important; transition-duration:.34s !important; } .rv.in{ transform:none !important; } .why-band .why{ transition:opacity .34s ease, transform .44s cubic-bezier(.2,.8,.2,1), background .3s ease !important; } .why-band.why-motion-ready .why:not(.in):not(.out-top){ transform:rotateX(-9deg) translateY(14px) translateZ(-30px) scale(.97); } .why-band.why-motion-ready .why.out-top{ transform:rotateX(9deg) translateY(-14px) translateZ(-30px) scale(.97); } #new .news-row.enter > .prod{ animation-duration:.5s !important; } /* ══════════ نوار اطمینان صفحه محصول ══════════ */ .trust{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-block:22px 4px; } .trust a,.trust div{ display:flex; align-items:center; gap:10px; padding:12px 13px; background:#FAFBFD; border:1px solid var(--line); border-radius:16px; transition:.2s; } .trust a:hover{ border-color:#FFC4EA; background:#FFF8FC; } .trust .ti{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center; flex:none; } .trust .ti svg{ width:19px; height:19px; } .trust b{ display:block; font-size:13px; font-weight:800; color:var(--ink); line-height:1.5; } .trust span{ font-size:12px; color:var(--muted); line-height:1.6; } @media (max-width:1080px){ .trust{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:480px){ .trust{ grid-template-columns:1fr; } } /* ══════════ صفحه شرایط مرجوعی ══════════ */ .legal{ max-width:860px; margin-inline:auto; margin-block:6px 52px; } .legal-lead{ background:linear-gradient(120deg,#FFF1F9,#F3F7FE); border:1px solid var(--line); border-radius:var(--r-md); padding:18px 20px; font-size:15px; line-height:2.1; color:#4A4F60; } .legal h2{ font-size:17px; font-weight:800; margin-block:28px 12px; padding-bottom:9px; border-bottom:2px solid #FFC9EB; } .legal h3{ font-size:15px; font-weight:700; margin-block:18px 8px; color:#2E3140; } .legal p{ font-size:14px; line-height:2.1; color:#4A4F60; } .legal ul,.legal ol{ margin-block:10px; padding-inline-start:0; display:grid; gap:9px; } .legal li{ position:relative; padding-inline-start:26px; font-size:14px; line-height:2.05; color:#4A4F60; } .legal ul > li::before{ content:""; position:absolute; inset-inline-start:8px; top:13px; width:7px; height:7px; border-radius:50%; background:var(--pink); } .legal ol{ counter-reset:n; } .legal ol > li{ counter-increment:n; } .legal ol > li::before{ content:counter(n,persian); position:absolute; inset-inline-start:0; top:4px; width:20px; height:20px; border-radius:50%; background:#FFE1F4; color:#B0186E; font-size:12.5px; font-weight:800; display:grid; place-items:center; } .legal li ul{ margin-top:8px; } .legal .note{ background:#FFF8FC; border:1px solid #FFD9F1; border-radius:14px; padding:13px 16px; font-size:13px; line-height:2; color:#8C1063; margin-top:14px; } .legal .end{ text-align:center; padding:26px 16px; margin-top:30px; background:linear-gradient(120deg,#FFE1F4,#EEE8FF); border-radius:var(--r-md); } /* ===== faq-soft-ui ===== */ .faq{ max-width: 900px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; } .faq-item{ background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: 0 1px 3px rgba(23,25,40,.05), 0 10px 24px rgba(23,25,40,.05); transition: transform .22s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease; will-change: transform, box-shadow; } .faq-item:hover{ transform: translateY(-2px); border-color: #FFD2EC; box-shadow: 0 8px 22px rgba(255,0,163,.08); } .faq-item[open], .faq-item.is-animating{ border-color: #FFB5E4; background: linear-gradient(180deg, #fff 0%, #FFF8FC 100%); box-shadow: 0 12px 28px rgba(255,0,163,.10); } .faq-item summary{ display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 18px; cursor: pointer; font-size:15px; font-weight: 800; list-style: none; transition: color .22s ease, background .22s ease; } .faq-item summary span{ flex: 1; min-width: 0; padding-inline-end: 8px; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary:hover{ color: var(--pink); } .faq-item[open] summary, .faq-item.is-animating summary{ color: var(--pink-dark); } .faq-item summary svg{ width: 19px; height: 19px; color: var(--pink); flex: none; transition: transform .34s cubic-bezier(.22,1,.36,1), opacity .2s ease; transform-origin: center; } .faq-item[open] summary svg, .faq-item.is-animating summary svg{ transform: rotate(180deg); } .faq-a{ height: 0; opacity: 0; overflow: hidden; padding: 0 18px; transition: height .36s cubic-bezier(.22,1,.36,1), opacity .24s ease; will-change: height, opacity; } .faq-a p{ margin: 0; padding: 0 0 16px; font-size:14px; color: #5B4351; line-height: 1.9; transform: translateY(-8px); transition: transform .34s cubic-bezier(.22,1,.36,1); } .faq-item[open] .faq-a p, .faq-item.is-animating .faq-a p{ transform: translateY(0); } @media (prefers-reduced-motion: reduce){ .faq-item, .faq-item summary, .faq-item summary svg, .faq-a, .faq-a p{ transition: none !important; } } /* ===== compare-header-style ===== */ .compare-head{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:42px; padding:0 14px; border-radius:14px; background:#FFF3FA; color:var(--pink-dark); font-size:13px; font-weight:800; white-space:nowrap; transition:.2s ease; } .compare-head svg{ width:18px; height:18px; } .compare-head:hover{ background:#FFE1F3; transform:translateY(-1px); } @media(max-width:700px){ .compare-head span{display:none} .compare-head{ width:42px; padding:0; } } /* ===== compare-ai-page-style ===== */ .compare-page{ padding-block:28px 60px; } .compare-shell{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); gap:18px; align-items:start; } .compare-hero{ position:relative; overflow:hidden; border-radius:28px; padding:22px 22px 18px; background:linear-gradient(135deg,#fff0fa 0%,#f8f4ff 45%,#eef7ff 100%); border:1px solid #F0DDEA; box-shadow:var(--e2); } .compare-hero::before{ content:''; position:absolute; inset:-25% auto auto -8%; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle at center, rgba(255,0,163,.16), rgba(255,0,163,0)); filter:blur(2px); animation:aiGlow 7s ease-in-out infinite; } .compare-hero::after{ content:''; position:absolute; inset:auto -7% -22% auto; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle at center, rgba(42,142,255,.14), rgba(42,142,255,0)); animation:aiGlow 7s ease-in-out infinite reverse; } .compare-hero > *{ position:relative; z-index:1; } .compare-hero-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; } .compare-hero h1{ font-size:26px; line-height:1.5; font-family:var(--font-display); color:#3A1730; } .compare-hero p{ margin-top:7px; max-width:64ch; color:#5F5163; line-height:1.95; } .compare-badge{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background:#fff; border:1px solid #F5D8EA; box-shadow:0 8px 20px rgba(50,30,70,.06); font-size:12.5px; font-weight:800; color:var(--pink-dark); } .compare-badge .brain-dot{ width:10px; height:10px; border-radius:50%; background:linear-gradient(90deg,#FF00A3,#7C5CFF); box-shadow:0 0 0 0 rgba(255,0,163,.22); animation:aiPing 1.6s ease-out infinite; } .compare-count{ display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; } .compare-pill{ display:inline-flex; align-items:center; gap:7px; padding:9px 12px; border-radius:999px; background:#fff; border:1px solid #F0DDEA; font-size:12.5px; font-weight:700; color:#4A4457; } .compare-pill b{ color:var(--pink-dark); } .compare-layout{ display:grid; grid-template-columns:minmax(0,1fr); gap:18px; } .compare-stage,.compare-panel{ background:#fff; border:1px solid var(--line); border-radius:26px; box-shadow:var(--e2); } .compare-stage{ padding:18px; } .compare-panel{ padding:18px; position:sticky; top:92px; overflow:hidden; } .compare-headline{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; } .compare-headline h2,.compare-panel h2{ font-size:17px; font-weight:900; color:#302233; } .compare-headline p,.compare-panel p{ color:var(--muted); font-size:12.5px; line-height:1.85; } .compare-actions{ display:flex; gap:8px; flex-wrap:wrap; } .compare-soft-btn{ min-height:38px; padding:0 14px; border-radius:999px; background:#FFF2F8; color:var(--pink-dark); font-size:12.5px; font-weight:800; } .compare-soft-btn:hover{ transform:translateY(-1px); background:#FFE7F5; } .compare-selected-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .compare-card{ position:relative; padding:14px; border-radius:20px; background:linear-gradient(180deg,#fff 0%,#fcfcff 100%); border:1px solid #EEF0F6; transition:transform .22s ease, box-shadow .24s ease, border-color .24s ease; animation:fadeUp .45s ease both; } .compare-card:hover{ transform:translateY(-3px); border-color:#FFD0EA; box-shadow:0 12px 24px rgba(50,25,70,.08); } .compare-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .compare-card b{ display:block; font-size:14px; line-height:1.8; color:#2E2131; } .compare-card .meta{ margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; } .compare-tag{ padding:4px 9px; border-radius:999px; background:#F6F7FB; color:#666C7F; font-size:12px; font-weight:700; } .compare-card .price{ margin-top:10px; font-size:18px; font-weight:900; color:var(--pink); } .compare-card .price .cur{ font-size:12.5px; color:var(--muted); font-weight:700; } .compare-card .desc{ margin-top:8px; font-size:12.5px; color:#615A67; line-height:1.9; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .compare-remove{ width:34px; height:34px; border-radius:12px; background:#FFF2F8; color:var(--pink-dark); display:grid; place-items:center; flex:none; } .compare-remove:hover{ transform:scale(1.04); } .compare-mini-rate{ margin-top:9px; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:#5D5665; } .compare-mini-rate svg{ width:13px; height:13px; color:#FF00A3; } .compare-empty{ padding:30px 18px; border-radius:22px; border:1px dashed #E2E6F0; background:linear-gradient(135deg,#FFF7FC,#FAFBFE); text-align:center; } .compare-empty .orb{ width:86px; height:86px; margin:0 auto 14px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#fff 0%,#ffd7ef 32%,#f2eaff 70%,#d8ebff 100%); box-shadow:0 15px 40px rgba(255,0,163,.12); position:relative; animation:floaty 3.8s ease-in-out infinite; } .compare-empty .orb::before,.compare-empty .orb::after{ content:''; position:absolute; border-radius:50%; } .compare-empty .orb::before{ inset:12px; border:2px dashed rgba(255,0,163,.34); animation:spinSlow 9s linear infinite; } .compare-empty .orb::after{ inset:28px; background:linear-gradient(135deg,#FF00A3,#7C5CFF,#2A8EFF); opacity:.8; filter:blur(2px); } .compare-empty b{ display:block; font-size:16px; color:#322434; margin-bottom:6px; } .compare-empty p{ max-width:48ch; margin:0 auto; color:#625B69; line-height:1.95; } .compare-hint{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:14px; } .compare-hint span{ padding:7px 11px; border-radius:999px; background:#fff; border:1px solid #EEF0F5; font-size:12px; color:#5F5667; } .ai-visual{ position:relative; display:grid; place-items:center; min-height:120px; margin-bottom:10px; border-radius:22px; background:linear-gradient(135deg,#fff8fd,#f6f9ff); border:1px solid #F1E3EE; overflow:hidden; } .ai-visual::before{ content:''; position:absolute; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle at center, rgba(255,0,163,.1), rgba(255,0,163,0)); animation:aiGlow 5s ease-in-out infinite; } .ai-core{ position:relative; width:88px; height:88px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#fff,#fff7fc); border:1px solid #F3DDEA; box-shadow:0 14px 36px rgba(255,0,163,.12); animation:floaty 4s ease-in-out infinite; } .ai-core::before{ content:''; position:absolute; inset:-8px; border-radius:50%; border:2px dashed rgba(124,92,255,.35); animation:spinSlow 10s linear infinite; } .ai-core svg{ width:38px; height:38px; color:var(--pink-dark); position:relative; z-index:1; } .ai-core .ring{ position:absolute; inset:-18px; border-radius:50%; border:1px solid rgba(42,142,255,.22); animation:aiPulse 2s ease-out infinite; } .ai-core .ring.r2{ animation-delay:.6s; } .ai-think-dots{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:10px; } .ai-think-dots i{ width:8px; height:8px; border-radius:50%; background:linear-gradient(90deg,#FF00A3,#7C5CFF); animation:dotBounce 1.2s ease-in-out infinite; } .ai-think-dots i:nth-child(2){ animation-delay:.15s; } .ai-think-dots i:nth-child(3){ animation-delay:.3s; } .ai-panel-label{ font-size:12.5px; color:#716879; text-align:center; } .compare-question{ width:100%; min-height:110px; border-radius:18px; border:1px solid #EBDDE6; padding:14px; resize:vertical; font-family:inherit; font-size:14px; line-height:1.95; outline:none; background:#fff; transition:border-color .2s ease, box-shadow .2s ease; } .compare-question:focus{ border-color:#FF8ED4; box-shadow:0 0 0 5px rgba(255,0,163,.08); } .compare-submit{ width:100%; min-height:50px; margin-top:10px; border-radius:16px; background:linear-gradient(90deg,#FF00A3,#FF52C0); color:#fff; font-size:14px; font-weight:900; box-shadow:0 14px 28px rgba(255,0,163,.18); } .compare-submit:hover{ transform:translateY(-1px); } .compare-thinking{ margin-top:12px; border-radius:18px; border:1px solid #F2E4EE; background:linear-gradient(135deg,#FFFAFD,#F8FAFF); padding:14px; display:none; } .compare-thinking.on{ display:block; animation:fadeUp .28s ease both; } .compare-thinking-row{ display:flex; align-items:center; gap:12px; } .ai-mini-orb{ width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,#FFEBF8,#EEF4FF); display:grid; place-items:center; border:1px solid #F1DFEA; position:relative; overflow:hidden; } .ai-mini-orb::before{ content:''; position:absolute; inset:7px; border-radius:50%; border:2px dashed rgba(255,0,163,.30); animation:spinSlow 7s linear infinite; } .ai-mini-orb svg{ width:18px; height:18px; color:var(--pink-dark); position:relative; z-index:1; } .compare-thinking strong{ display:block; font-size:13px; color:#2F2535; } .compare-thinking span{ display:block; margin-top:3px; font-size:12.5px; color:#6D6574; } .compare-stream{ margin-top:12px; display:grid; gap:12px; } .ai-bubble,.user-bubble{ border-radius:20px; padding:14px 15px; border:1px solid #F0E4EB; background:#fff; line-height:1.95; animation:fadeUp .25s ease both; } .user-bubble{ background:linear-gradient(135deg,#FFF4FA,#FFF); } .ai-bubble{ background:linear-gradient(135deg,#F9FAFF,#FFF); } .bubble-top{ display:flex; align-items:center; gap:9px; margin-bottom:8px; } .bubble-top b{ font-size:13px; color:#2F2535; } .bubble-top span{ font-size:12px; color:#7A7280; } .bubble-icon{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#FFF0F8; color:var(--pink-dark); } .bubble-icon svg{ width:15px; height:15px; } .typing-area{ white-space:pre-wrap; font-size:13px; color:#4C4753; min-height:72px; } .typing-area.typing::after{ content:''; display:inline-block; width:8px; height:1.1em; margin-inline-start:3px; vertical-align:-2px; background:var(--pink); border-radius:999px; animation:caretBlink .9s step-end infinite; } .compare-scoreboard{ margin-top:12px; display:grid; gap:10px; } .compare-rank-row{ display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; padding:11px 12px; border-radius:16px; background:#fff; border:1px solid #EDF0F6; } .compare-rank-row em{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(90deg,#FF00A3,#7C5CFF); color:#fff; font-style:normal; font-weight:900; } .compare-rank-row b{ display:block; font-size:13px; color:#2D2231; } .compare-rank-row span{ display:block; font-size:12.5px; color:#665F6E; line-height:1.85; margin-top:3px; } .compare-pills{ display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; } .compare-pills small{ padding:5px 9px; border-radius:999px; background:#F6F8FD; color:#606879; font-size:12px; } .compare-trigger{ width:100%; margin-top:8px; min-height:40px; padding:10px 12px; border-radius:14px; border:1.5px solid #FFD4EC; background:#FFF7FC; color:var(--pink-dark); display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:12.5px; font-weight:800; transition:transform .18s ease, background .18s ease, box-shadow .18s ease; } .compare-trigger svg{ width:16px; height:16px; flex:none; } .compare-trigger:hover{ background:#FFEAF7; transform:translateY(-1px); } .compare-trigger.is-on{ background:linear-gradient(90deg,#FF00A3,#FF52C0); color:#fff; border-color:transparent; box-shadow:0 12px 24px rgba(255,0,163,.18); } .compare-head.is-on{ background:linear-gradient(90deg,#FF00A3,#FF52C0); color:#fff; } .compare-head.is-on svg{ color:currentColor; } .compare-tip{ margin-top:10px; font-size:12px; color:#776F7C; line-height:1.85; text-align:center; } @keyframes aiGlow{ 0%,100%{ transform:translate3d(0,0,0) scale(1); opacity:.85; } 50%{ transform:translate3d(10px,-8px,0) scale(1.08); opacity:1; } } @keyframes aiPing{ 0%{ box-shadow:0 0 0 0 rgba(255,0,163,.26); } 70%{ box-shadow:0 0 0 10px rgba(255,0,163,0); } 100%{ box-shadow:0 0 0 0 rgba(255,0,163,0); } } @keyframes aiPulse{ 0%{ transform:scale(.78); opacity:.72; } 80%{ transform:scale(1.18); opacity:0; } 100%{ opacity:0; } } @keyframes dotBounce{ 0%,80%,100%{ transform:translateY(0) scale(1); opacity:.55; } 40%{ transform:translateY(-6px) scale(1.12); opacity:1; } } @keyframes spinSlow{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } } @keyframes caretBlink{ 50%{ opacity:0; } } @keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } @media(max-width:980px){ .compare-shell{ grid-template-columns:1fr; } .compare-panel{ position:static; } } @media(max-width:700px){ .compare-page{ padding-block:18px 42px; } .compare-hero{ padding:18px 15px 16px; border-radius:24px; } .compare-hero h1{ font-size:23px; } .compare-hero-top{ flex-direction:column; } .compare-selected-grid{ grid-template-columns:1fr; } .compare-stage,.compare-panel{ padding:14px; border-radius:22px; } } @media (prefers-reduced-motion: reduce){ .compare-hero::before,.compare-hero::after,.compare-badge .brain-dot,.compare-empty .orb,.compare-empty .orb::before,.ai-core,.ai-core::before,.ai-core .ring,.ai-mini-orb::before,.ai-think-dots i,.compare-card,.compare-trigger{ animation:none !important; transition:none !important; } } /* ===== header-logo-style ===== */ .brand-logo-img{ height:48px; width:auto; display:block; object-fit:contain; } @media(max-width:700px){ .brand-logo-img{height:38px;} } /* ===== footer-contact-style ===== */ .footer-contact-box{ margin-top:18px; padding:18px; border-radius:22px; background:linear-gradient(135deg,#fff7fc,#f8fbff); border:1px solid rgba(0,0,0,.06); } .footer-contact-box h4{ margin:0 0 12px; font-size:15px; } .footer-contact-box p{ margin:7px 0; font-size:14px; line-height:1.9; } .footer-contact-box a{ color:inherit; text-decoration:none; } .footer-contact-box a:hover{ color:var(--pink); } /* ===== footer-contact-fix ===== */ .footer-contact-box{ margin-top:16px; padding:0; background:transparent; border:0; color:inherit; } .footer-contact-box h4{ margin:0 0 14px; font-size:15px; color:#fff; font-weight:900; } .footer-contact-box p{ margin:8px 0; font-size:13px; line-height:2; color:rgba(255,255,255,.82); } .footer-contact-box a{ color:rgba(255,255,255,.9); } .footer-contact-box a:hover{ color:#ff4fc1; } .footer-about-contact{ margin-top:18px; } .footer-about-contact .contact-row{ display:flex; align-items:flex-start; gap:8px; } /* ===== footer-compact-fix ===== */ footer{ padding-bottom:24px !important; } .footer-contact-box{ margin-top:0 !important; } .footer-about-contact{ margin-top:14px !important; } .footer .footer-badges, .footer .trust-badges, .footer .badges{ margin-top:18px; } .footer-newsletter + .footer-badges{ margin-top:16px; } /* ===== footer-final-seals-fix ===== */ .foot-bottom{ min-height:70px; } .newsletter-seals{ margin-top:14px; } .newsletter-seals .seals{ display:flex; gap:10px; align-items:center; } .newsletter-seals .seal{ width:82px; height:62px; display:flex; align-items:center; justify-content:center; text-align:center; border-radius:14px; background:#fff; color:#596273; font-size:12.5px; line-height:1.6; } @media(max-width:700px){ .newsletter-seals .seal{ width:72px; height:56px; } } /* ===== footer-final-clean ===== */ footer{ padding-top:35px !important; padding-bottom:18px !important; } .footer-about-contact{ margin-top:0!important; } .footer-contact-box{ margin-top:0!important; } .footer-contact-box h4{ margin-bottom:10px!important; } .footer-contact-box p{ margin:5px 0!important; font-size:13px!important; } .footer-verification{ display:flex; align-items:center; gap:10px; margin-top:16px; } .footer-verification img{ object-fit:contain; background:#fff; border-radius:12px; padding:5px; } .enamad-box img{ width:72px; height:92px; } .emalls-box img{ width:75px; height:112px; } @media(max-width:700px){ .footer-verification{ justify-content:flex-start; } } /* ===== footer-verification-final ===== */ .footer-verification{ display:flex; align-items:center; gap:12px; margin-top:14px; } .footer-verification .enamad-box, .footer-verification .etihad-box{ width:82px; height:92px; background:#fff; border-radius:14px; display:flex; align-items:center; justify-content:center; overflow:hidden; } .footer-verification img{ max-width:90%; max-height:86px; object-fit:contain; } .footer-verification .etihad-box img{ max-height:72px; } /* ===== footer-all-badges-style ===== */ .footer-verification{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; } .footer-verification .enamad-box, .footer-verification .etihad-box, .footer-verification .emalls-box{ width:82px; height:96px; background:#fff; border-radius:14px; display:flex; align-items:center; justify-content:center; overflow:hidden; } .footer-verification img{ max-width:90%; max-height:88px; object-fit:contain; } .footer-verification .emalls-box img{ max-height:88px; } /* ===== enamad-icon-fix ===== */ .footer-verification .enamad-box img{ width:75px; height:auto; max-height:90px; object-fit:contain; } .footer-verification .enamad-box{ background:#fff; border-radius:14px; display:flex; align-items:center; justify-content:center; padding:6px; } /* ===== emalls-footer-fix ===== */ .footer-verification{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .footer-verification .emalls-box{ width:82px; height:96px; background:#fff; border-radius:14px; display:flex; align-items:center; justify-content:center; overflow:hidden; } .footer-verification .emalls-box img{ max-width:90%; max-height:90px; object-fit:contain; } /* ===== badges-row-final-fix ===== */ .footer-verification{ display:flex !important; align-items:center !important; gap:10px !important; flex-wrap:wrap !important; } .footer-verification .enamad-box, .footer-verification .etihad-box, .footer-verification .emalls-box{ width:82px; height:96px; background:#fff; border-radius:14px; display:flex; align-items:center; justify-content:center; overflow:hidden; } .footer-verification .emalls-box img{ width:75px; height:112px; max-height:88px; object-fit:contain; } /* ===== emalls-guaranteed-style ===== */ .footer-verification{ display:flex!important; flex-direction:row!important; align-items:center!important; gap:10px!important; } .emalls-box a{display:flex;align-items:center;justify-content:center;} /* ===== verification-layout-fix-final ===== */ .footer-verification{ display:flex!important; flex-direction:row!important; align-items:center!important; gap:10px!important; margin-top:14px!important; } .footer-verification>div{ width:82px; height:96px; background:#fff; border-radius:14px; display:flex; align-items:center; justify-content:center; overflow:hidden; } .footer-verification img{ max-width:90%; max-height:88px; object-fit:contain; } /* ===== contact-page-style ===== */ .contact-page{ padding:32px 0 60px; } .contact-box{ background:#fff; border:1px solid var(--line); border-radius:28px; padding:28px; box-shadow:var(--e2); } .contact-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:22px; } .contact-item{ background:linear-gradient(135deg,#fff7fc,#f8fbff); border:1px solid #eef0f6; border-radius:20px; padding:18px; } .contact-item h3{ font-size:15px; margin-bottom:8px; } .contact-item p{ font-size:14px; line-height:2; color:#666; } .contact-item a{ color:var(--pink-dark); font-weight:800; } .contact-form{ margin-top:24px; display:grid; gap:12px; } .contact-form input, .contact-form textarea{ width:100%; border:1px solid #e5e8f0; border-radius:16px; padding:14px; font-family:inherit; } .contact-form textarea{ min-height:120px; } .contact-submit{ min-height:48px; border-radius:16px; background:linear-gradient(90deg,#ff00a3,#ff52c0); color:#fff; font-weight:900; } @media(max-width:700px){ .contact-grid{grid-template-columns:1fr;} } /* ===== header-support-style ===== */ .header-support{ display:flex; align-items:center; gap:7px; margin-inline-start:14px; padding:8px 14px; border-radius:999px; background:#fff4fb; border:1px solid #ffd7ec; color:#4b3b4a; font-size:13px; font-weight:800; white-space:nowrap; } .header-support a{ color:var(--pink-dark); text-decoration:none; } .header-support .support-icon{ font-size:15px; } @media(max-width:700px){ .header-support span.label{display:none;} .header-support{padding:8px 10px;} } /* ===== header-support-fixed-style ===== */ .header-support{ display:flex; align-items:center; gap:7px; padding:8px 14px; margin-inline-start:12px; border-radius:999px; background:#fff4fb; border:1px solid #ffd7ec; font-size:13px; font-weight:800; white-space:nowrap; } .header-support a{ color:#d60087; text-decoration:none; } @media(max-width:700px){ .header-support .label{display:none;} .header-support{padding:7px 10px;} } /* ===== advisor-chat ===== */ /* ══════════ گفت‌وگوی مشاور ══════════ */ .cmp-thread{ display:flex; flex-direction:column; gap:12px; max-height:520px; overflow-y:auto; padding:4px 2px 2px; scroll-behavior:smooth; } .cmp-msg{ display:flex; gap:10px; align-items:flex-start; animation:cmpIn .3s cubic-bezier(.2,.8,.2,1) both; } @keyframes cmpIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } } .cmp-msg.me{ flex-direction:row-reverse; } .cmp-msg.me .cmp-body{ background:var(--grad-btn); color:#fff; border-radius:16px 16px 4px 16px; padding:10px 14px; font-size:13px; line-height:1.85; max-width:78%; box-shadow:0 4px 12px rgba(255,0,163,.2); } .cmp-msg.ai .cmp-body{ background:#fff; border:1px solid var(--line); border-radius:16px 16px 16px 4px; padding:13px 15px; flex:1; min-width:0; box-shadow:0 2px 8px rgba(23,25,40,.05); } .cmp-av{ width:34px; height:34px; flex:none; border-radius:50%; background:#FFF0F9; border:1px solid #FFD4EC; display:grid; place-items:center; overflow:hidden; } .cmp-av svg{ width:26px; height:auto; } .cmp-head{ display:block; font-size:15px; font-weight:800; color:var(--ink); line-height:1.7; margin-bottom:7px; } .cmp-note{ font-size:12.5px; line-height:1.9; color:#8C1063; background:#FFF4FA; border:1px solid #FFD9F1; border-radius:11px; padding:8px 11px; margin-bottom:8px; } .cmp-why{ display:grid; gap:6px; margin:0 0 4px; padding:0; } .cmp-why li{ position:relative; padding-inline-start:16px; font-size:13px; line-height:1.95; color:#4A4F60; } .cmp-why li::before{ content:""; position:absolute; inset-inline-start:3px; top:9px; width:5px; height:5px; border-radius:50%; background:var(--pink); } .cmp-alt{ font-size:13px; color:var(--muted); margin-top:9px; line-height:1.8; } .cmp-alt a{ color:var(--pink); font-weight:700; } .cmp-cta{ margin-top:11px; } .cmp-cta .btn{ padding:8px 16px; font-size:13px; } /* جدول داده */ .cmp-table-wrap{ margin-top:11px; overflow-x:auto; border:1px solid var(--line); border-radius:13px; } .cmp-table{ width:100%; border-collapse:collapse; font-size:12.5px; min-width:340px; } .cmp-table th,.cmp-table td{ padding:8px 10px; text-align:start; border-bottom:1px solid var(--hair); } .cmp-table thead th{ background:#FAFBFD; font-weight:800; color:var(--ink); font-size:12.5px; position:sticky; top:0; } .cmp-table tbody th{ background:#FCFCFE; font-weight:700; color:var(--muted); white-space:nowrap; } .cmp-table td{ color:#4A4F60; } .cmp-table td.win{ background:#F1FBF5; color:#00603C; font-weight:700; } .cmp-table td.win i{ font-style:normal; color:var(--c3-i); } .cmp-table tr:last-child th,.cmp-table tr:last-child td{ border-bottom:0; } /* چیپ‌های پیشنهادی */ .cmp-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; } .cmp-chip{ padding:7px 13px; border-radius:99px; border:1px solid #FFD4EC; background:#FFF8FC; color:var(--pink-dark); font-size:12.5px; font-weight:700; transition:.18s; } .cmp-chip:hover{ background:#FFEAF7; transform:translateY(-1px); } /* ورودی */ .cmp-ask{ display:flex; gap:9px; align-items:flex-end; margin-top:12px; } .cmp-ask textarea{ flex:1; min-height:44px; max-height:120px; resize:vertical; border:1.5px solid var(--line); border-radius:14px; padding:11px 13px; font-size:13px; font-family:inherit; line-height:1.8; transition:border-color .2s, box-shadow .2s; } .cmp-ask textarea:focus{ outline:none; border-color:var(--pink); box-shadow:0 0 0 3px rgba(255,0,163,.12); } .cmp-ask .btn{ flex:none; padding:12px 20px; border-radius:14px; font-size:13px; } /* ══════════ عناصر چت ══════════ */ .cmp-time{ display:block; margin-top:6px; font-size:12px; opacity:.55; letter-spacing:.3px; } .cmp-msg.me .cmp-time{ text-align:start; } .cmp-fade{ animation:cmpFade .26s ease both; } @keyframes cmpFade{ from{ opacity:0; transform:translateY(5px) } to{ opacity:1; transform:none } } .cmp-dots{ display:inline-flex; gap:5px; align-items:center; padding:3px 2px; } .cmp-dots i{ width:7px; height:7px; border-radius:50%; background:var(--pink); display:block; animation:cmpDot 1.1s ease-in-out infinite; } .cmp-dots i:nth-child(2){ animation-delay:.16s } .cmp-dots i:nth-child(3){ animation-delay:.32s } .cmp-typing-row .cmp-body{ padding:12px 15px; } .cmp-chips.is-off{ opacity:.4; pointer-events:none; } .cmp-ask .btn.is-stop{ background:#fff; color:var(--pink-dark); border:1.5px solid #FFD4EC; box-shadow:none; } .cmp-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; } .cmp-live{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:#0B7A4B; } .cmp-live i{ width:7px; height:7px; border-radius:50%; background:#12B76A; display:block; box-shadow:0 0 0 3px rgba(18,183,106,.18); } .cmp-reset{ min-height:36px; padding:7px 13px; border-radius:10px; border:1px solid var(--line); background:#fff; font-size:12.5px; font-weight:700; color:var(--muted); transition:.16s; } .cmp-reset:hover{ border-color:#FFD4EC; color:var(--pink-dark); } /* ══════════ انتخابگر محصول در صفحه مقایسه ══════════ */ .cmp-picker{ margin-top:16px; border:1px solid var(--line); border-radius:var(--r-md); padding:14px 15px; background:#fff; } .cmp-picker > b{ display:block; font-size:14px; font-weight:800; margin-bottom:3px; } .cmp-picker > p{ font-size:12.5px; color:var(--muted); line-height:1.9; margin:0 0 11px; } .cmp-picker-filters{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:11px; } .cmp-filter{ padding:6px 12px; border-radius:99px; border:1px solid var(--line); background:#fff; font-size:12.5px; font-weight:700; color:var(--muted); transition:.16s; } .cmp-filter:hover{ border-color:#FFD4EC; color:var(--pink-dark); } .cmp-filter.on{ background:var(--pink); border-color:var(--pink); color:#fff; } .cmp-picker-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(186px,1fr)); gap:8px; max-height:268px; overflow-y:auto; padding-inline-end:3px; } .cmp-picker-grid .compare-trigger{ width:100%; margin-top:0; min-height:0; padding:9px 11px; border-radius:12px; justify-content:flex-start; text-align:start; gap:9px; font-size:12.5px; } .cmp-picker-grid .compare-trigger span.n{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:800; } .cmp-picker-grid .compare-trigger small{ font-size:12px; font-weight:700; opacity:.78; flex:none; } .cmp-picker-grid .compare-trigger .tick{ width:16px; height:16px; flex:none; border-radius:5px; border:1.5px solid currentColor; opacity:.45; display:grid; place-items:center; font-size:12px; } .cmp-picker-grid .compare-trigger.is-on .tick{ opacity:1; background:rgba(255,255,255,.22); } .cmp-picker-grid .compare-trigger.is-on small{ opacity:.9; } .cmp-picker-empty{ font-size:12.5px; color:var(--muted); padding:14px 2px; } @media (max-width:640px){ .cmp-picker-grid{ grid-template-columns:1fr; max-height:230px; } .cmp-msg.me .cmp-body{ max-width:86%; } .cmp-table{ font-size:12.5px; } .cmp-ask{ flex-direction:column; align-items:stretch; } .cmp-ask .btn{ width:100%; } } @media (prefers-reduced-motion: reduce){ .cmp-msg{ animation:none; } .cmp-filter{ transition:none; } .cmp-thinking i{ animation:none; opacity:.6; } .cmp-chip:hover{ transform:none; } .cmp-thread{ scroll-behavior:auto; } } /* ══════════════════ FREE SHIPPING — DELIGHT BOTTOM BAR v13 ══════════════════ */ .free-ship-float{ --fs-p:0%; position:fixed; z-index:890; inset-inline:0; bottom:18px; margin-inline:auto; width:min(820px,calc(100% - 32px)); color:#402536; border:1px solid rgba(214,0,138,.15); border-radius:24px; background: radial-gradient(circle at 88% -20%,rgba(255,179,228,.42),transparent 34%), radial-gradient(circle at 4% 120%,rgba(143,199,255,.28),transparent 34%), rgba(255,255,255,.965); box-shadow:0 24px 70px rgba(74,10,50,.18),0 5px 18px rgba(74,10,50,.07),inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter:blur(18px) saturate(1.12); -webkit-backdrop-filter:blur(18px) saturate(1.12); opacity:0; transform:translateY(30px) scale(.975); pointer-events:none; transition:opacity .28s ease,transform .48s cubic-bezier(.16,.9,.24,1),border-color .3s,background .3s; overflow:hidden; isolation:isolate; } .free-ship-float.is-on{ opacity:1; transform:none; pointer-events:auto; } .free-ship-float::before{ content:""; position:absolute; z-index:-1; inset:-120% -30%; pointer-events:none; opacity:.46; background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.96) 49%,transparent 60%); transform:translateX(-70%); animation:fsfShine 6.2s ease-in-out infinite; } .free-ship-float::after{ content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; background:linear-gradient(90deg,rgba(255,0,163,.055),transparent 35%,rgba(42,142,255,.045)); } @keyframes fsfShine{0%,62%{transform:translateX(-70%)}88%,100%{transform:translateX(70%)}} .fsf-inner{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; padding:13px 14px 12px; } .fsf-icon{ position:relative; width:50px; height:50px; flex:none; border-radius:17px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#FF00A3,#B04BEA 62%,#2A8EFF); box-shadow:0 11px 25px rgba(176,75,234,.24),inset 0 1px 0 rgba(255,255,255,.35); transform:rotate(-2deg); transition:transform .35s,box-shadow .35s,background .35s; } .fsf-icon::before,.fsf-icon::after{ content:"✦"; position:absolute; color:#FFC93C; line-height:1; filter:drop-shadow(0 2px 2px rgba(91,44,0,.12)); } .fsf-icon::before{ font-size:11px; top:-4px; inset-inline-start:-3px; animation:fsfTwinkle 2.4s ease-in-out infinite; } .fsf-icon::after{ content:"•"; font-size:19px; bottom:-8px; inset-inline-end:-4px; color:#8FC7FF; animation:fsfTwinkle 2.4s .8s ease-in-out infinite; } .fsf-icon svg{ width:27px; height:27px; animation:fsfTruck 3.2s ease-in-out infinite; } @keyframes fsfTruck{0%,100%{transform:translateX(0) rotate(0)}43%{transform:translateX(-3px) rotate(-1deg)}56%{transform:translateX(2px) rotate(1deg)}} @keyframes fsfTwinkle{0%,100%{opacity:.55;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.18) rotate(18deg)}} .fsf-main{ min-width:0; } .fsf-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:2px; } .fsf-kicker{ display:inline-flex; align-items:center; gap:6px; color:#8B5574; font-size:11px; font-weight:800; letter-spacing:-.1px; } .fsf-kicker i{ width:7px; height:7px; border-radius:50%; background:#FF00A3; box-shadow:0 0 0 4px rgba(255,0,163,.09); } .fsf-pct{ flex:none; min-width:42px; text-align:center; padding:3px 8px; border-radius:999px; background:#FFF0F9; color:#B00371; font-size:11.5px; font-weight:900; font-variant-numeric:tabular-nums; border:1px solid #FFD4EE; transition:.3s; } .fsf-line{ display:flex; align-items:baseline; gap:8px; min-width:0; } .fsf-msg{ min-width:0; font-size:13.5px; font-weight:760; line-height:1.65; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fsf-msg b{ color:#B00371; font-weight:950; } .fsf-sub{ display:block; margin-top:5px; font-size:10.75px; line-height:1.55; color:#7B6672; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fsf-progress{ position:relative; margin-top:8px; padding-inline-end:25px; } .fsf-track{ position:relative; display:block; height:10px; border-radius:999px; background:#F5E9F0; box-shadow:inset 0 1px 3px rgba(88,30,66,.08); overflow:hidden; } .fsf-track i{ position:relative; display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,#D6008A 0%,#FF52C0 44%,#9A71F5 72%,#2A8EFF 100%); box-shadow:0 2px 8px rgba(214,0,138,.22); transition:width .58s cubic-bezier(.2,.8,.2,1); } .fsf-track i::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(120deg,rgba(255,255,255,.06) 0 7px,rgba(255,255,255,.28) 7px 13px); animation:fsfCandy 1.7s linear infinite; } .fsf-track i::after{ content:""; position:absolute; width:28px; height:28px; top:50%; inset-inline-end:-12px; translate:0 -50%; border-radius:50%; background:radial-gradient(circle,#fff 0 28%,#FFD3EF 31% 48%,rgba(255,82,192,.25) 51% 64%,transparent 67%); filter:drop-shadow(0 2px 5px rgba(176,3,113,.2)); opacity:.86; } @keyframes fsfCandy{to{transform:translateX(-26px)}} .fsf-gift{ position:absolute; inset-inline-end:0; top:50%; translate:0 -50%; width:22px; height:22px; display:grid; place-items:center; font-size:16px; filter:drop-shadow(0 3px 3px rgba(66,26,48,.14)); transition:transform .3s; } .fsf-close{ width:35px; height:35px; border-radius:50%; display:grid; place-items:center; flex:none; background:rgba(255,255,255,.72); color:#85717D; border:1px solid rgba(126,89,109,.13); box-shadow:0 3px 10px rgba(70,30,52,.06); transition:transform .2s,background .2s,color .2s,border-color .2s; } .fsf-close:hover{ color:#B00371; background:#FFF0F9; border-color:#FFC8E9; transform:rotate(7deg) scale(1.04); } .fsf-close:active{ transform:scale(.94); } .fsf-close svg{ width:16px; height:16px; } .free-ship-float.is-near{ border-color:rgba(255,0,163,.24); box-shadow:0 26px 74px rgba(176,3,113,.19),0 5px 18px rgba(74,10,50,.07); } .free-ship-float.is-near .fsf-icon{ transform:rotate(2deg) scale(1.035); box-shadow:0 13px 29px rgba(214,0,138,.28); } .free-ship-float.is-near .fsf-gift{ animation:fsfGift 1.5s ease-in-out infinite; } @keyframes fsfGift{50%{transform:translateY(-2px) rotate(6deg) scale(1.08)}} .free-ship-float.is-free{ border-color:rgba(37,171,58,.22); background:radial-gradient(circle at 88% -20%,rgba(137,236,163,.32),transparent 35%),radial-gradient(circle at 4% 120%,rgba(143,199,255,.22),transparent 34%),rgba(249,255,250,.97); box-shadow:0 24px 70px rgba(18,119,57,.15),0 5px 18px rgba(27,78,46,.06),inset 0 1px 0 rgba(255,255,255,.9); } .free-ship-float.is-free .fsf-icon{ background:linear-gradient(145deg,#25AB3A,#00B288); box-shadow:0 11px 25px rgba(37,171,58,.22); transform:rotate(0) scale(1.04); } .free-ship-float.is-free .fsf-kicker{ color:#4A7958; } .free-ship-float.is-free .fsf-kicker i{ background:#25AB3A; box-shadow:0 0 0 4px rgba(37,171,58,.1); } .free-ship-float.is-free .fsf-msg b{ color:#087A29; } .free-ship-float.is-free .fsf-pct{ color:#087A29; background:#EAF9EE; border-color:#CBEFD4; } .free-ship-float.is-free .fsf-track{ background:#E2F3E7; } .free-ship-float.is-free .fsf-track i{ background:linear-gradient(90deg,#25AB3A,#00B288); box-shadow:0 2px 8px rgba(37,171,58,.2); } .free-ship-float.is-free .fsf-gift{ animation:fsfHappyGift .7s cubic-bezier(.2,.9,.3,1) 2; } @keyframes fsfHappyGift{50%{transform:translateY(-3px) rotate(-8deg) scale(1.18)}} .free-ship-float.celebrate .fsf-icon{ animation:fsfCelebrate .65s cubic-bezier(.2,.9,.25,1); } @keyframes fsfCelebrate{0%{transform:scale(.8) rotate(-8deg)}55%{transform:scale(1.14) rotate(5deg)}100%{transform:scale(1.04)}} /* keep fixed UI clear of the shipping bar. The bar is fixed and must NOT add page/footer height. */ body.fsf-visible .toast-wrap{ bottom:154px; } body.fsf-visible .to-top{ bottom:154px; } @media(max-width:820px){ .free-ship-float{ inset-inline:10px; width:auto; bottom:calc(76px + env(safe-area-inset-bottom,0px)); border-radius:21px; } .fsf-inner{ gap:10px; padding:11px 11px 10px; } .fsf-icon{ width:43px; height:43px; border-radius:14px; } .fsf-icon svg{ width:23px; height:23px; } .fsf-kicker{ font-size:10.5px; } .fsf-msg{ font-size:12.4px; } .fsf-sub{ font-size:10px; margin-top:3px; } .fsf-pct{ font-size:10.5px; min-width:38px; padding:2px 6px; } .fsf-progress{ margin-top:7px; } .fsf-track{ height:9px; } .fsf-close{ width:44px; height:44px; touch-action:manipulation; } body.fsf-visible .to-top{ bottom:calc(194px + env(safe-area-inset-bottom,0px)); } body.fsf-visible .toast-wrap{ bottom:auto; } } @media(max-width:480px){ .fsf-inner{ grid-template-columns:auto minmax(0,1fr) auto; } .fsf-icon{ width:39px; height:39px; border-radius:13px; } .fsf-kicker{ display:none; } .fsf-top{ justify-content:flex-end; min-height:17px; margin-bottom:-2px; } .fsf-msg{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.45; } .fsf-sub{ display:none; } .fsf-progress{ margin-top:7px; padding-inline-end:22px; } } @media(prefers-reduced-motion:reduce){ .free-ship-float,.fsf-track i,.fsf-icon,.fsf-gift{ transition:none; } .free-ship-float::before,.fsf-icon::before,.fsf-icon::after,.fsf-icon svg,.fsf-track i::before,.fsf-gift,.free-ship-float.celebrate .fsf-icon{ animation:none!important; } .fsf-close:hover{ transform:none; } } /* ===== v15-toast-fix ===== */ /* v15 — prevent the old RTL toast from collapsing into a blank white strip */ .toast-wrap{ position:fixed !important; top:16px !important; bottom:auto !important; left:50% !important; right:auto !important; inset-inline:auto !important; transform:translateX(-50%); width:min(430px,calc(100vw - 28px)); display:flex; flex-direction:column; align-items:stretch; gap:9px; z-index:1100 !important; pointer-events:none; } .toast{ width:100% !important; max-width:none !important; min-width:0 !important; box-sizing:border-box; direction:rtl; color:var(--ink,#23252F) !important; background:rgba(255,255,255,.985) !important; border:1px solid #E7E9F0; border-radius:18px; padding:11px 13px !important; display:flex !important; align-items:center; gap:10px; box-shadow:0 14px 38px rgba(23,25,40,.16); overflow:hidden; pointer-events:auto; } .toast:empty{ display:none !important; } .toast > span:not(.tk){ min-width:0; flex:1; color:var(--ink,#23252F) !important; line-height:1.75; overflow-wrap:anywhere; } .toast .tx{ min-width:0; flex:1; color:var(--ink,#23252F) !important; } .toast .tk{ flex:0 0 26px; align-self:center !important; margin-top:0 !important; } .toast .undo{ flex:0 0 auto; white-space:nowrap; } body.fsf-visible .toast-wrap{ top:16px !important; bottom:auto !important; } @media(max-width:700px){ .toast-wrap{ top:10px !important; width:calc(100vw - 20px); } .toast{ border-radius:16px; } } /* ===== bazidan-wc-live-product-images ===== */ .product-real-image{width:100%;height:100%;object-fit:contain;display:block} .prod-img .product-real-image{padding:10px} .deal-img .product-real-image{padding:8px} .gal-big .pdp-real-image{width:100%;height:100%;object-fit:contain;padding:18px} .gal-thumbs .pdp-thumb-real{width:100%;height:100%;object-fit:contain} /* ===== advisor-life ===== */ /* ══════════════════════════════════════════════════════════════════════ جان دادن به مشاور و مقایسه — با همان مقیاس ۸ رنگه‌ی دسته‌بندی که از قبل در فایل بود و جز در نوار دسته‌ها هیچ‌جا استفاده نمی‌شد. قاعده‌ی رنگ: tint = سطح، ink = متن و پس‌زمینه‌ی زیر متن سفید، solid = فقط تزیین (نوار، نقطه، حلقه) و هرگز زیر متن. هر جفت ink/tint و ink/سفید بین ۵٫۰۰ تا ۷٫۴۵ اندازه‌گیری شده. ══════════════════════════════════════════════════════════════════════ */ [data-cat]{ --k-t:#FFF2F9; --k-i:var(--pink-text); --k-s:var(--pink); } [data-cat="ride"] { --k-t:var(--c1-t); --k-i:var(--c1-i); --k-s:var(--c1-s); } [data-cat="art"] { --k-t:var(--c2-t); --k-i:var(--c2-i); --k-s:var(--c2-s); } [data-cat="baby"] { --k-t:var(--c4-t); --k-i:var(--c4-i); --k-s:var(--c4-s); } [data-cat="brain"]{ --k-t:var(--c5-t); --k-i:var(--c5-i); --k-s:var(--c5-s); } [data-cat="build"]{ --k-t:var(--c6-t); --k-i:var(--c6-i); --k-s:var(--c6-s); } [data-cat="rc"] { --k-t:var(--c7-t); --k-i:var(--c7-i); --k-s:var(--c7-s); } [data-cat="dolls"]{ --k-t:var(--c8-t); --k-i:var(--c8-i); --k-s:var(--c8-s); } /* ── حباب پاسخ رنگ همان چیزی را می‌گیرد که درباره‌اش حرف می‌زند ────────── */ .cmp-msg.ai .cmp-body{ position:relative; min-width:0; } .cmp-msg.ai[data-cat] .cmp-body{ border-color:color-mix(in oklab, var(--k-s) 34%, var(--line)); border-inline-start:4px solid var(--k-s); } .cmp-msg.ai[data-cat] .cmp-head{ color:var(--k-i); } .cmp-msg.ai[data-cat] .cmp-note{ background:var(--k-t); border-color:color-mix(in oklab, var(--k-i) 22%, #fff); color:var(--k-i); } .cmp-msg.ai[data-cat] .cmp-why li::before{ background:var(--k-s); } .cmp-msg.ai[data-cat] .cmp-alt a{ color:var(--k-i); } .cmp-msg.ai[data-cat] .cmp-cta .btn{ background:var(--k-t); background-image:none; color:var(--k-i); box-shadow:none; border:1.5px solid color-mix(in oklab, var(--k-s) 52%, #fff); font-weight:800; } .cmp-msg.ai[data-cat] .cmp-cta .btn:hover{ background:color-mix(in oklab, var(--k-t) 82%, var(--k-s)); } .cmp-msg.ai[data-cat] .cmp-av{ background:var(--k-t); border-color:color-mix(in oklab, var(--k-s) 45%, #fff); } /* ── ستون‌های جدول از هم تفکیک می‌شوند؛ «برنده» همچنان سبز و با ✓ ─────── */ .cmp-table thead th[data-cat]{ background:var(--k-t); color:var(--k-i); } .cmp-table thead th .cmp-swatch{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--k-s); margin-inline-end:6px; vertical-align:baseline; } .cmp-table tbody td[data-cat]{ box-shadow:inset 2px 0 0 -1px color-mix(in oklab, var(--k-s) 26%, transparent); } .cmp-table td.win{ background:#EAF8EF; color:#05502F; } .cmp-table td.win i{ color:#0B7A4B; font-weight:900; } .cmp-table tbody tr:hover td{ background:#FBFCFE; } .cmp-table tbody tr:hover td.win{ background:#E2F5EA; } /* ── جدول در پنل باریک: افقی اسکرول شود و ستون ویژگی بچسبد تا همیشه بدانی کدام سطر را می‌خوانی ────────────────────────────────────── */ .cmp-table-wrap{ overflow-x:auto; overscroll-behavior-x:contain; max-width:100%; -webkit-overflow-scrolling:touch; position:relative; /* a soft edge so it is obvious the table keeps going */ -webkit-mask-image:linear-gradient(to left, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); mask-image:linear-gradient(to left, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); } .cmp-table-wrap:not(:hover){ scrollbar-width:thin; } .cmp-table{ min-width:0; width:max-content; min-width:100%; } .cmp-table th,.cmp-table td{ min-width:96px; } .cmp-table tbody th{ position:sticky; inset-inline-start:0; z-index:1; background:#FCFCFE; min-width:78px; box-shadow:1px 0 0 var(--hair), -1px 0 0 var(--hair); } .cmp-table thead th:first-child{ position:sticky; inset-inline-start:0; z-index:2; background:#FAFBFD; min-width:78px; } /* ── نخ گفت‌وگو: بافت خیلی ملایم تا سطح مرده نباشد ────────────────────── */ .cmp-thread{ background-color:#FCFCFE; background-image:radial-gradient(circle at 1px 1px, rgba(23,25,40,.045) 1px, transparent 0); background-size:17px 17px; border-radius:14px; } .cmp-msg .cmp-body{ position:relative; } .cmp-msg.me .cmp-body{ background:var(--grad-btn); } /* ── حرکت معنا دارد: هر طرف از سمت خودش می‌آید ──────────────────────── */ .cmp-msg.me{ animation:cmpInMe .34s cubic-bezier(.2,.8,.2,1) both; } .cmp-msg.ai{ animation:cmpInAi .34s cubic-bezier(.2,.8,.2,1) both; } @keyframes cmpInMe{ from{ opacity:0; transform:translate3d(-14px,6px,0) } to{ opacity:1; transform:none } } @keyframes cmpInAi{ from{ opacity:0; transform:translate3d(14px,6px,0) } to{ opacity:1; transform:none } } .cmp-msg.ai .cmp-av{ animation:avPop .42s cubic-bezier(.34,1.56,.64,1) both; } @keyframes avPop{ 0%{ transform:scale(.6); opacity:0 } 60%{ transform:scale(1.08) } 100%{ transform:none; opacity:1 } } .cmp-table-wrap{ animation:cmpFade .3s ease both; } .cmp-chip{ animation:chipIn .3s cubic-bezier(.2,.8,.2,1) both; } .cmp-chips .cmp-chip:nth-child(2){ animation-delay:.04s } .cmp-chips .cmp-chip:nth-child(3){ animation-delay:.08s } .cmp-chips .cmp-chip:nth-child(4){ animation-delay:.12s } .cmp-chips .cmp-chip:nth-child(5){ animation-delay:.16s } .cmp-chips .cmp-chip:nth-child(6){ animation-delay:.2s } @keyframes chipIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } } /* ── انتخابگر: در حالت عادی خط‌کش رنگی، در حالت انتخاب پُررنگ ─────────── */ .cmp-picker-grid .compare-trigger{ position:relative; border-color:var(--line); background:#fff; color:var(--ink); overflow:hidden; } .cmp-picker-grid .compare-trigger::before{ content:""; position:absolute; inset-block:0; inset-inline-start:0; width:4px; background:var(--k-s); } .cmp-picker-grid .compare-trigger .tick{ border-color:color-mix(in oklab, var(--k-s) 60%, #B9BECC); color:var(--k-i); } .cmp-picker-grid .compare-trigger small{ color:var(--muted); } .cmp-picker-grid .compare-trigger:hover{ border-color:var(--k-s); background:var(--k-t); } .cmp-picker-grid .compare-trigger.is-on{ background:var(--k-i); border-color:var(--k-i); color:#fff; box-shadow:none; } .cmp-picker-grid .compare-trigger.is-on small, .cmp-picker-grid .compare-trigger.is-on .n{ color:#fff; } .cmp-picker-grid .compare-trigger.is-on .tick{ color:#fff; border-color:rgba(255,255,255,.8); background:transparent; } .cmp-picker-grid .compare-trigger.is-on::before{ background:rgba(255,255,255,.55); } .cmp-filter{ display:inline-flex; align-items:center; gap:7px; } .cmp-filter .cmp-swatch{ width:9px; height:9px; border-radius:50%; background:var(--k-s); flex:none; } .cmp-filter:hover{ border-color:var(--k-s); color:var(--k-i); background:var(--k-t); } .cmp-filter.on{ background:var(--k-i); border-color:var(--k-i); color:#fff; } .cmp-filter.on .cmp-swatch{ background:#fff; } .cmp-filter.is-all.on{ background:var(--ink); border-color:var(--ink); } /* ── سرتیتر مشاور: به‌جای گوی تزیینی که همیشه می‌گفت «AI در حال فکر کردن است»، خودِ دانی و یک وضعیت درست، به‌علاوه‌ی نوار هفت‌رنگ دسته‌ها ──── */ .adv-hero{ display:block; padding:14px 15px; border-radius:16px; background:linear-gradient(120deg,#FFF2F9 0%,#F3F7FF 52%,#EFFBF6 100%); border:1px solid #EFE3F0; margin-bottom:14px; } .adv-hero-in{ display:flex; align-items:center; gap:11px; } .adv-hero-av{ width:52px; height:52px; flex:none; border-radius:50%; background:#fff; border:1px solid #FFD4EC; display:grid; place-items:center; overflow:hidden; animation:daniBreathe 3.6s ease-in-out infinite; } .adv-hero-av svg{ width:40px; height:auto; } .adv-hero-in b{ display:block; font-size:14px; font-weight:800; color:var(--ink); line-height:1.7; } .adv-hero-hues{ display:flex; gap:5px; margin-top:12px; width:100%; } .adv-hero-hues i{ flex:1 1 0; min-width:8px; height:6px; border-radius:99px; background:var(--k-s); display:block; } /* ── ترتیب پنل: گفت‌وگو بالا، نوشتن پایین. پیش از این کادر نوشتن بالای نخ گفت‌وگو بود، یعنی برعکس هر چتی که آدم می‌شناسد ───────────────── */ .compare-panel{ display:flex; flex-direction:column; } .compare-panel > .adv-hero{ order:1; } .compare-panel > h2{ order:2; margin-bottom:2px; } .compare-panel > p{ order:3; } .compare-panel > .cmp-bar{ order:4; } .compare-panel > #compareStream{ order:5; flex:1 1 auto; } .compare-panel > #cmpChips{ order:6; } .compare-panel > .compare-question{ order:7; } .compare-panel > .compare-submit{ order:8; } .compare-panel > .compare-tip{ order:9; } .compare-panel > #compareThinking{ display:none; } /* a chat composer, not an essay box */ .compare-question{ min-height:54px; max-height:140px; border-radius:14px; } .compare-submit{ background:var(--grad-btn); } .compare-submit.is-stop{ background:#fff; background-image:none; color:var(--pink-dark); border:1.5px solid #FFD4EC; box-shadow:none; } /* ── نوار وضعیت مشاور روی صفحه‌ی مقایسه ─────────────────────────────── */ .cmp-bar{ padding:9px 12px; border-radius:12px; background:linear-gradient(120deg,#F3FBF6,#F6F9FF); border:1px solid #E2EFE8; } @media (prefers-reduced-motion: reduce){ .cmp-msg.me,.cmp-msg.ai,.cmp-msg.ai .cmp-av,.cmp-table-wrap,.cmp-chip{ animation:none !important; } } /* ===== shelf-rainbow ===== */ /* ══════════════════════════════════════════════════════════════════════ قفسه + رنگین‌کمان دسته‌ای هر کارت data-cat دارد، پس همان نقشه‌ی رنگی مشاور اینجا هم کار می‌کند. tint = صفحه‌ی کارت، ink = برچسب و متن، solid = فقط تزیین. بافت کاغذ با گرادیان خالص ساخته می‌شود؛ هیچ تصویری اضافه نمی‌شود. ══════════════════════════════════════════════════════════════════════ */ /* ── صفحه‌ای که اسباب‌بازی رویش می‌نشیند ─────────────────────────────── */ .prod[data-cat] .prod-img, .deal[data-cat] .deal-img{ background-color:var(--k-t) !important; background-image: radial-gradient(64% 44% at 50% 26%, rgba(255,255,255,.78), transparent 66%), repeating-linear-gradient(132deg, rgba(255,255,255,.17) 0 2px, transparent 2px 6px); border:1px solid color-mix(in oklab, var(--k-s) 20%, #fff); position:relative; overflow:hidden; } /* ── تخته‌ی قفسه، پایین صفحه ─────────────────────────────────────────── */ .prod[data-cat] .prod-img::before, .deal[data-cat] .deal-img::before{ content:""; position:absolute; inset:auto 0 0 0; height:13%; z-index:0; background:linear-gradient(180deg, color-mix(in oklab, var(--k-s) 14%, #fff) 0, color-mix(in oklab, var(--k-s) 26%, #fff) 40%, color-mix(in oklab, var(--k-i) 20%, #fff) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 -4px 10px rgba(23,25,40,.07); opacity:1; } /* لبه‌ی جلوی قفسه، تا تخته ضخامت داشته باشد */ .prod[data-cat] .prod-img::after{ background:radial-gradient(closest-side, color-mix(in oklab, var(--k-i) 38%, transparent), transparent); bottom:12%; width:52%; height:9%; opacity:.75; z-index:1; } .prod[data-cat]:hover .prod-img::after{ width:40%; opacity:.45; } /* the deal card had no contact shadow at all */ .deal[data-cat] .deal-img::after{ content:""; position:absolute; inset-inline-start:50%; translate:-50% 0; bottom:12%; width:52%; height:9%; border-radius:50%; z-index:1; background:radial-gradient(closest-side, color-mix(in oklab, var(--k-i) 38%, transparent), transparent); transition:width .45s ease, opacity .45s ease; } .deal[data-cat]:hover .deal-img::after{ width:40%; opacity:.55; } /* the toy sits ON the plank rather than floating in the middle of the plate */ .prod[data-cat] .prod-img,.deal[data-cat] .deal-img{ display:grid; place-items:end center; padding-bottom:13%; } .prod[data-cat] .prod-img svg.art{ width:80%; height:80%; } .deal[data-cat] .deal-img svg{ width:80%; height:80%; } .deal[data-cat] .deal-img svg{ position:relative; z-index:1; filter:drop-shadow(0 7px 9px color-mix(in oklab, var(--k-i) 22%, transparent)); } /* ── برداشتن اسباب‌بازی از قفسه ───────────────────────────────────────── */ .prod[data-cat] .prod-img svg.art{ filter:drop-shadow(0 8px 10px color-mix(in oklab, var(--k-i) 26%, transparent)); } .prod[data-cat]:hover .prod-img svg.art{ transform:translateY(-9px) scale(1.08) rotate(-2.5deg); } .deal[data-cat]:hover .deal-img svg{ transform:translateY(-7px) scale(1.06) rotate(2deg); } .prod[data-cat]:hover{ border-color:color-mix(in oklab, var(--k-s) 42%, #fff); box-shadow:0 6px 12px color-mix(in oklab, var(--k-i) 10%, transparent), 0 26px 48px color-mix(in oklab, var(--k-i) 18%, transparent); } /* ── برچسب تخفیف: یک اتیکت کاغذی آویزان، نه قرص تخت ─────────────────── */ .prod[data-cat] .new-badge,.deal[data-cat] .off{ background:var(--k-i) !important; background-image:none !important; color:#fff !important; border-radius:5px; padding:5px 10px 6px; transform:rotate(-7deg); box-shadow:0 5px 12px color-mix(in oklab, var(--k-i) 34%, transparent); z-index:3; } .prod[data-cat] .new-badge,.deal[data-cat] .off{ top:19px; } .prod[data-cat] .new-badge::after,.deal[data-cat] .off::after{ content:""; position:absolute; inset-inline-start:50%; bottom:100%; width:1.5px; height:13px; background:color-mix(in oklab, var(--k-i) 55%, #fff); } .prod[data-cat] .new-badge::before,.deal[data-cat] .off::before{ content:""; position:absolute; inset-inline-start:calc(50% - 3.5px); bottom:calc(100% + 11px); width:7px; height:7px; border-radius:50%; background:#fff; border:1.5px solid color-mix(in oklab, var(--k-i) 60%, #fff); } /* ── چیپ دسته، ستاره و لینک از همان رنگ ─────────────────────────────── */ .prod[data-cat] .chip,.deal[data-cat] .chip{ background:var(--k-t); color:var(--k-i); font-weight:700; } .prod[data-cat] .rate svg,.deal[data-cat] .rate svg{ color:var(--k-s); } .prod[data-cat]:hover b .p-link{ color:var(--k-i); } .prod[data-cat] .fav:hover{ background:var(--k-t); color:var(--k-i); } /* ── تیتر بخش‌ها: خطِ رنگین‌کمان به‌جای زیرخط صورتی تکراری ───────────── */ .sec-head h2::after,.deals-title h2::after{ content:""; display:block; height:5px; width:108px; margin-top:9px; border-radius:99px; background:linear-gradient(90deg, var(--c1-s) 0 14.3%, var(--c2-s) 14.3% 28.6%, var(--c3-s) 28.6% 42.9%, var(--c5-s) 42.9% 57.1%, var(--c6-s) 57.1% 71.4%, var(--c7-s) 71.4% 85.7%, var(--c8-s) 85.7% 100%); } .sec-head{ position:relative; } @media (prefers-reduced-motion: reduce){ .prod[data-cat]:hover .prod-img svg.art,.deal[data-cat]:hover .deal-img svg{ transform:none; } } /* ===== dani-host ===== */ /* ══ دانی میزبان ══ بخش بعدی را معرفی می‌کند، نه اینکه تزیینش کند ══ */ .dani-say{ display:flex; align-items:center; justify-content:flex-start; gap:14px; width:min(100% - 40px, 980px); margin:34px auto 4px; padding:0; pointer-events:none; } .dani-say-av{ width:78px; height:78px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--k-t); border:2px solid color-mix(in oklab, var(--k-s) 42%, #fff); box-shadow:0 8px 22px color-mix(in oklab, var(--k-i) 20%, transparent); } .dani-say-av svg{ width:60px; height:auto; } .dani-say-b{ flex:0 1 auto; max-width:min(620px, 100%); position:relative; margin:0; padding:13px 18px; border-radius:18px 18px 18px 5px; background:#fff; border:1.5px solid color-mix(in oklab, var(--k-s) 34%, #fff); font-size:14px; font-weight:700; line-height:1.85; color:var(--k-i); box-shadow:0 6px 18px color-mix(in oklab, var(--k-i) 12%, transparent); } .dani-say-b::before{ content:""; position:absolute; inset-inline-start:-9px; bottom:12px; width:14px; height:14px; background:#fff; rotate:45deg; border-inline-end:1.5px solid color-mix(in oklab, var(--k-s) 34%, #fff); border-block-end:1.5px solid color-mix(in oklab, var(--k-s) 34%, #fff); } /* ورود: یک تکان کوچک، فقط بار اول */ .dani-say{ opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); } .dani-say.is-in{ opacity:1; transform:none; } .dani-say.is-in .dani-say-av{ animation:daniWave .9s cubic-bezier(.34,1.4,.5,1) .2s 1; } @keyframes daniWave{ 0%{ rotate:0deg } 28%{ rotate:-9deg } 55%{ rotate:7deg } 80%{ rotate:-3deg } 100%{ rotate:0deg } } .dani-say .dani-bob{ animation:daniBob 2.8s ease-in-out infinite; transform-origin:60px 60px; } @keyframes daniBob{ 0%,100%{ translate:0 0 } 50%{ translate:0 -2px } } @media (max-width:700px){ .dani-say{ gap:10px; margin-top:26px; width:calc(100% - 28px); } .dani-say-av{ width:58px; height:58px; } .dani-say-av svg{ width:44px; } .dani-say-b{ font-size:13px; padding:11px 14px; } } @media (prefers-reduced-motion: reduce){ .dani-say{ opacity:1; transform:none; transition:none; } .dani-say.is-in .dani-say-av,.dani-say .dani-bob{ animation:none; } } /* ===== chat-fit ===== */ /* ══════════════════════════════════════════════════════════════════════ چت: هیچ‌چیز از کادر بیرون نزند اندازه‌گیری پیش از این: نخ گفت‌وگو ۴۳۹px محتوا در کادر ۴۰۲px داشت و جدول ۶۶۱px در پنل ۳۷۴px افقی اسکرول می‌شد. ══════════════════════════════════════════════════════════════════════ */ /* ۱. ردیف پیام هیچ‌وقت از نخ پهن‌تر نشود. min-width:auto پیش‌فرض فلکس اجازه می‌داد محتوای پهن ردیف را باز کند. */ .cmp-thread{ overflow-x:hidden; container-type:inline-size; container-name:cmpthread; } .cmp-msg{ min-width:0; max-width:100%; } .cmp-msg > .cmp-body{ min-width:0; max-width:100%; } /* ۲. کلمه یا لینک بلندِ بدون فاصله، به‌جای بیرون زدن، بشکند */ .cmp-body,.cmp-msg.me .cmp-body,.cmp-head,.cmp-note,.cmp-why li,.cmp-alt,.dani-say-b{ overflow-wrap:anywhere; word-break:break-word; } .cmp-alt a{ overflow-wrap:anywhere; } /* ۳. جدول در کادر باریک: به‌جای اسکرول افقی، بلوکی می‌شود. container query است نه media query — چون پنل چت حتی روی دسکتاپ باریک است و عرض پنجره هیچ ربطی به آن ندارد. */ @container cmpthread (max-width: 470px){ .cmp-table-wrap{ overflow-x:visible; border:0; -webkit-mask-image:none; mask-image:none; } .cmp-table{ width:100%; min-width:0; display:block; border-collapse:separate; } .cmp-table thead{ display:none; } .cmp-table tbody{ display:block; } .cmp-table tbody tr{ display:block; margin-bottom:9px; border:1px solid var(--hair); border-radius:12px; overflow:hidden; background:#fff; } .cmp-table tbody tr:last-child{ margin-bottom:0; } .cmp-table tbody th{ display:block; position:static; width:auto; min-width:0; box-shadow:none; background:#F7F8FC; padding:7px 11px; font-size:12px; color:var(--ink); border-bottom:1px solid var(--hair); white-space:normal; } .cmp-table tbody td{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; min-width:0; padding:8px 11px; border-bottom:1px solid var(--hair); box-shadow:none; font-size:12.5px; } .cmp-table tbody td:last-child{ border-bottom:0; } .cmp-table tbody td::before{ content:attr(data-label); flex:1 1 auto; min-width:0; font-size:12px; font-weight:700; color:var(--k-i); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cmp-table tbody td > *,.cmp-table tbody td{ flex-shrink:0; } .cmp-table tbody td.win{ background:#EAF8EF; } .cmp-table tbody td[data-cat]{ box-shadow:inset 3px 0 0 -1px var(--k-s); } } /* مرورگر بدون container query: جدول مثل قبل اسکرول می‌شود، فقط بیرون نمی‌زند */ @supports not (container-type: inline-size){ .cmp-table-wrap{ overflow-x:auto; } } /* ۴. پنل کمی پهن‌تر روی دسکتاپ، تا جدول جا شود */ /* ===== hero-posters ===== */ /* ══ دو پوستر کنار اسلایدر بالای صفحه ══ .hero-side از قبل یک گرید دو ردیفه بود، پس «ماشین بالا، عروسک پایین» همان ساختار خودش است. نسبت تصویرها را ندیده‌ام (دامنه از این محیط بلاک است)، پس object-fit:cover در کادری که ارتفاعش را گرید می‌دهد: هر نسبتی بیاید برش می‌خورد و هیچ‌وقت کشیده نمی‌شود. */ .hero-side > .poster{ position:relative; display:block; height:100%; min-height:132px; overflow:hidden; border-radius:var(--r-md); background:var(--k-t); border:1.5px solid color-mix(in oklab, var(--k-s) 34%, #fff); box-shadow:0 6px 16px color-mix(in oklab, var(--k-i) 16%, transparent); transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease; } .hero-side > .poster img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .5s cubic-bezier(.2,.8,.2,1); } .hero-side > .poster:hover{ transform:translateY(-4px); box-shadow:0 14px 32px color-mix(in oklab, var(--k-i) 28%, transparent); } .hero-side > .poster:hover img{ transform:scale(1.045); } .poster-tag{ position:absolute; inset-inline-start:12px; bottom:12px; z-index:2; padding:8px 15px; border-radius:99px; background:var(--k-i); color:#fff; font-size:13px; font-weight:800; line-height:1.6; box-shadow:0 6px 18px rgba(23,25,40,.3); } /* اگر عکس نیامد، کادر خالی نماند */ .poster.no-img{ display:grid; place-items:center; } .poster.no-img img{ display:none; } .poster.no-img .poster-tag{ position:static; font-size:14px; } @media (max-width:900px){ .hero-side > .poster{ min-height:118px; aspect-ratio:16/9; height:auto; } .poster-tag{ font-size:12.5px; padding:7px 13px; inset-inline-start:10px; bottom:10px; } } @media (max-width:560px){ .hero-side > .poster{ aspect-ratio:16/7; min-height:104px; } } @media (prefers-reduced-motion: reduce){ .hero-side > .poster,.hero-side > .poster img{ transition:none; } .hero-side > .poster:hover{ transform:none; } .hero-side > .poster:hover img{ transform:none; } } /* ===== hero-images ===== */ /* ══ اسلایدر با عکس ══ عکس داخل خود اسلاید است، پس همان محو تدریجی اسلایدها را می‌گیرد و به لایه‌ی جداگانه نیاز ندارد. نسبت عکس‌ها را ندیده‌ام (دامنه از این محیط بلاک است)، پس object-fit:cover — هر نسبتی بیاید برش می‌خورد، کشیده نمی‌شود. */ .hero-slide{ position:relative; } .hero-img{ position:absolute; inset:calc(-1 * var(--hero-pad, 44px)); z-index:0; width:calc(100% + 2 * var(--hero-pad, 44px)); height:calc(100% + 2 * var(--hero-pad, 44px)); max-width:none; max-height:none; object-fit:cover; object-position:center; border-radius:var(--radius-banner); } .hero-slide.no-img .hero-img{ display:none; } /* پرده‌ی محافظ فقط سمت متن. آلفا حساب شده است: اگر بدترین حالت پیش بیاید و زیر متن سفیدِ عکس باشد، ترکیب رنگ به (۹۵،۸۷،۱۰۲) می‌رسد و متن سفید ۶٫۹:۱ می‌ماند. */ .hero-slide.has-img::before{ content:""; position:absolute; inset:calc(-1 * var(--hero-pad, 44px)); z-index:1; border-radius:var(--radius-banner); background:linear-gradient(to left, rgba(20,8,30,.66) 0%, rgba(20,8,30,.52) 34%, rgba(20,8,30,.16) 66%, rgba(20,8,30,0) 100%); } .hero-slide.no-img::before{ display:none; } .hero-slide > :not(.hero-img){ position:relative; z-index:2; } /* متن روی عکس کمی سایه بگیرد تا لبه‌ها از هم جدا بمانند */ .hero-slide.has-img h1,.hero-slide.has-img .hero-h,.hero-slide.has-img .lead{ text-shadow:0 2px 10px rgba(20,8,30,.45); } /* اسباب‌بازی شناور با عکس واقعی پشت سر تداخل داشت */ #heroMain:has(.hero-slide.has-img.on) .hero-stage, #heroMain:has(.hero-slide.has-img.on) .hero-art{ display:none; } /* اگر عکس خودش متن و پیام دارد، این را روی اسلاید بگذار: data-plain="1" → پرده و متن روی عکس برداشته می‌شود */ .hero-slide[data-plain="1"]::before{ display:none; } .hero-slide[data-plain="1"] > :not(.hero-img){ display:none; } @media (max-width:700px){ .hero-slide.has-img::before{ background:linear-gradient(to top, rgba(20,8,30,.72) 0%, rgba(20,8,30,.5) 46%, rgba(20,8,30,.14) 78%, rgba(20,8,30,0) 100%); } } /* ===== contact-page ===== */ /* ══ صفحه‌ی تماس ══ */ .contact-page{ padding-block:8px 44px; padding-inline:clamp(16px,3vw,44px); } .ct-head{ display:flex; align-items:center; gap:16px; margin:6px 0 22px; } .ct-head-av{ width:72px; height:72px; flex:none; border-radius:50%; background:#FFF0F9; border:2px solid #FFD4EC; display:grid; place-items:center; overflow:hidden; } .ct-head-av svg{ width:56px; height:auto; } .ct-head h1{ font-family:var(--font-display); font-size:30px; font-weight:400; line-height:1.5; color:var(--ink); margin:0 0 4px; } .ct-head p{ margin:0; font-size:14px; color:var(--muted); line-height:1.9; } /* کارهای سریع */ .ct-actions{ display:grid; grid-template-columns:repeat(auto-fit,minmax(214px,1fr)); gap:14px; margin-bottom:22px; } .ct-act{ display:block; padding:17px 18px; border-radius:var(--r-md); background:var(--k-t); border:1.5px solid color-mix(in oklab, var(--k-s) 32%, #fff); min-height:44px; transition:transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease; } .ct-act:hover{ transform:translateY(-3px); box-shadow:0 12px 26px color-mix(in oklab, var(--k-i) 22%, transparent); } .ct-act-ic{ display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:#fff; color:var(--k-i); margin-bottom:11px; } .ct-act-ic svg{ width:23px; height:23px; } .ct-act b{ display:block; font-size:14px; font-weight:800; color:var(--k-i); line-height:1.7; } .ct-act-v{ display:block; font-size:14px; font-weight:700; color:var(--ink); line-height:1.9; letter-spacing:.02em; } .ct-act small{ display:block; font-size:12.5px; color:var(--muted); line-height:1.8; margin-top:2px; } /* دو ستون */ .ct-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:16px; align-items:start; } .ct-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:20px 22px; box-shadow:var(--e1); } .ct-card h2{ font-size:17px; font-weight:800; color:var(--ink); margin:0 0 10px; line-height:1.7; } .ct-card h3{ font-size:14px; font-weight:800; color:var(--ink); margin:20px 0 9px; line-height:1.7; } .ct-addr{ font-size:14px; line-height:2; color:#4A4F60; margin:0 0 11px; } .ct-copy{ min-height:44px; padding:9px 16px; border-radius:12px; border:1.5px solid var(--line); background:#fff; font-size:13px; font-weight:700; color:var(--pink-text); transition:.18s; } .ct-copy:hover{ border-color:#FFD4EC; background:#FFF8FC; } .ct-copy.done{ border-color:#12B76A; color:#0B7A4B; background:#F1FBF5; } .ct-hours{ width:100%; border-collapse:collapse; } .ct-hours th,.ct-hours td{ padding:9px 0; border-bottom:1px solid var(--hair); font-size:13.5px; text-align:start; } .ct-hours th{ font-weight:700; color:#4A4F60; } .ct-hours td{ color:var(--ink); font-weight:700; text-align:end; } .ct-hours tr:last-child th,.ct-hours tr:last-child td{ border-bottom:0; } .ct-hours .ct-off{ color:#9C3200; } .ct-links{ margin:0; padding:0; display:grid; gap:3px; } .ct-links li{ list-style:none; } .ct-links a{ display:inline-flex; align-items:center; min-height:44px; font-size:13.5px; font-weight:700; color:var(--pink-text); } .ct-links a::before{ content:"›"; margin-inline-end:7px; opacity:.6; } /* فرم */ .ct-form-note{ font-size:13px; line-height:1.95; color:#8C1063; background:#FFF4FA; border:1px solid #FFD9F1; border-radius:12px; padding:11px 13px; margin:0 0 16px; } .ct-form{ display:grid; gap:14px; } .ct-form .fld{ display:grid; gap:6px; } .ct-form label{ font-size:13.5px; font-weight:800; color:var(--ink); } .ct-form input,.ct-form select,.ct-form textarea{ width:100%; min-height:48px; border:1.5px solid var(--line); border-radius:13px; padding:12px 14px; font-family:inherit; font-size:14px; line-height:1.8; background:#fff; color:var(--ink); transition:border-color .2s, box-shadow .2s; } .ct-form textarea{ resize:vertical; min-height:112px; } .ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{ border-color:var(--pink); box-shadow:0 0 0 3px rgba(255,0,163,.12); } .ct-form .fld.bad input,.ct-form .fld.bad textarea{ border-color:#B3261E; } .ct-form .fld.bad input:focus,.ct-form .fld.bad textarea:focus{ box-shadow:0 0 0 3px rgba(179,38,30,.14); } .fld-hint{ margin:0; font-size:12.5px; color:var(--muted); line-height:1.8; } .fld-err{ margin:0; font-size:12.5px; font-weight:700; color:#B3261E; line-height:1.8; } .fld-err::before{ content:"⚠ "; } .ct-submit{ min-height:50px; font-size:14px; } .ct-form-ok{ margin:0; font-size:13.5px; font-weight:700; color:#0B7A4B; background:#F1FBF5; border:1px solid #BFE9D2; border-radius:12px; padding:11px 13px; line-height:1.9; } @media (max-width:860px){ .ct-grid{ grid-template-columns:1fr; } .ct-head h1{ font-size:25px; } .ct-head-av{ width:60px; height:60px; } .ct-head-av svg{ width:46px; } } @media (prefers-reduced-motion: reduce){ .ct-act{ transition:none; } .ct-act:hover{ transform:none; } } /* ===== ui-pass ===== */ /* ══════════════════════════════════════════════════════════════════ پاس رابط کاربری — این شیوه‌نامه آخرین است، پس بدون !important برنده می‌شود. هر بلوک دلیل اندازه‌گیری‌شده‌ی خودش را دارد. ══════════════════════════════════════════════════════════════════ */ /* ── ۱. لوگو: اگر عکس نیاید، نام فروشگاه جای آن را می‌گیرد ───────────── */ .brand{ display:inline-flex; align-items:center; min-width:104px; min-height:44px; } .brand-fallback{ display:none; font-family:var(--font-display); font-size:26px; line-height:1; color:var(--pink); letter-spacing:.5px; } .brand.no-logo .brand-fallback{ display:inline-block; } /* ── ۲ب. باقی‌مانده‌ی کنتراست، هر کدام با انتخابگر دقیق خودش ─────────── */ .promo h3{ color:var(--pink-text); } .mag-meta span,.mag-meta time{ color:var(--muted); } .vopts button,.vopts strong{ color:var(--pink-text); } .vopts button[aria-pressed="true"],#pdpAges button[aria-pressed="true"], .vopts button[aria-pressed="true"] *,#pdpAges button[aria-pressed="true"] *{ color:#fff; } .vopts button[aria-pressed="true"],#pdpAges button[aria-pressed="true"]{ background:var(--pink-ink); border-color:var(--pink-ink); } .sortbar button.on,.sortbar button[aria-pressed="true"]{ background:var(--pink-ink); border-color:var(--pink-ink); color:#fff; } #page-checkout .dot,.ck-step .dot,.steps .dot{ color:var(--pink-text); } #page-checkout .dot.on,.ck-step.on .dot{ background:var(--pink-ink); color:#fff; } .card.prod .chip,.prod .chip,.chip{ color:var(--muted); } .add:disabled,.add[disabled],.add.is-out{ color:#5B6173; background:#E3E6EE; } /* ── ۲. صورتی به‌عنوان متن روی سفید ۳٫۶۳ بود؛ این‌ها به ۵٫۸۶ می‌روند ──── */ .see-all,.seo-more,.fclear,.btn-white,.cmp-alt a,.cmp-chip,.compare-soft-btn, .prod b a,.p-link:hover,.crumb b a,.mag-more,.sec-head .more{ color:var(--pink-text); } .btn-white{ color:var(--pink-text); } .ck-steps .dot{ color:var(--pink-text); } .cmp-chip{ color:var(--pink-text); } /* ── ۳. سفید روی صورتی ۳٫۶۳ بود؛ پس‌زمینه‌ها کمی تیره‌تر تا ۴٫۹۷ ──────── */ .rank,.rank.r1,.rank.r2,.rank.r3,.rank.r4,.rank.r5,.rank.r6, .mag-cat,.new-badge,.cmp-filter.on,.compare-trigger.is-on,.compare-head.is-on, .chip.on,.sort-chip.on{ background:var(--pink-ink); border-color:var(--pink-ink); color:#fff; } .rank.r2,.rank.r3{ background:var(--pink-ink); } .mag-cat.c-parent{ background:#0F7A24; } .mag-cat.c-guide{ background:#1160C2; } .mag-cat.c-edu{ background:#6B44C9; } .mag-cat.c-fun{ background:var(--pink-ink); } .compare-trigger.is-on{ background:linear-gradient(90deg,#D6008A,#C42E96); } /* ── ۴. حلقه‌ی فوکوس: ۱۱ کنترل از ۴۰ تای نمونه هیچ نشانه‌ای نداشتند ───── */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:3px solid #C2007C !important; outline-offset:2px !important; } @supports not selector(:focus-visible){ a:focus,button:focus,input:focus,textarea:focus{ outline:3px solid #C2007C; outline-offset:2px; } } /* ── ۵. هدف‌های لمسی: «افزودن به سبد» روی موبایل ۲۹px بود. !important عمدی است: اینها کف دسترس‌پذیری‌اند و فقط بزرگ می‌کنند، و قاعده‌های موجود با انتخابگر خاص‌تر وگرنه برنده می‌شوند. ───────── */ @media (pointer:coarse), (max-width:640px){ .add,.add-sm,.btn,.compare-trigger,.cmp-chip,.cmp-filter,.cmp-reset, .cart-btn,.burger,.search button,.mm-tab,.fclear,.tabs button,.compare-soft-btn, .sortbar button,.fbtn,.qty-pick button,.qty button,.vopts button,.gal-act, .compare-head,.mnav a,.compare-remove{ min-height:44px !important; } .cart-btn,.burger,.search button,.compare-remove,.gal-act, .qty-pick button,.qty button,.compare-head{ min-width:44px !important; } .fav{ width:44px !important; height:44px !important; } .arrow,.arrows .arrow,.deals .arrow{ width:44px !important; height:44px !important; } .hero-dots{ gap:4px; } .hero-dots button{ min-width:36px !important; height:44px !important; padding-block:18px !important; background-clip:content-box; } /* controls that read as buttons even though they are links */ .see-all,.seo-more,.motion-btn,.soc a,.footer-social a,.socials a,.crumb a, .footer-contact-box a[href^="tel"],.header-support a{ min-height:44px !important; display:inline-flex !important; align-items:center; } .soc a,.footer-social a,.socials a{ min-width:44px !important; min-height:44px !important; display:inline-flex !important; align-items:center; justify-content:center; } input,select,textarea{ min-height:44px; } /* a 16px checkbox is not a touch target — grow the row it sits in */ .filters label,.filters .f-row{ min-height:44px; display:flex; align-items:center; gap:9px; } .filters input[type="checkbox"],.filters input[type="radio"]{ width:20px; height:20px; } } /* ── ۶. هدر موبایل ۱۹۴px بود، پیش از آنکه هیرو شروع شود ──────────────── */ @media (max-width:900px){ .header-row{ flex-wrap:wrap; gap:10px; padding-block:10px; row-gap:9px; } .header-row .brand{ order:1; margin-inline-end:auto; } .header-row .header-actions{ order:2; gap:8px; } .header-row .search{ order:3; flex:1 0 100%; } .header-row .compare-head{ order:2; } .header-actions .btn-ghost{ display:none; } /* ورود در منوی پایین هست */ .header-support{ display:none; } /* شماره‌ها در فوتر و منو تکرار شده‌اند */ } @media (max-width:640px){ .header-row .compare-head span{ display:none; } .header-row{ padding-block:8px; } } /* ── ۷. سه کارت محصول یک زبان بصری بگیرند ─────────────────────────────── اندازه‌گیری پیش از این پاس: کارت تخفیف ۵۰۳px با دکمه‌ی ۲۹px و بدون علاقه‌مندی/مقایسه، کارت تازه‌رسیده ۴۰۸px با دکمه‌ی ۴۰px و هر دو. */ .prod .add,.prod .add-sm,.deal .add,.deal .add-sm, .prod .compare-trigger,.deal .compare-trigger{ min-height:44px; border-radius:var(--r-xs); font-size:13px; } .deal .compare-trigger{ margin-top:8px; } /* عنوان همیشه دو خط جا می‌گیرد، پس قیمت و دکمه در همه‌ی کارت‌های یک ردیف هم‌تراز می‌مانند — پیش از این ارتفاع عنوان بین یک و دو خط می‌رقصید */ .prod > b,.deal > b{ display:block; min-height:48px; margin-block-end:2px; } .deal > b{ font-size:13.5px; line-height:1.7; } .prod > b > .p-link,.deal > b > .p-link{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.75; } .prod .price,.deal .price{ font-weight:800; } .new-badge,.rank,.off{ font-weight:800; letter-spacing:0; } /* ── ۸. برچسب کارت‌های دسته: ۱۰px و ۳٫۴۸ بود ─────────────────────────── */ .card.cat span,.card.cat small,.cat .sub{ font-size:12px; color:var(--muted); } /* ── ۹. ریسپانسیو: هیچ‌چیز از قاب بیرون نزند ─────────────────────────── */ img,svg,video{ max-width:100%; } .cmp-table-wrap,.table-wrap{ max-width:100%; } @media (max-width:400px){ .container{ padding-inline:14px; } .cmp-picker-grid{ grid-template-columns:1fr; } } /* ===== final-responsive-fixes ===== */ a.is-placeholder-link[aria-disabled="true"]{ cursor:not-allowed; } @media(max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr; } } @media(max-width:480px){ .foot-grid{ grid-template-columns:1fr; } } /* ═══════════════════════════════════════════════════════════════════════ bazidan-v2-fixes — layered on top of the supplied design. Nothing here restyles the storefront; it completes the pieces that only show up once real WooCommerce data and a real WordPress menu arrive. ═══════════════════════════════════════════════════════════════════════ */ /* ── card tokens ───────────────────────────────────────────────────────── */ :root{ --card-radius: 22px; --card-pad: 14px; --card-gap: 8px; --card-media-radius: 16px; --card-line: rgba(35,37,47,.07); --card-rest: 0 12px 30px rgba(108,45,170,.07); --card-lift: 0 22px 48px rgba(113,59,205,.16); --focus-ring: 0 0 0 3px #fff, 0 0 0 6px var(--pink, #ff00a3); --ok: #007017; --warn: #8a5b00; --danger: #c8003f; } /* ── real WooCommerce photography inside the artwork plates ────────────── */ .product-real-image{ width:100%; height:100%; object-fit:contain; display:block; } .prod-img .product-real-image{ padding:10px; } .deal-img .product-real-image{ padding:8px; } .gal-big .pdp-real-image{ width:100%; height:100%; object-fit:contain; padding:18px; } .gal-thumbs .pdp-thumb-real{ width:100%; height:100%; object-fit:contain; } /* ══════════════════ PRODUCT CARD ══════════════════ One component, three variants (.prod, .deal, ranked) and seven states. Every slot reserves its height so cards in a row line up whatever the product data happens to contain. */ .prod, .deal{ position:relative; } /* media ------------------------------------------------------------------ */ .prod-img, .deal-img{ position:relative; overflow:hidden; border-radius:var(--card-media-radius); } /* badges: never colour alone — each one carries its own text ------------- */ .prod .new-badge, .deal .off{ z-index:2; } .prod .rank{ z-index:2; } /* title: always two lines tall, so the rows below never shift ------------ */ .prod b, .deal b{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:calc(2 * 1.75em); } .prod .chip, .deal .chip{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* rating: one line, and an equal-height blank when nobody has rated yet --- */ .prod .rate, .deal .rate{ white-space:nowrap; min-height:24px; } .rate.rate-empty{ display:block; min-height:24px; } /* price ------------------------------------------------------------------ */ .price-old{ font-size:12px; color:var(--muted, #5b6173); text-decoration:line-through; } .prod .price-old, .deal .price-old{ min-height:19px; } .prod .price-row, .deal .price-row{ display:flex; flex-direction:column; min-height:44px; justify-content:flex-end; } /* stock hint: a state, not an afterthought ------------------------------- */ .stock-hint{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:700; min-height:18px; line-height:18px; } .stock-hint::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; } .stock-hint.is-ok { color:var(--ok); } .stock-hint.is-low { color:var(--warn); } .stock-hint.is-out { color:var(--danger); } .stock-hint.is-empty { visibility:hidden; } /* actions: the buy button always sits on the card floor ------------------ */ .prod .add, .deal .add, .prod .add-sm, .deal .add-sm, .prod .buy-row{ margin-top:auto; } .prod .add ~ .compare-trigger, .deal .add ~ .compare-trigger, .prod .buy-row ~ .compare-trigger{ margin-top:8px; } /* quantity stepper — sits beside the quick-buy button on in-stock cards -- */ .buy-row{ display:flex; align-items:center; gap:6px; } .buy-row .add{ flex:1; margin-top:0; } .qty-step{ display:flex; align-items:center; flex:none; border:1.5px solid #E7E9F2; border-radius:999px; background:#fff; overflow:hidden; } .qty-step button{ width:28px; height:32px; flex:none; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:var(--ink,#232535); background:none; line-height:1; transition:background .15s ease; } .qty-step button:hover{ background:#F5F6FB; } .qty-step button:active{ background:#ECEEF6; } .qty-step .qty-input{ width:30px; height:32px; border:0; border-inline:1px solid #E7E9F2; text-align:center; font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--ink,#232535); background:transparent; -moz-appearance:textfield; } .qty-step .qty-input::-webkit-outer-spin-button, .qty-step .qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } @media (max-width:480px){ .qty-step button{ width:26px; height:34px; } .qty-step .qty-input{ width:26px; height:34px; } } /* ===== variant-picker (model-picker popup) ===== */ html.vp-open{ overflow:hidden; } .vp-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:flex-end; justify-content:center; } @media (min-width:640px){ .vp-modal{ align-items:center; } } .vp-scrim{ position:absolute; inset:0; background:rgba(20,10,30,.5); backdrop-filter:blur(2px); } .vp-sheet{ position:relative; z-index:1; width:100%; max-width:420px; max-height:90vh; overflow:auto; background:#fff; border-radius:22px 22px 0 0; padding:20px 20px 18px; box-shadow:0 -10px 40px rgba(30,10,40,.18); animation:vpUp .25s cubic-bezier(.2,.8,.2,1); } @media (min-width:640px){ .vp-sheet{ border-radius:22px; margin:20px; } } @keyframes vpUp{ from{ transform:translateY(24px); opacity:0; } to{ transform:none; opacity:1; } } .vp-sheet.vp-shake{ animation:vpShake .38s ease; } @keyframes vpShake{ 10%,90%{ transform:translateX(-2px); } 20%,80%{ transform:translateX(4px); } 30%,50%,70%{ transform:translateX(-7px); } 40%,60%{ transform:translateX(7px); } } .vp-close{ position:absolute; top:14px; inset-inline-end:14px; width:32px; height:32px; border-radius:50%; background:#F5F6FB; color:var(--ink,#23252F); display:grid; place-items:center; } .vp-close svg{ width:16px; height:16px; } .vp-head{ display:flex; align-items:center; gap:12px; padding-inline-end:40px; } .vp-thumb{ width:64px; height:64px; flex:none; border-radius:14px; overflow:hidden; background:#F5F6FB; } .vp-thumb img{ width:100%; height:100%; object-fit:contain; } .vp-info{ display:flex; flex-direction:column; gap:4px; min-width:0; } .vp-info b{ font-size:14.5px; font-weight:700; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .vp-price{ font-size:17px; font-weight:800; color:var(--pink); font-variant-numeric:tabular-nums; } .vp-price .cur{ font-size:12px; font-weight:600; color:var(--muted); } .vp-price .vp-old{ font-size:12.5px; font-weight:600; color:var(--muted); text-decoration:line-through; margin-inline-end:4px; } .vp-stock{ font-size:12px; font-weight:700; min-height:16px; } .vp-stock.is-ok{ color:var(--ok); } .vp-stock.is-low{ color:var(--warn); } .vp-stock.is-out{ color:var(--danger); } .vp-attrs{ display:flex; flex-direction:column; gap:12px; margin-top:18px; } .vp-field{ display:flex; flex-direction:column; gap:6px; } .vp-field > span{ font-size:12.5px; font-weight:700; color:var(--ink,#23252F); } .vp-field select{ height:44px; border:1.5px solid #E7E9F2; border-radius:12px; padding:0 14px; font-size:13.5px; font-family:inherit; background:#fff; color:var(--ink,#23252F); } .vp-field select.is-missing{ border-color:var(--danger,#e5484d); } .vp-warn{ margin:10px 0 0; padding:9px 12px; border-radius:10px; background:#FFF1F1; color:var(--danger,#e5484d); font-size:12.5px; font-weight:700; text-align:center; } .vp-foot{ display:flex; align-items:center; gap:10px; margin-top:18px; } .vp-foot .vp-add{ flex:1; margin-top:0; padding:12px; } .vp-foot .vp-add:disabled{ opacity:.55; } /* ── states ───────────────────────────────────────────────────────────── default · hover · focus-visible · sale · low stock · out of stock · needs options · busy · added */ .prod:hover, .deal:hover{ box-shadow:var(--card-lift); } /* one visible focus ring for the whole card, wherever focus lands */ .prod:focus-within, .deal:focus-within{ box-shadow:var(--card-lift); } .prod a:focus-visible, .deal a:focus-visible, .prod button:focus-visible, .deal button:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:12px; } /* out of stock: the whole card steps back, the action says why */ .prod.is-out .prod-img, .deal.is-out .deal-img{ filter:grayscale(.55); opacity:.8; } .prod.is-out .add, .deal.is-out .add, .prod.is-out .add-sm, .deal.is-out .add-sm{ background:#e3e6ee !important; color:#5b6173 !important; box-shadow:none !important; cursor:not-allowed; transform:none !important; } /* needs options: a link to the product page, styled as a quieter button */ .add.product-options-link{ display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; background:#fff !important; color:var(--pink-dark, #b00371) !important; border:1.5px solid #ffc4ea; box-shadow:none !important; } .add.product-options-link:hover{ background:#fff3fa !important; } /* busy / added: feedback on the button itself, not only in a toast */ .add.is-busy{ pointer-events:none; opacity:.75; } .add.is-busy::after{ content:""; width:14px; height:14px; margin-inline-start:6px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:bz-spin .6s linear infinite; } @keyframes bz-spin{ to{ transform:rotate(360deg); } } .add.is-added{ background:var(--ok) !important; } @media (prefers-reduced-motion: reduce){ .add.is-busy::after{ animation-duration:2s; } .prod, .deal{ transition:none !important; } } /* ══════════════════ MAIN MENU ══════════════════ The design shipped a flat four-link nav. A real WordPress menu has more items and children, which used to be truncated and dumped inline. */ .nav-links{ overflow:visible; flex-wrap:wrap; row-gap:4px; } /* the design hid everything past the fourth link; a real menu needs them all */ .nav-links li:nth-child(n+5){ display:list-item; } .nav-links li{ position:relative; } .nav-links .menu-item-has-children > a{ display:inline-flex; align-items:center; gap:5px; } .nav-links .menu-item-has-children > a::after{ content:""; width:6px; height:6px; flex:none; border-inline-end:2px solid currentColor; border-block-end:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .2s ease; } .nav-links .menu-item-has-children.is-open > a::after{ transform:rotate(-135deg) translateY(-2px); } .nav-links .sub-menu{ position:absolute; top:100%; inset-inline-start:0; z-index:120; min-width:210px; margin:0; padding:8px; list-style:none; background:#fff; border:1px solid var(--card-line); border-radius:16px; box-shadow:0 18px 44px rgba(35,37,47,.16); opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease, visibility .18s; } .nav-links .sub-menu.flip{ inset-inline-start:auto; inset-inline-end:0; } .nav-links li:hover > .sub-menu, .nav-links li:focus-within > .sub-menu, .nav-links li.is-open > .sub-menu{ opacity:1; visibility:visible; transform:none; } .nav-links .sub-menu li{ margin:0; } .nav-links .sub-menu a{ display:block; padding:9px 12px; border-radius:10px; font-size:13px; line-height:22px; white-space:normal; } .nav-links .sub-menu a:hover, .nav-links .sub-menu a:focus-visible{ background:#fff0f9; color:var(--pink-dark, #b00371); } /* a third level flies out to the side */ .nav-links .sub-menu .sub-menu{ top:-8px; inset-inline-start:100%; } .nav-links .sub-menu .sub-menu.flip{ inset-inline-start:auto; inset-inline-end:100%; } @media (max-width:900px){ /* no hover to rely on: the nav scrolls and submenus open in place */ .nav-links{ flex-wrap:nowrap; overflow-x:auto; overflow-y:visible; scrollbar-width:none; } .nav-links::-webkit-scrollbar{ display:none; } .nav-links .sub-menu{ position:fixed; inset-inline:12px; top:auto; min-width:0; max-height:60vh; overflow:auto; } .nav-links .sub-menu .sub-menu{ position:static; box-shadow:none; border:0; padding-inline-start:12px; } } /* ══════════════════ TOUCH TARGETS ══════════════════ */ @media (pointer: coarse){ .prod b, .deal b{ position:relative; } .p-link::after{ content:""; position:absolute; inset-inline:0; top:50%; height:44px; transform:translateY(-50%); z-index:1; } .fav, .gal-act, .arrow, .hero-arr{ min-width:44px; min-height:44px; } .nav-links a{ min-height:44px; display:inline-flex; align-items:center; } .head-tools > * + *, .buy-actions > * + *{ margin-inline-start:8px; } } /* ══════════════════ UTILITIES ══════════════════ */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* an emptied row keeps its band; only genuinely empty sections collapse */ section[hidden], .band[hidden]{ display:none !important; } /* ===== header/logo hardening ===== */ .site-header .brand{max-width:200px;min-height:48px;} .site-header .brand > .brand-logo-img{ display:block !important; width:auto !important; height:auto !important; max-width:180px !important; max-height:48px !important; object-fit:contain !important; flex:0 1 auto; } .site-header .brand.no-logo > .brand-logo-img{display:none !important;} body.admin-bar .site-header{top:32px;} @media (max-width:900px){ .site-header .brand{max-width:150px;min-width:0;} .site-header .brand > .brand-logo-img{max-width:140px !important;max-height:40px !important;} } @media (max-width:782px){body.admin-bar .site-header{top:46px;}} @media (max-width:600px){body.admin-bar .site-header{top:0;}} /* ===== v2.2.4 — live blog cards + mobile hardening ===== */ .mag-link{display:block;height:100%;color:inherit;text-decoration:none;} .mag-img.has-cover{background:#f4f6fb;} .mag-img.has-cover>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;} .mag:hover .mag-img.has-cover>img{transform:scale(1.035);} .mag-empty{grid-column:1/-1;padding:28px 18px;text-align:center;border:1px dashed var(--line);border-radius:20px;background:#fff;color:var(--muted);} /* Phones need a compact, single-purpose layout. These rules intentionally sit at the very end so older experimental media queries cannot win afterwards. */ @media (max-width:820px){ html{scroll-padding-top:112px;} .container{padding-inline:12px;} .section{margin-block:26px;} .band{margin-block:28px;padding-block:42px;} .site-header{position:sticky;top:0;} .header-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px!important;padding-block:8px!important;} .header-row .brand{order:initial!important;grid-column:1;grid-row:1;margin:0!important;min-width:0;max-width:145px!important;} .header-row .brand>.brand-logo-img{max-width:138px!important;max-height:38px!important;} .header-row .header-actions{order:initial!important;grid-column:2;grid-row:1;gap:5px!important;justify-self:end;} .header-row .compare-head{display:none!important;} .header-row .search{order:initial!important;grid-column:1/-1;grid-row:2;width:100%;} .search input{height:44px;padding-inline:15px 50px;font-size:14px;} .search button{width:36px;height:36px;top:4px;inset-inline-end:4px;} .header-actions .cart-btn,.header-actions .burger{width:42px;height:42px;min-width:42px!important;min-height:42px!important;} .hero-grid{grid-template-columns:1fr!important;gap:10px;min-height:0;} .hero-main{order:-1;min-height:250px;padding:20px!important;--hero-pad:20px;border-radius:22px;} .hero-main h1,.hero-main .hero-h{font-size:clamp(25px,7vw,31px);line-height:1.35;max-width:58%;} .hero-main .lead{font-size:12.5px;line-height:1.8;max-width:55%;margin-top:7px;} .hero-main .btn{margin-top:16px;padding:10px 18px;font-size:13px;} .hero-dots{bottom:10px!important;} .hero-side{grid-template-columns:1fr 1fr!important;grid-template-rows:none!important;gap:10px;} .hero-side>.poster{min-height:110px!important;aspect-ratio:16/9!important;border-radius:18px;} .gift-cta{margin-block:18px;padding:20px 16px!important;border-radius:22px;gap:12px!important;} .gift-cta .gc-art{width:68px!important;} .gift-cta .gc-art>.dani{width:68px!important;} .gift-cta .gc-t{min-width:0;flex:1 1 180px;} .gift-cta .gc-t b{font-size:24px!important;line-height:1.3;} .sec-head{align-items:flex-start;margin-bottom:14px;gap:10px;} .sec-head h2{font-size:24px;line-height:1.45;} .sec-head .sub{font-size:12.5px;margin-top:2px;} .head-tools{margin-inline-start:auto;} .see-all{font-size:12.5px;} .cats{grid-auto-columns:min(38vw,142px)!important;gap:9px;} .cat{padding:10px 6px;} .cat svg,.cat-media{width:52px;height:52px;} #deals .deals{padding-inline:10px!important;border-radius:22px;} #deals .deals-row{scroll-padding-inline:8px;} #deals .deal-promo,#deals .deal{flex-basis:min(64vw,190px)!important;min-width:min(64vw,190px);} #start-here .starts{gap:12px!important;} #start-here .start-caption b{font-size:19px!important;} .mosaic{gap:10px;} .m-row{gap:10px;} .m-row-1 .banner,.m-row-2 .banner,.m-row-3 .banner{min-height:155px;border-radius:20px;} .banner .txt{padding:18px!important;} .banner .txt h3{font-size:20px!important;line-height:1.45;} .banner .txt p{font-size:12px!important;} .whys{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;} .why-band .why{padding:12px 6px;} .why-band .why .ic{width:52px;height:52px;border-radius:16px;} .why-band .why b{font-size:13px;} .why-band .why span{font-size:11.5px;} #new{padding-block:58px 44px!important;} #new .news-row{padding-inline:12px!important;scroll-padding-inline:12px;} #new .news-row>.prod{flex:0 0 min(58vw,176px)!important;min-width:min(58vw,176px);margin-inline:4px!important;} .best{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px;} .best .prod{min-width:0;} .band-c .mags{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;} .band-c .mag-img{height:120px!important;margin:8px 8px 0;} .band-c .mag-body{padding:10px 9px 12px!important;} .band-c .mag-body b{font-size:12.5px!important;min-height:3.6em;} .mag-meta{gap:7px;flex-wrap:wrap;margin-top:8px;font-size:11px;} .mag-cat{top:7px;inset-inline-end:7px;font-size:10.5px;padding:3px 8px;} .foot-grid{gap:20px!important;} .nl form{flex-direction:column;} .nl form .btn{width:100%;} .foot-bottom{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px));} .mnav{padding-bottom:calc(7px + env(safe-area-inset-bottom,0px));} .to-top{bottom:calc(82px + env(safe-area-inset-bottom,0px));} } @media (max-width:560px){ .container{padding-inline:10px;} .hero-main{min-height:232px;padding:18px!important;} .hero-main h1,.hero-main .hero-h{max-width:68%;font-size:25px;} .hero-main .lead{max-width:67%;font-size:12px;} .hero-side{grid-template-columns:1fr!important;} .hero-side>.poster{aspect-ratio:16/7!important;min-height:104px!important;} .gift-cta .gc-action{width:100%;} #giftOpen{width:100%;} .sec-head{flex-direction:column;} .head-tools{margin-inline-start:0;width:100%;display:flex;justify-content:space-between;align-items:center;} .head-tools .arrows{margin-inline-start:auto;} .m-row-1 .banner,.m-row-2 .banner,.m-row-3 .banner{min-height:145px;} .banner .txt h3{font-size:18px!important;} .best{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .band-c .mags{grid-template-columns:1fr!important;} .band-c .mag{display:grid;grid-template-columns:125px minmax(0,1fr);} .band-c .mag-link{display:contents;} .band-c .mag-img{height:112px!important;margin:8px;border-radius:14px;} .band-c .mag-body{align-self:center;padding:10px 10px 10px 0!important;} .band-c .mag-body b{font-size:13px!important;} } @media (max-width:380px){ .header-row .brand{max-width:118px!important;} .header-row .brand>.brand-logo-img{max-width:112px!important;max-height:34px!important;} .header-actions .fav-btn{display:none;} .hero-main h1,.hero-main .hero-h{max-width:72%;font-size:23px;} .best{grid-template-columns:1fr!important;} .best .prod{max-width:280px;margin-inline:auto;width:100%;} .whys{grid-template-columns:1fr 1fr!important;} } /* ===== v2.2.5 — why-us visibility hardening ===== */ /* Never let the trust/why-us cards disappear because another script fails before IntersectionObserver runs. */ .why-band:not(.why-motion-ready) .why{opacity:1!important;transform:none!important;} /* ===== v2.4.1 — reliable purchase + always-visible comparison ===== */ /* The previous mobile hardening explicitly hid comparison in the header. Keep the compact icon instead; it is a primary shopping action, not decoration. */ @media (max-width:820px){ .header-row{grid-template-columns:minmax(0,1fr) auto auto!important;} .header-row .brand{grid-column:1!important;grid-row:1!important;} .header-row .compare-head{ display:inline-flex!important;grid-column:2!important;grid-row:1!important; width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important; padding:0!important;margin:0!important;align-items:center;justify-content:center; border-radius:13px; } .header-row .compare-head span{display:none!important;} .header-row .compare-head svg{width:20px;height:20px;} .header-row .header-actions{grid-column:3!important;grid-row:1!important;} .header-row .search{grid-column:1/-1!important;grid-row:2!important;} } @media (max-width:430px){ .header-actions .fav-btn{display:none!important;} } /* Comparison is now part of the card's base markup, so reserve its slot and keep it legible on narrow cards as well. */ .prod .compare-trigger,.deal .compare-trigger{ display:inline-flex!important;visibility:visible!important;opacity:1!important; width:100%;min-height:42px;position:relative;z-index:2; } @media (max-width:560px){ .prod .compare-trigger,.deal .compare-trigger{font-size:12px;padding:9px 8px;gap:6px;} .prod .compare-trigger svg,.deal .compare-trigger svg{width:15px;height:15px;} } /* Clear success/error feedback for the purchase action. */ .add.is-added{color:#fff!important;} .add[aria-busy="true"]{cursor:progress;} /* ===== v2.4.3 — cart icon reliability ===== */ /* cart controls are anchors now: keep the old button appearance while ensuring they always stay above decorative header layers and accept pointer input. */ #cartBtn,#mnavCart{cursor:pointer;pointer-events:auto;} #cartBtn{z-index:4;text-decoration:none;} /* Per-widget entrance effects. No element is hidden unless an effect is selected. */ .bz-widget-animated{opacity:0;animation-name:none!important;} .bz-widget-animated.bz-widget-entered{ animation-name:var(--bz-widget-animation)!important; animation-duration:var(--bz-widget-duration,700ms)!important; animation-delay:var(--bz-widget-delay,0ms)!important; animation-timing-function:cubic-bezier(.2,.75,.25,1)!important; animation-fill-mode:both!important; } @keyframes bzWidgetFade{from{opacity:0}to{opacity:1}} @keyframes bzWidgetFadeUp{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:translate3d(0,0,0)}} @keyframes bzWidgetFadeDown{from{opacity:0;transform:translate3d(0,-28px,0)}to{opacity:1;transform:translate3d(0,0,0)}} @keyframes bzWidgetSlideLeft{from{opacity:0;transform:translate3d(32px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}} @keyframes bzWidgetSlideRight{from{opacity:0;transform:translate3d(-32px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}} @keyframes bzWidgetZoomIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}} @keyframes bzWidgetRotateIn{from{opacity:0;transform:rotate(-4deg) scale(.96)}to{opacity:1;transform:rotate(0) scale(1)}} @keyframes bzWidgetBounce{0%{opacity:0;transform:translate3d(0,24px,0) scale(.97)}70%{opacity:1;transform:translate3d(0,-5px,0) scale(1.01)}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}} @media(prefers-reduced-motion:reduce){ .bz-widget-animated,.bz-widget-animated.bz-widget-entered{opacity:1!important;animation:none!important;transform:none!important;} } /* v2.4.28: stable shoppable cards, whole images and controls outside the rail. */ #newRow,#bestRow,#dealsRow{display:flex!important;align-items:stretch!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;perspective:none!important;gap:12px!important} #newRow .prod,#bestRow .prod,#dealsRow .deal{transform:none!important;opacity:1!important;animation:none!important;flex-shrink:0;display:flex;flex-direction:column;min-width:0;scroll-snap-align:start} .prod-img,.deal-img{overflow:hidden!important;display:grid;place-items:center;aspect-ratio:1!important;height:auto!important;min-height:0!important;background:#fff!important} .prod-img img,.deal-img img{display:block!important;position:static!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;transform:none!important;clip-path:none!important;border-radius:0!important} .prod .add,.deal .add{position:relative!important;z-index:3;pointer-events:auto!important;min-height:44px;display:flex;align-items:center;justify-content:center;text-decoration:none;margin-top:auto!important} .prod:before,.prod:after,.deal:before,.deal:after{pointer-events:none!important} #deals .arrow{top:auto!important;bottom:4px!important;transform:none!important;inset-inline-start:auto;inset-inline-end:auto} #deals .deals{padding-bottom:50px!important}.bz-cart-feedback{font-size:11px;line-height:1.8;margin:6px 0;color:#245447}.bz-cart-feedback:empty{display:none} @media(max-width:700px){ #newRow .prod,#bestRow .prod,#dealsRow .deal,#dealsRow .deal-promo{flex:0 0 164px!important;width:164px!important;min-height:0!important;height:auto!important;border-radius:14px!important;padding:9px!important;margin:0!important} #newRow,#bestRow,#dealsRow{gap:10px!important;padding:6px 3px 14px!important} #newRow .prod-img,#bestRow .prod-img,#dealsRow .deal-img{width:100%!important;height:144px!important;aspect-ratio:auto!important} .prod b,.deal b{font-size:12px!important;line-height:1.7!important;min-height:40px!important;overflow-wrap:anywhere} .prod .add,.deal .add{font-size:11px!important;padding:9px 5px!important;white-space:normal!important} .arrow[data-t]{display:none!important}#deals .deals{padding:20px 10px!important} .prod .price,.deal .price{font-size:13px!important}.prod .compare-trigger,.deal .compare-trigger{font-size:10px!important} body{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))!important}.mnav{bottom:0!important}.section-head{flex-wrap:wrap;gap:10px}.section-head h2{max-width:100%;overflow-wrap:anywhere} } .prod-img,.deal-img{border-radius:12px!important}.prod .prod-img>.art,.deal .deal-img>.art{max-width:100%!important;max-height:100%!important;object-fit:contain!important;transform:none!important} @media(max-width:700px){#newRow .prod,#bestRow .prod,#dealsRow .deal{gap:4px!important}.prod .rate-empty,.deal .rate-empty{display:none!important}.prod .chip,.deal .chip{font-size:10px!important;padding:1px 7px!important}.prod-img:before,.prod-img:after,.deal-img:before,.deal-img:after{display:none!important}#newRow .prod-img,#bestRow .prod-img,#dealsRow .deal-img{height:136px!important}} /* ===== v2.4.29 — bestsellers rail: cards had no width above 700px ===== */ /* v2.4.28 turned #bestRow into a flex rail but only gave its cards a width under 700px. Above that, each card sized itself to the product photo's natural width, so one card filled the whole row with a giant image. Give every card an explicit width at every breakpoint. */ #bestRow{scrollbar-width:thin;scrollbar-color:#f3b6dc transparent;padding-bottom:10px} #bestRow::-webkit-scrollbar{height:6px} #bestRow::-webkit-scrollbar-thumb{background:#f3b6dc;border-radius:99px} #bestRow::-webkit-scrollbar-track{background:transparent} #bestRow>.prod{flex:0 0 calc((100% - 5*12px)/6)!important;width:calc((100% - 5*12px)/6)!important;max-width:none!important;margin:0!important} #bestRow>.prod .prod-img{width:100%!important;aspect-ratio:1!important;height:auto!important} #bestRow>.prod .prod-img img,#bestRow>.prod .prod-img>.art{width:100%!important;height:100%!important;object-fit:contain!important} @media(max-width:1200px){#bestRow>.prod{flex-basis:calc((100% - 4*12px)/5)!important;width:calc((100% - 4*12px)/5)!important}} @media(max-width:1024px){#bestRow>.prod{flex-basis:calc((100% - 3*12px)/4)!important;width:calc((100% - 3*12px)/4)!important}} @media(max-width:860px){#bestRow>.prod{flex-basis:calc((100% - 2*12px)/3)!important;width:calc((100% - 2*12px)/3)!important}} @media(max-width:700px){ #bestRow>.prod{flex:0 0 164px!important;width:164px!important} } /* ===== v2.4.30 — mobile polish: search, hero, header icons, deal arrows, 1:1 product images ===== */ /* 1) Search: the touch-target floor (min-height:44px) made the 36px button taller than the 44px input, so it hung out of the pill. The input is the big target; the button sits inside it, vertically centred. */ .header-row .search{position:relative} .header-row .search input{height:48px!important} .header-row .search button{ top:50%!important;bottom:auto!important;inset-inline-end:5px!important; width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important; transform:translateY(-50%)!important;margin:0!important;padding:0!important} .header-row .search button:hover{transform:translateY(-50%) scale(1.06)!important} /* 2) Header icons: compare / cart / menu were a square, a circle and a bordered square. One size, one shape, one gap. */ @media (max-width:820px){ .header-row{column-gap:8px!important} .header-row .header-actions{gap:8px!important} .header-row .compare-head, .header-row .header-actions #cartBtn, .header-row .header-actions .burger{ width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important; border-radius:14px!important;padding:0!important;display:inline-grid!important;place-items:center} .header-row .compare-head{background:#FFF0F9!important;color:var(--pink-dark)!important;border:1px solid #FFD6EE!important} .header-row .header-actions .burger{background:#fff!important;border:1px solid var(--line)!important} .header-row .header-actions .fav-btn{ width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important; border-radius:14px!important;padding:0!important;place-items:center; background:#FFF0F9!important;color:var(--pink-dark)!important;border:1px solid #FFD6EE!important;box-shadow:none!important} .header-row .header-actions .fav-btn svg{width:21px!important;height:21px!important} .header-row .header-actions #cartBtn{box-shadow:0 5px 12px rgba(214,0,138,.22)!important} .header-row .compare-head svg, .header-row .header-actions #cartBtn svg, .header-row .header-actions .burger svg{width:21px!important;height:21px!important} } /* 3) Hero dots: the touch rule set height:44px with a clipped background, but `.hero-dots button.on{background:#fff}` resets background-clip, so the active dot became a big white oval. Keep the tall hit area, paint a pill. */ @media (pointer:coarse),(max-width:640px){ .hero-dots{gap:0!important} .hero-dots button{ box-sizing:content-box!important;min-width:0!important;min-height:0!important; width:8px!important;height:8px!important;padding:0!important; border:10px solid transparent!important;background-clip:padding-box!important} .hero-dots button.on{width:24px!important} } /* 4) Hero on phones/tablets: keep the desktop banner's proportions so the picture is not cropped into a tall box. Ratio can be overridden with --bz-hero-ratio (e.g. on .hero-main) if the banners are drawn differently. */ @media (max-width:820px){ .hero-main{ min-height:0!important;height:auto!important; aspect-ratio:var(--bz-hero-ratio,5/2); padding:clamp(12px,3.2vw,22px)!important;--hero-pad:clamp(12px,3.2vw,22px); border-radius:18px!important} .hero-main .hero-slides,.hero-main .hero-slide{height:100%} .hero-main .hero-slide{justify-content:center!important;gap:0} .hero-main .hero-img{border-radius:18px!important} .hero-main h1,.hero-main .hero-h{font-size:clamp(16px,4.6vw,28px)!important;line-height:1.45!important;max-width:62%!important} .hero-main .lead{font-size:clamp(11px,2.4vw,14px)!important;line-height:1.7!important;max-width:58%!important;margin-top:4px!important} .hero-main .btn{margin-top:clamp(6px,1.8vw,14px)!important;padding:6px 14px!important;font-size:12px!important;min-height:34px!important;align-self:flex-start} .hero-dots{bottom:2px!important} } @media (max-width:560px){ .hero-main .lead{display:none!important} .hero-main .btn{min-height:32px!important;padding:5px 12px!important;font-size:11.5px!important} } /* 5) Deals arrows: prev/next were both reset to the same corner (desktop) or dropped onto the middle of the cards (mobile). Put them side by side, centred, in their own strip under the rail — clear of every card. */ #deals .deals{position:relative;padding-bottom:70px!important} #deals .arrow{ display:grid!important;place-items:center;position:absolute!important; top:auto!important;bottom:14px!important;transform:none!important;translate:none!important; width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important; inset-inline-start:auto!important;inset-inline-end:auto!important; left:auto!important;right:auto!important;margin:0!important;z-index:9} #deals .arrow.prev{right:calc(50% + 6px)!important} #deals .arrow.next{left:calc(50% + 6px)!important} #deals .arrow:hover{transform:scale(1.08)!important} @media (max-width:700px){#deals .deals{padding-bottom:66px!important}} /* 6) Product images are 1:1 everywhere — every carousel, every breakpoint. The mobile rules forced a fixed 136–144px height on a ~155px-wide box and "Tazeh Resideh" used 1/.84, so square photos lost their top/bottom. Decorative shelf/shadow layers are dropped when a real photo is shown, because they sat on top of the bottom of the photo. */ .prod-img,.deal-img, #newRow .prod-img,#bestRow .prod-img,#dealsRow .deal-img, #new .news-row>.prod .prod-img,#deals .deal-img{ width:100%!important;height:auto!important;min-height:0!important;max-height:none!important; aspect-ratio:1/1!important;flex:none!important} .prod-img:has(.product-real-image),.deal-img:has(.product-real-image), .prod[data-cat] .prod-img:has(.product-real-image),.deal[data-cat] .deal-img:has(.product-real-image){ padding:0!important;place-items:center!important;background:#fff!important;background-image:none!important} .prod-img:has(.product-real-image)::before,.prod-img:has(.product-real-image)::after, .deal-img:has(.product-real-image)::before,.deal-img:has(.product-real-image)::after{display:none!important} .prod-img .product-real-image,.deal-img .product-real-image{ position:static!important;width:100%!important;height:100%!important; max-width:100%!important;max-height:100%!important;padding:6px!important; object-fit:contain!important;object-position:center!important;transform:none!important} /* ===== v2.4.31 — mobile menu drawer, 6 "why" cards with touch effects, start-here cards ===== */ /* 1) Mobile menu drawer (built by nav.js from the header's own links) */ html.bz-mmenu-open,html.bz-mmenu-open body{overflow:hidden} .bz-mmenu-scrim{position:fixed;inset:0;z-index:990;background:rgba(40,6,34,.45); -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .28s ease} .bz-mmenu-scrim.on{opacity:1} .bz-mmenu{position:fixed;top:0;bottom:0;inset-inline-start:0;z-index:991;width:min(340px,86vw); display:flex;flex-direction:column;background:#fff;box-shadow:0 0 50px rgba(40,6,34,.25); border-start-end-radius:22px;border-end-end-radius:22px; transform:translateX(105%);transition:transform .32s cubic-bezier(.22,.7,.25,1)} html:not([dir="rtl"]) .bz-mmenu{transform:translateX(-105%)} .bz-mmenu.on{transform:none!important} .bz-mmenu-head{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:14px 16px;border-bottom:1px solid var(--line);flex:none} .bz-mmenu-head b{font-size:16px;font-weight:900;color:var(--ink)} .bz-mmenu-close{width:40px;height:40px;min-width:40px!important;min-height:40px!important;border-radius:12px; display:grid;place-items:center;background:#FFF0F9;color:var(--pink-dark)} .bz-mmenu-close svg{width:20px;height:20px} .bz-mmenu-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px 14px 20px} .bz-mmenu-quick{display:grid;gap:8px;margin-bottom:16px} .bz-mq{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;border-radius:14px; background:#F7F8FB;border:1px solid var(--line);color:var(--ink);font-weight:800;font-size:14px;text-decoration:none} .bz-mq svg{width:20px;height:20px;flex:none;color:var(--pink-dark)} .bz-mq.bz-mq-ai{background:var(--grad-btn);border-color:transparent;color:#fff;box-shadow:0 8px 18px rgba(214,0,138,.25)} .bz-mq.bz-mq-ai svg{color:#fff} .bz-mmenu-sec{margin-top:6px} .bz-mmenu-sec+.bz-mmenu-sec{margin-top:18px} .bz-mmenu-sec h4{margin:0 0 8px;padding-inline:4px;font-size:12.5px;font-weight:800;color:var(--muted)} .bz-mmenu-sec ul{list-style:none;margin:0;padding:0;display:grid;gap:4px} .bz-mm-cat,.bz-mm-link{display:flex;align-items:center;gap:10px;min-height:46px;padding:6px 10px;border-radius:12px; color:var(--ink);font-size:14px;font-weight:700;text-decoration:none} .bz-mm-cat:active,.bz-mm-link:active,.bz-mm-cat:hover,.bz-mm-link:hover{background:#FFF3FA;color:var(--pink-dark)} .bz-ml{flex:1;min-width:0} .bz-mm-ic{width:34px;height:34px;flex:none;border-radius:10px;background:#FFF0F9;display:grid;place-items:center} .bz-mm-ic svg{width:26px;height:26px} .bz-mm-cat>svg{width:16px;height:16px;flex:none;color:var(--muted)} .bz-mm-sub{padding-inline-start:14px!important;margin-top:2px!important} .bz-mm-sub .bz-mm-link{min-height:40px;font-size:13px;font-weight:600;color:#4a4f60} .bz-mmenu-foot{flex:none;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)} @media (min-width:821px){.bz-mmenu,.bz-mmenu-scrim{display:none!important}} @media (prefers-reduced-motion:reduce){.bz-mmenu,.bz-mmenu-scrim{transition:none}} /* 2) "Why Bazidan": six cards — 6 / 3 / 2 columns, every row full. */ .why-band .whys{grid-template-columns:repeat(6,minmax(0,1fr))!important} @media (max-width:1024px){.why-band .whys{grid-template-columns:repeat(3,minmax(0,1fr))!important;row-gap:20px!important}} @media (max-width:700px){.why-band .whys{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}} /* Touch screens have no hover, so the glass-icon effects never played. There they run when the card scrolls in (lift + tilt + glint sweep, staggered), the icons keep a slow float, and a tap gives the hover look. */ @keyframes bzWhyPop{ 0%{transform:translateY(10px) scale(.8) rotate(0)} 55%{transform:translateY(-6px) scale(1.08) rotate(-6deg)} 100%{transform:translateY(0) scale(1) rotate(0)}} @keyframes bzWhyGlint{from{transform:translateX(-60%)}to{transform:translateX(60%)}} @keyframes bzWhyFloat{0%,100%{translate:0 0}50%{translate:0 -4px}} @media (hover:none),(pointer:coarse){ .why-band .why .ic{animation:bzWhyFloat 3.6s ease-in-out infinite} .why-band .why:nth-child(2n) .ic{animation-delay:-1.2s} .why-band .why:nth-child(3n) .ic{animation-delay:-2.4s} .why-band .why.in .ic{animation:bzWhyPop .8s cubic-bezier(.2,.8,.2,1) both,bzWhyFloat 3.6s ease-in-out .8s infinite; animation-delay:inherit} .why-band .why.in .ic::after{animation:bzWhyGlint 1.1s cubic-bezier(.2,.8,.2,1) .35s both} .why-band .why:active .ic{ transform:translateY(-5px) rotate(-5deg) scale(1.06); background:linear-gradient(150deg,rgba(255,255,255,.38),rgba(255,255,255,.14))} .why-band .why:active{background:rgba(255,255,255,.09)} } @media (prefers-reduced-motion:reduce){ .why-band .why .ic,.why-band .why.in .ic,.why-band .why.in .ic::after{animation:none!important} } /* 3) "Where to start" cards. The caption was absolutely positioned over a square photo; on phones the card was barely taller than the photo, so the title slid under the picture and only the subtitle peeked out below it. Now the photo is a square block and the caption sits under it. */ #start-here .start-poster{ display:flex!important;flex-direction:column;aspect-ratio:auto!important;height:auto!important; overflow:hidden;transform-style:flat!important} #start-here .start-photo{ position:relative!important;inset:auto!important;width:100%;flex:none;aspect-ratio:1/1!important; background-size:200% 200%!important;background-repeat:no-repeat!important} #start-here .start-caption{ position:relative!important;inset:auto!important;transform:none!important;min-height:0!important;flex:1; justify-content:center!important;gap:2px;padding:12px 14px 14px!important; background:linear-gradient(180deg,rgba(4,22,46,.55),rgba(4,22,46,.92))!important; border-radius:0 0 inherit inherit} #start-here .start-caption b{font-size:clamp(15px,1.3vw,19px)!important;line-height:1.5!important;margin:0} #start-here .start-caption>span{font-size:12.5px!important;line-height:1.6!important;margin:0!important;color:#D6E6FF!important} /* Compact category posters so this section doesn't dominate the home page. */ #start-here .starts{max-width:960px!important;gap:14px!important} #start-here .start-photo{aspect-ratio:1.25/1!important;object-fit:cover} @media (max-width:540px){ #start-here .start-caption{padding:10px 10px 12px!important} #start-here .start-caption b{font-size:15px!important} #start-here .start-caption>span{font-size:11.5px!important} } /* ===== v2.4.32 — compare page, compare toast/badge, customer club ===== */ /* compare: header badge, toast, product-page button */ .compare-head{position:relative} .bz-cmp-badge{position:absolute;top:-6px;inset-inline-start:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px; background:#fff;color:var(--pink-dark);border:2px solid var(--pink);font:800 11px/16px var(--font);font-style:normal;text-align:center} .bz-cmp-toast{position:fixed;z-index:995;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));translate:-50% 20px;opacity:0;pointer-events:none; display:flex;align-items:center;gap:12px;max-width:min(92vw,440px);padding:11px 16px;border-radius:16px;background:#23252F;color:#fff; font-size:13.5px;font-weight:700;box-shadow:0 14px 34px rgba(20,10,40,.28);transition:opacity .22s ease,translate .22s ease} .bz-cmp-toast.on{opacity:1;translate:-50% 0;pointer-events:auto} .bz-cmp-toast a{flex:none;padding:6px 12px;border-radius:10px;background:var(--pink);color:#fff;text-decoration:none;font-size:12.5px} @media (min-width:821px){.bz-cmp-toast{bottom:28px}} .bz-compare-single{margin-top:10px!important;min-height:46px!important} /* compare page */ .bz-cmp{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding-bottom:10px;min-width:0} .bz-cmp>*{min-width:0} .bz-cmp-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(16px,2.4vw,24px);box-shadow:var(--e1)} .bz-cmp-card h2{margin:0 0 12px;font-size:clamp(17px,1.8vw,20px);font-weight:900;color:var(--ink)} .bz-cmp-hero{position:relative;overflow:hidden;border-radius:26px;padding:clamp(20px,4vw,40px); background:radial-gradient(120% 140% at 100% 0%,#FFE1F4 0%,transparent 55%),linear-gradient(135deg,#FFF3FA 0%,#F6F2FF 50%,#EEF6FF 100%);border:1px solid #F4DDEC} .bz-cmp-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:#fff;color:var(--pink-dark);font-size:12.5px;font-weight:900;border:1px solid #FFD2EC} .bz-cmp-kicker i{width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 4px rgba(255,0,163,.15);animation:bzPulse 1.8s ease-in-out infinite} @keyframes bzPulse{50%{box-shadow:0 0 0 8px rgba(255,0,163,0)}} .bz-cmp-hero h1{margin:12px 0 8px;font-size:clamp(22px,3.4vw,34px);line-height:1.5;font-weight:900;color:var(--ink)} .bz-cmp-hero>p{margin:0;max-width:760px;color:#4a4f60;font-size:clamp(13.5px,1.4vw,15px);line-height:2} .bz-cmp-extra{margin-top:10px} .bz-cmp-steps{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .bz-cmp-steps li{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 14px;border-radius:999px;background:rgba(255,255,255,.8);border:1px solid #EFE3F0;font-size:12.5px;font-weight:700} .bz-cmp-steps b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--grad-btn);color:#fff;font-size:12px} .bz-cmp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px} .bz-cmp-head h2{margin:0}.bz-cmp-head small{color:var(--muted);font-weight:700;font-size:13px} .bz-cmp-clear{padding:8px 14px;border-radius:12px;background:#FFF0F6;color:#B3124F;font-weight:800;font-size:12.5px;min-height:38px} .bz-cmp-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .bz-cmp-slot{position:relative;display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:18px;border:1px solid var(--line);background:#FBFBFE;min-width:0} .bz-cmp-slot b{font-size:13px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .bz-cmp-slot-img{display:block;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#fff} .bz-cmp-img,.bz-cmp-pimg,.bz-cmp-thimg,.bz-cmp-wimg{display:block;width:100%;height:100%;object-fit:contain;background:#fff} .bz-cmp-noimg{display:grid!important;place-items:center;font-size:34px;background:#FFF3FA!important} .bz-cmp-x{position:absolute;top:6px;inset-inline-end:6px;z-index:2;width:30px!important;height:30px!important;min-height:30px!important;min-width:30px!important; margin:0!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center;background:#fff!important;color:#B3124F!important; border:1px solid #F3C9DB!important;font-size:18px!important;line-height:1;box-shadow:0 4px 10px rgba(0,0,0,.08)!important} .bz-cmp-slot.is-empty{align-items:center;justify-content:center;min-height:170px;border:2px dashed #F0CFE3;background:#FFFBFD;color:var(--pink-dark);cursor:pointer} .bz-cmp-slot.is-empty span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#FFE7F5;font-size:24px;font-weight:900} .bz-cmp-slot.is-empty small{font-weight:800;font-size:12.5px} .bz-cmp-empty{margin:12px 0 0;color:var(--muted);font-size:13.5px;line-height:1.9} .bz-cmp-price{font-weight:900;color:var(--pink-dark);font-size:14px}.bz-cmp-price small{font-weight:600;color:var(--muted);font-size:11.5px} .bz-cmp-off{display:inline-block;margin-inline-start:6px;padding:1px 7px;border-radius:999px;background:#FFE3F3;color:#B3124F;font-size:11px;font-weight:900} .bz-cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:-4px;padding-inline:4px} .bz-cmp-table{width:100%;min-width:560px;border-collapse:separate;border-spacing:0;font-size:13px} .bz-cmp-table th,.bz-cmp-table td{padding:11px 12px;border-bottom:1px solid var(--hair);text-align:start;vertical-align:top;line-height:1.8} .bz-cmp-table thead th{vertical-align:bottom;background:#fff;position:sticky;top:0} .bz-cmp-table thead a{display:flex;flex-direction:column;gap:6px;color:var(--ink);text-decoration:none;font-weight:800;font-size:12.5px} .bz-cmp-thimg{width:86px!important;height:86px!important;border-radius:12px;border:1px solid var(--line)} .bz-cmp-table tbody th{width:130px;color:var(--muted);font-weight:800;background:#FAFBFD;position:sticky;inset-inline-start:0} .bz-cmp-tag{display:inline-block;margin-inline-start:6px;padding:1px 8px;border-radius:999px;background:#E6F8EC;color:#136B31;font-size:11px;font-weight:800;font-style:normal} .bz-ok{color:#136B31;font-weight:800}.bz-no{color:#B3124F;font-weight:800} .bz-cmp-advisor{background:linear-gradient(160deg,#fff 0%,#FFF8FC 60%,#F6F3FF 100%)} .bz-cmp-adv-top{display:flex;align-items:center;gap:12px;margin-bottom:12px} .bz-cmp-adv-top h2{margin:0}.bz-cmp-adv-top p{margin:2px 0 0;color:var(--muted);font-size:12.5px} .bz-cmp-orb{width:48px;height:48px;flex:none;border-radius:50%;background:conic-gradient(from 0deg,#FF52C0,#9A71F5,#2A8EFF,#FF52C0); box-shadow:0 8px 20px rgba(154,113,245,.35);animation:bzSpin 6s linear infinite;position:relative} .bz-cmp-orb::after{content:"";position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#FCE7F6 60%,#EDE6FF)} @keyframes bzSpin{to{transform:rotate(360deg)}} .bz-cmp-label{display:block;font-size:13px;font-weight:800;margin-bottom:6px} .bz-cmp-advisor textarea{width:100%;min-height:92px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line);background:#fff;font:inherit;font-size:16px;resize:vertical;line-height:1.8} .bz-cmp-advisor textarea:focus{outline:0;border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,0,163,.1)} .bz-cmp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px} .bz-cmp-chip{padding:7px 12px;border-radius:999px;background:#fff;border:1px solid #F0D5E6;color:#6A2A54;font-size:12.5px;font-weight:700;min-height:36px} .bz-cmp-chip:hover{background:#FFF0F9} .bz-cmp-ask{margin-top:12px;width:100%;min-height:52px;border-radius:16px;background:var(--grad-btn);color:#fff;font-weight:900;font-size:15px;box-shadow:0 12px 26px rgba(214,0,138,.25)} .bz-cmp-ask:disabled{opacity:.7} .bz-cmp-answer:empty{display:none} .bz-cmp-answer{margin-top:16px;display:grid;gap:12px;scroll-margin-top:90px} .bz-cmp-msg{padding:12px 14px;border-radius:14px;background:#FFF6E5;color:#7A4B00;font-weight:700;font-size:13.5px} .bz-cmp-thinking{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px} .bz-cmp-thinking i{width:8px;height:8px;border-radius:50%;background:var(--pink);animation:bzDot 1s ease-in-out infinite} .bz-cmp-thinking i:nth-child(2){animation-delay:.15s}.bz-cmp-thinking i:nth-child(3){animation-delay:.3s} @keyframes bzDot{50%{transform:translateY(-5px);opacity:.4}} .bz-cmp-you{padding:12px 14px;border-radius:16px;background:#F4F6FB} .bz-cmp-you b{font-size:12px;color:var(--muted)}.bz-cmp-you p{margin:4px 0 0;font-size:14px;line-height:1.8} .bz-cmp-got{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .bz-cmp-got span{padding:3px 9px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:11.5px;font-weight:700;color:#4a4f60} .bz-cmp-win{position:relative;padding:16px;border-radius:20px;background:#fff;border:2px solid #FFC4E6;box-shadow:0 14px 34px rgba(214,0,138,.12)} .bz-cmp-win-tag{position:absolute;top:-12px;inset-inline-start:16px;padding:4px 12px;border-radius:999px;background:var(--grad-btn);color:#fff;font-size:12px;font-weight:900} .bz-cmp-win-main{display:flex;align-items:center;gap:12px;margin-top:6px} .bz-cmp-wimg{width:84px!important;height:84px!important;flex:none;border-radius:14px;border:1px solid var(--line)} .bz-cmp-win h3{margin:0 0 4px;font-size:15.5px;line-height:1.7;font-weight:900} .bz-cmp-win ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:6px} .bz-cmp-win li{position:relative;padding-inline-start:22px;font-size:13.5px;line-height:1.8} .bz-cmp-win li::before{content:"✓";position:absolute;inset-inline-start:0;top:0;color:#1A9E45;font-weight:900} .bz-cmp-warn{margin:10px 0 0;padding:8px 10px;border-radius:10px;background:#FFF4F7;color:#A42045;font-size:12.5px;font-weight:700} .bz-cmp-go{display:inline-flex;margin-top:12px;padding:9px 16px;border-radius:12px;background:#FFF0F9;color:var(--pink-dark);font-weight:900;font-size:13px;text-decoration:none} .bz-cmp-second{margin:0;font-size:13.5px;line-height:1.9;color:#4a4f60} .bz-cmp-rank{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:r} .bz-cmp-rank li{counter-increment:r;display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,40%);gap:4px 10px;align-items:center;font-size:12.5px} .bz-cmp-rank .n{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bz-cmp-rank .n::before{content:counter(r) ". "} .bz-cmp-rank .bar{height:8px;border-radius:99px;background:#F1EEF6;overflow:hidden} .bz-cmp-rank .bar i{display:block;height:100%;border-radius:99px;background:var(--grad-btn)} .bz-cmp-rank small{grid-column:1/-1;color:#A42045;font-size:11.5px} .bz-cmp-note{margin:0;color:var(--muted);font-size:11.5px} .bz-cmp-sub{margin:-6px 0 12px;color:var(--muted);font-size:13px} .bz-cmp-tools input{width:100%;height:46px;padding:0 14px;border-radius:14px;border:1.5px solid var(--line);background:#FBFBFE;font:inherit;font-size:16px} .bz-cmp-tools input:focus{outline:0;border-color:var(--pink);background:#fff} .bz-cmp-filters{display:flex;gap:8px;overflow-x:auto;padding:12px 2px 4px;scrollbar-width:none} .bz-cmp-filters::-webkit-scrollbar{display:none} .bz-cmp-f{flex:none;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:12.5px;font-weight:800;color:#4a4f60;min-height:36px} .bz-cmp-f.on{background:var(--ink);border-color:var(--ink);color:#fff} .bz-cmp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:10px} .bz-cmp-pick{position:relative;display:flex!important;align-items:center;gap:10px;width:100%;margin:0!important;padding:8px!important;min-height:0!important; border-radius:16px!important;border:1.5px solid var(--line)!important;background:#fff!important;color:var(--ink)!important;text-align:start;box-shadow:none!important;transform:none!important} .bz-cmp-pick .bz-cmp-pimg{width:58px!important;height:58px!important;flex:none;border-radius:12px;border:1px solid var(--hair)} .bz-cmp-pbody{flex:1;min-width:0;display:grid;gap:2px} .bz-cmp-pbody b{font-size:12.5px;line-height:1.6;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .bz-cmp-tick{width:24px;height:24px;flex:none;border-radius:8px;border:1.5px solid #E5D4E0;display:grid;place-items:center;color:transparent;font-weight:900;font-size:13px} .bz-cmp-pick.is-on{border-color:var(--pink)!important;background:#FFF5FB!important} .bz-cmp-pick.is-on .bz-cmp-tick{background:var(--grad-btn);border-color:transparent;color:#fff} .bz-cmp-none{grid-column:1/-1;color:var(--muted);text-align:center;padding:20px} .bz-cmp-more{display:block;margin:14px auto 0;padding:10px 20px;border-radius:12px;background:#F4F6FB;font-weight:800;font-size:13px} @media (max-width:900px){.bz-cmp-slots{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){ .bz-cmp-card{border-radius:18px} .bz-cmp-slots{gap:8px} .bz-cmp-slot.is-empty{min-height:130px} .bz-cmp-grid{grid-template-columns:1fr} .bz-cmp-table{min-width:0;font-size:12px} .bz-cmp-table th,.bz-cmp-table td{padding:9px 8px} .bz-cmp-table tbody th{width:84px} .bz-cmp-thimg{width:64px!important;height:64px!important} } @media (prefers-reduced-motion:reduce){.bz-cmp-orb,.bz-cmp-kicker i,.bz-cmp-thinking i{animation:none}.bz-cmp-toast{transition:none}} /* footer: trust column replaces the old newsletter column */ .foot-trust .footer-verification{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px} /* customer club — the band above the footer */ .bz-club{padding-block:clamp(28px,5vw,56px) clamp(10px,2vw,20px);position:relative;z-index:1} .bz-club-card{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:center; padding:clamp(20px,3.6vw,40px);border-radius:28px;color:#fff; background:radial-gradient(90% 120% at 0% 100%,rgba(42,142,255,.55),transparent 60%),linear-gradient(135deg,#FF3FB4 0%,#D6008A 45%,#7A3BE0 100%); box-shadow:0 24px 60px rgba(160,20,120,.28)} .bz-club-deco{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.12)} .bz-club-deco.d1{width:260px;height:260px;top:-120px;inset-inline-start:-80px} .bz-club-deco.d2{width:160px;height:160px;bottom:-70px;inset-inline-end:38%;background:rgba(255,255,255,.08)} .bz-club-copy{position:relative;z-index:1} .bz-club-kicker{display:inline-block;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);font-size:12.5px;font-weight:800} .bz-club-copy h2{margin:12px 0 8px;font-size:clamp(22px,3vw,32px);line-height:1.5;font-weight:900;color:#fff} .bz-club-copy p{margin:0;color:rgba(255,255,255,.9);font-size:clamp(13.5px,1.4vw,15px);line-height:2} .bz-club-perks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px} .bz-club-perks li{position:relative;padding-inline-start:30px;font-size:14px;font-weight:700;line-height:1.8} .bz-club-perks li::before{content:"✓";position:absolute;inset-inline-start:0;top:2px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center; background:#fff;color:var(--pink-dark);font-size:12px;font-weight:900} .bz-club-form{position:relative;z-index:1;display:grid;gap:12px;padding:clamp(16px,2.4vw,24px);border-radius:22px;background:#fff;color:var(--ink);box-shadow:0 18px 40px rgba(60,0,50,.22)} .bz-club-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .bz-club-field{display:grid;gap:5px;min-width:0} .bz-club-field label{font-size:12.5px;font-weight:800;color:#383c49} .bz-club-field input{width:100%;height:48px;padding:0 14px;border-radius:14px;border:1.5px solid var(--line);background:#FBFBFE;font:inherit;font-size:16px;color:var(--ink)} .bz-club-field input[dir="ltr"]{text-align:right} .bz-club-field input:focus{outline:0;border-color:var(--pink);background:#fff;box-shadow:0 0 0 3px rgba(255,0,163,.1)} .bz-club-field input.is-bad{border-color:#D6336C;background:#FFF6F9} .bz-club-err{min-height:0;color:#C2185B;font-size:11.5px;font-weight:700} .bz-club-err:empty{display:none} .bz-club-hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .bz-club-btn{min-height:52px;border-radius:16px;background:var(--grad-btn);color:#fff;font-weight:900;font-size:15px;box-shadow:0 12px 26px rgba(214,0,138,.28);transition:transform .18s ease} .bz-club-btn:hover{transform:translateY(-1px)} .bz-club-btn:disabled{opacity:.7;transform:none} .bz-club-note{margin:0;color:var(--muted);font-size:11.5px;text-align:center} .bz-club-msg:empty{display:none} .bz-club-msg{margin:0;padding:10px 12px;border-radius:12px;font-size:13.5px;font-weight:800;line-height:1.8;text-align:center} .bz-club-msg.ok{background:#E9F9EF;color:#136B31} .bz-club-msg.bad{background:#FFF1F5;color:#B3124F} .bz-club-form.is-done .bz-club-row,.bz-club-form.is-done .bz-club-field,.bz-club-form.is-done .bz-club-btn,.bz-club-form.is-done .bz-club-note{display:none} .bz-club-form.is-done .bz-club-msg{padding:22px 14px;font-size:15px} @media (max-width:820px){ .bz-club-card{grid-template-columns:1fr;border-radius:24px} .bz-club-deco.d2{inset-inline-end:-40px} } @media (max-width:420px){ .bz-club-row{grid-template-columns:1fr} .bz-club-card{padding:18px 14px;border-radius:22px} .bz-club-form{padding:14px;border-radius:18px} } .bz-cmp-off{align-self:flex-start;justify-self:start;width:max-content} .bz-cmp-slot .bz-cmp-price{display:block} .bz-cmp-table thead th:not(:first-child){min-width:128px} .bz-cmp-table td{min-width:118px} @media (max-width:560px){.bz-cmp-table{min-width:calc(84px + var(--cols,3)*124px)}} /* ===== v2.4.34 — speed ===== */ /* The first banner used to fade in from opacity:0, so the page's largest image only counted as painted after the animation ended. It now appears at once; the entrance effect still plays when the slider moves on. */ .hero-slide.on:first-child,.hero-slide.on:first-child .hero-img{animation:none!important} /* ===== v2.4.35 — motion governor (see inc/assets.php) ===== */ /* decorations wait until the page has loaded … */ .bz-calm body::before,.bz-calm body::after,.bz-calm .top-strip,.bz-calm .band-deco i,.bz-calm .aurora i, .bz-calm .stage-fx *,.bz-calm .spot,.bz-calm .hero-main::before,.bz-calm .hero-art,.bz-calm .hero-art .t, .bz-calm .gc-art,.bz-calm .gc-art *,.bz-calm .dani-bob,.bz-calm .dani-wrap .dani,.bz-calm .sec-head h2::after, .bz-calm .why-band .why .ic,.bz-calm .free-ship-float,.bz-calm .free-ship-float *,.bz-calm .free-ship-float::before, .bz-calm .free-ship-float *::before,.bz-calm .free-ship-float *::after,.bz-calm .bz-cmp-orb,.bz-calm .bz-cmp-kicker i{ animation-play-state:paused!important} /* … and every animation in a section scrolled out of view holds still */ .bz-offscreen,.bz-offscreen *,.bz-offscreen *::before,.bz-offscreen *::after, .bz-offscreen::before,.bz-offscreen::after{animation-play-state:paused!important} /* slide dots: 28px tall touch target everywhere (the dot itself stays 8px) */ .hero-dots{gap:0!important} .hero-dots button{box-sizing:content-box!important;min-width:0!important;min-height:0!important;width:8px!important;height:8px!important; padding:0!important;border:10px solid transparent!important;background-clip:padding-box!important} .hero-dots button.on{width:24px!important}