/* ================= صفحه اصلی | تتیس لیان پایا =================
   زبان طراحی: فروشگاه‌های بزرگ ایرانی — اسلایدر + بنر کناری، دسته‌های دایره‌ای،
   نوار قرمز شگفت‌انگیز با شمارش معکوس، ماژول چهارتایی، ردیف‌های یکپارچه با خط جداکننده */
.home{padding-bottom:10px}
.home h2{font-size:17px;font-weight:800;color:var(--ink)}

/* ---- بالای صفحه ---- */
.h-top{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(0,1fr);gap:14px;margin-top:16px}
.h-slider{margin:0;border-radius:14px;box-shadow:none;aspect-ratio:900/400;background:var(--soft)}
.h-slider .sl-track,.h-slider .sl-item{height:100%}
.h-slider .sl-item{aspect-ratio:auto}
.ab{display:flex!important;align-items:center;justify-content:space-between;gap:20px;padding:0 6% 0 3%;background:var(--bg);color:var(--fg);overflow:hidden}
.ab-txt{display:flex;flex-direction:column;gap:8px;max-width:44%;z-index:1}
.ab-txt b{font-size:clamp(20px,2.6vw,34px);font-weight:900;line-height:1.35}
.ab-txt>span{font-size:13.5px;font-weight:600;opacity:.8;line-height:2}
.ab-btn{align-self:flex-start;margin-top:8px;font-style:normal;font-size:13px;font-weight:800;color:#fff;background:var(--fg);padding:9px 18px;border-radius:8px}
.ab-img{flex:1;height:100%;position:relative;display:flex;align-items:flex-end;justify-content:center}
.ab-img img{position:absolute;bottom:6%;object-fit:contain;mix-blend-mode:multiply}
.ab-img img:nth-child(1){height:86%;left:50%;transform:translateX(-50%);z-index:2}
.ab-img img:nth-child(2){height:62%;left:4%}
.ab-img img:nth-child(3){height:62%;right:4%}
.h-slider .sl-dots{right:auto;left:50%;transform:translateX(-50%)}
.h-slider .sl-dots button{background:rgba(18,50,102,.25)}.h-slider .sl-dots button.on{background:var(--navy)}
.h-side{display:grid;grid-template-rows:1fr 1fr;gap:14px}
.h-side>a{border-radius:14px;overflow:hidden;background:var(--soft);min-height:0}
.h-side>a>img{width:100%;height:100%;object-fit:cover}
.sb{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px}
.sb span{display:flex;flex-direction:column;gap:4px;max-width:60%;z-index:1}
.sb small{font-size:12px;font-weight:700;opacity:.75}
.sb b{font-size:15px;font-weight:800;line-height:1.7}
.sb em{font-style:normal;font-size:12px;font-weight:800;align-self:flex-start;padding:2px 9px;border-radius:6px}
.sb-deal{background:#fdeef1!important;color:#7d1028}
.sb-deal em{background:var(--red);color:#fff}
.sb-deal img{height:118%;max-width:42%;object-fit:contain;mix-blend-mode:multiply;margin-bottom:-14%}
.sb-svc{background:#e8f1ee!important;color:#1f5a43}
.sb-svc em{background:#1f5a43;color:#fff}
.sb-svc svg{width:86px;height:86px;opacity:.85;flex:none}

/* ---- دسته‌های دایره‌ای ---- */
.h-cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-top:26px;padding-bottom:6px}
.h-cats::-webkit-scrollbar{display:none}
.h-cats a{flex:0 0 104px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:12.5px;font-weight:700;line-height:1.6;color:var(--ink)}
.h-cats span{width:88px;height:88px;border-radius:50%;background:var(--soft);display:grid;place-items:center;overflow:hidden;transition:box-shadow .2s}
.h-cats img{width:74%;height:74%;object-fit:contain;mix-blend-mode:multiply}
.h-cats a:hover span{box-shadow:0 0 0 2px var(--navy)}

/* ---- شگفت‌انگیزها ---- */
.h-amz{display:flex;gap:4px;margin-top:26px;padding:16px 16px 16px 0;border-radius:16px;background:var(--red)}
.h-amz-s{flex:0 0 150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;text-align:center}
.h-amz-s svg{width:44px;height:44px}
.h-amz-s b{font-size:20px;font-weight:900}
.cd{display:flex;gap:3px;align-items:center;direction:ltr;font-weight:800}
.cd i{font-style:normal;background:#fff;color:var(--red);border-radius:6px;width:30px;height:30px;display:grid;place-items:center;font-size:14px}
.h-amz-s a{font-size:12.5px;font-weight:700;color:#fff;opacity:.9}
.h-amz .rail{flex:1;gap:2px;padding:0;border-radius:10px 0 0 10px}
.h-amz .rail>.pc{flex:0 0 184px;border:0;border-radius:4px}
.h-amz .rail>.pc:first-child{border-radius:0 10px 10px 0}
.h-more{flex:0 0 150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#fff;border-radius:10px 0 0 10px;font-weight:800;font-size:13px;color:var(--ink)}
.h-more span{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--red);color:var(--red);display:grid;place-items:center}

/* ---- بنرهای میانی ---- */
.h-mids{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:26px}
.h-mids a{border-radius:14px;overflow:hidden;background:var(--soft);aspect-ratio:2/1}
.h-mids img{width:100%;height:100%;object-fit:cover}

/* ---- ماژول چهارتایی ---- */
.h-quads{display:grid;grid-template-columns:repeat(4,1fr);margin-top:26px;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.qd{display:flex;flex-direction:column;padding:18px 18px 14px}
.qd+.qd{border-right:1px solid var(--line)}
.qd h2{font-size:15px;margin-bottom:12px}
.qd-g{display:grid;grid-template-columns:1fr 1fr;flex:1}
.qd-g a{aspect-ratio:1;display:grid;place-items:center;padding:8px}
.qd-g a:nth-child(odd){border-left:1px solid var(--line2)}
.qd-g a:nth-child(-n+2){border-bottom:1px solid var(--line2)}
.qd-g img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.qd-m{margin-top:10px;align-self:center;font-size:12.5px;font-weight:700;color:var(--blue)}

/* ---- ردیف محصولات دسته‌ها: باکس یکپارچه با خط جداکننده ---- */
.h-row,.h-brands,.h-blog{margin-top:30px}
.h-row header,.h-brands header,.h-blog header{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.h-row header nav{display:flex;gap:4px;flex-wrap:wrap}
.h-row header nav a{font-size:12.5px;font-weight:600;color:var(--txt);padding:4px 10px;border-radius:6px}
.h-row header nav a:hover{background:var(--soft);color:var(--ink)}
.h-all{margin-right:auto;display:flex;align-items:center;gap:2px;font-size:13px;font-weight:700;color:var(--blue)}
.h-all svg{width:16px}
.rail.strip{gap:0;padding:0;border:1px solid var(--line);border-radius:14px}
.rail.strip>.pc{flex:0 0 212px;border:0;border-radius:0;border-left:1px solid var(--line2)}
.rail.strip>.pc:last-child{border-left:0}
.rail.strip>.pc:hover{box-shadow:none}
.rail.strip>.pc:hover .pc-t{color:var(--blue)}
.h-amz .rail.strip{border:0}
.home .rail-b{top:42%}

/* ---- دو بنر خدمات ---- */
.h-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.dw{display:flex;align-items:center;min-height:168px;padding:26px 28px;border-radius:14px;position:relative;overflow:hidden}
.dw span{display:flex;flex-direction:column;gap:6px;max-width:62ch;z-index:1}
.dw b{font-size:19px;font-weight:900}
.dw small{font-size:13px;line-height:2.05;opacity:.85;max-width:46ch}
.dw i{font-style:normal;align-self:flex-start;margin-top:6px;font-size:13px;font-weight:800;padding:8px 16px;border-radius:8px}
.dw-svc{background:#e8f1ee;color:#18473a}.dw-svc i{background:#18473a;color:#fff}
.dw-ai{background:#e9eef7;color:var(--navy)}.dw-ai i{background:var(--navy);color:#fff}
.dw::after{content:"";position:absolute;left:24px;bottom:-30px;width:150px;height:150px;opacity:.12;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M20 6h24v28H20zM14 34h36v7H14zM30 41h4v12h-4zM14 60l18-6 18 6' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M20 6h24v28H20zM14 34h36v7H14zM30 41h4v12h-4zM14 60l18-6 18 6' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---- برندها ---- */
.hb{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));border:1px solid var(--line);border-radius:14px;overflow:hidden}
.hb a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:92px;border-left:1px solid var(--line2);border-bottom:1px solid var(--line2);margin:0 0 -1px -1px}
.hb img{max-height:40px;max-width:70%;object-fit:contain;filter:grayscale(1);opacity:.8;transition:filter .2s,opacity .2s}
.hb a:hover img{filter:none;opacity:1}
.hb b{font-size:15px;font-weight:800;color:var(--ink)}
.hb small{font-size:11px;color:var(--muted)}

/* ---- وبلاگ ---- */
.hp{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hp a{display:flex;flex-direction:column;gap:6px}
.hp span{aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--soft)}
.hp img{width:100%;height:100%;object-fit:cover}
.hp b{font-size:13.5px;font-weight:800;line-height:1.9;color:var(--ink)}
.hp small{font-size:11.5px;color:var(--muted)}

.h-about{margin-top:34px;border-radius:14px;max-height:260px}
.h-about a{color:var(--blue);font-weight:700}

/* ---- واکنش‌گرا ---- */
@media(max-width:1023px){
  .h-top{grid-template-columns:1fr}
  .h-side{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .h-side>a{aspect-ratio:2.2/1}
  .h-quads{grid-template-columns:1fr 1fr}.qd:nth-child(3){border-right:0}.qd:nth-child(n+3){border-top:1px solid var(--line)}
  .hp{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .h-top{margin-top:10px;gap:10px}
  .h-slider{aspect-ratio:16/10;border-radius:12px}
  .ab{padding:0 18px 0 6px}.ab-txt{max-width:52%;gap:4px}.ab-txt>span{font-size:12px}.ab-btn{padding:7px 12px;font-size:12px}
  .ab-img img:nth-child(n+2){display:none}.ab-img img:nth-child(1){height:78%}
  .h-side{grid-template-columns:1fr;gap:10px}.h-side>a{aspect-ratio:auto;min-height:110px}
  .sb{padding:12px 16px}.sb b{font-size:13.5px}.sb-svc svg{width:60px;height:60px}
  .h-cats{margin-top:18px}.h-cats a{flex-basis:84px;font-size:11.5px}.h-cats span{width:72px;height:72px}
  .h-amz{flex-direction:column;padding:14px 0 14px;border-radius:0;margin-left:-16px;margin-right:-16px}
  .h-amz-s{flex:none;flex-direction:row;justify-content:space-between;padding:0 16px}.h-amz-s svg{width:30px;height:30px}.h-amz-s b{font-size:16px}.cd i{width:26px;height:26px;font-size:12px}
  .h-amz .rail{padding-right:12px;border-radius:0}.h-amz .rail>.pc{flex-basis:150px}.h-more{flex-basis:120px}
  .h-quads{grid-template-columns:1fr}.qd+.qd{border-right:0;border-top:1px solid var(--line)}.qd-g{grid-template-columns:repeat(4,1fr)}.qd-g a:nth-child(-n+2){border-bottom:0}
  .rail.strip{border-radius:12px}.rail.strip>.pc{flex-basis:158px}
  .h-row header{gap:8px}.h-row header nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}
  .h-duo{grid-template-columns:1fr}.dw{min-height:140px;padding:20px}
  .hp{grid-template-columns:1fr 1fr;gap:10px}
}
.rail-w{min-width:0}
.h-amz .rail-w{flex:1;min-width:0;display:flex}
.h-amz .rail-w>.rail{flex:1;min-width:0}
.ab-img img{width:auto!important;max-width:60%}
@media(max-width:700px){
  .h-side{grid-template-columns:1fr 1fr}.h-side>a{min-height:118px}
  .sb{padding:12px;align-items:flex-start}.sb span{max-width:100%}.sb b{font-size:12.5px;line-height:1.8}.sb small{font-size:11px}
  .sb-deal img{position:absolute;left:4px;bottom:-12px;height:70%;max-width:38%;opacity:.95;margin:0}.sb-deal span{max-width:66%}
  .sb-svc svg{display:none}
}

/* =================== هیرو v2 =================== */
.h-top{gap:16px;margin-top:18px}
.h-slider{aspect-ratio:auto;height:420px;border-radius:18px;background:var(--bg,#e9eef7)}
.ab{padding:0 56px 64px 32px;align-items:center;background:var(--bg)}
.ab::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.55),transparent 55%);pointer-events:none}
.ab-txt{max-width:46%;gap:0;position:relative}
.ab-br{font-size:12.5px;font-weight:700;color:var(--fg);opacity:.7;margin-bottom:6px}
.ab-txt b{font-size:clamp(26px,3vw,40px);line-height:1.3;letter-spacing:-.5px}
.ab-sub{font-size:14px!important;font-weight:500!important;margin-top:10px;opacity:.8;line-height:2}
.ab-meta{display:flex;gap:26px;margin-top:18px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--fg) 18%,transparent)}
.ab-meta span{display:flex;flex-direction:column;line-height:1.5}
.ab-meta small{font-size:11.5px;font-weight:600;opacity:.7}
.ab-meta strong{font-size:19px;font-weight:900}
.ab-meta strong i{font-style:normal;font-size:11px;font-weight:600}
.ab-btn{display:inline-flex;align-items:center;gap:4px;margin-top:20px;align-self:flex-start;font-size:13.5px;font-weight:800;color:#fff;background:var(--fg);padding:11px 18px 11px 14px;border-radius:10px;transition:gap .2s}
.ab-btn svg{width:18px}
.ab:hover .ab-btn{gap:10px}
.ab-img{display:none}
.ab-stage{position:relative;flex:1;height:100%;align-self:stretch}
.ab-disc{position:absolute;left:50%;top:52%;width:min(330px,72%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#fff;opacity:.65}
.ab-disc::after{content:"";position:absolute;left:10%;right:10%;bottom:-9%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(10,20,40,.18),transparent)}
.ab-stage img{position:absolute;object-fit:contain;mix-blend-mode:multiply;width:auto!important}
.ab-p0{height:78%;left:50%;top:10%;transform:translateX(-50%);z-index:2}
.ab-p1{height:46%;right:2%;bottom:16%;z-index:1;opacity:.95}
.ab-p2{height:46%;left:0;bottom:16%;z-index:1;opacity:.95}
.ab-tag{position:absolute;z-index:3;right:6%;top:12%;display:flex;flex-direction:column;background:#fff;border-radius:12px;padding:8px 12px;box-shadow:0 8px 24px -10px rgba(10,20,40,.35);max-width:200px;line-height:1.6}
.ab-tag small{font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-tag b{font-size:14px;font-weight:900;color:var(--ink)}.ab-tag b i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--muted)}
/* نوار تب‌ها با نوار پیشرفت */
.ab-tabs{position:absolute;right:0;left:0;bottom:0;transform:none;display:flex;gap:0;padding:0;background:rgba(255,255,255,.72);backdrop-filter:blur(6px);border-top:1px solid rgba(255,255,255,.8)}
.ab-tabs button{flex:1;position:relative;width:auto;height:50px;border-radius:0;background:none!important;font-size:13px;font-weight:700;color:var(--txt);transition:color .2s}
.ab-tabs button+button{border-right:1px solid rgba(18,30,60,.08)}
.ab-tabs button.on{color:var(--fg);font-weight:900;width:auto}
.ab-tabs button i{position:absolute;right:0;left:0;bottom:0;height:3px;background:var(--fg);transform:scaleX(0);transform-origin:right}
.ab-tabs button.on i{animation:abProg 5.5s linear forwards}
@keyframes abProg{to{transform:scaleX(1)}}
.h-slider .sl-arr{bottom:auto;top:calc(50% - 45px)}
.h-slider .sl-arr.n{left:16px}.h-slider .sl-arr.p{left:auto;right:16px}
/* بنرهای کناری */
.h-side{gap:16px}
.h-side>a{border-radius:18px}
.sb{padding:18px 22px;align-items:stretch}
.sb>span{justify-content:center;max-width:58%}
.sb small{font-size:12px}
.sb b{font-size:15.5px;line-height:1.75}
.sb-pr{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:6px}
.sb-pr em{background:var(--red);color:#fff;font-size:11.5px;padding:1px 7px;border-radius:6px}
.sb-pr del{font-size:12px;opacity:.55}
.sb-pr strong{width:100%;font-size:17px;font-weight:900;color:var(--ink)}.sb-pr strong i{font-style:normal;font-size:11px;font-weight:600;color:var(--muted)}
.sb-deal{background:#fff1f3!important}
.sb-deal img,.sb-svc img{position:absolute;left:10px;bottom:-6%;height:104%;max-width:44%;margin:0;object-fit:contain;mix-blend-mode:multiply}
.sb-svc{background:#e6f2ed!important}
.sb-ok{align-self:flex-start;margin-top:8px;font-size:12px;font-weight:800;color:#fff;background:#1f5a43;padding:3px 10px;border-radius:6px}
@media(prefers-reduced-motion:reduce){.ab-tabs button.on i{animation:none;transform:scaleX(1)}}
@media(max-width:1023px){.h-slider{height:380px}}
@media(max-width:700px){
  .h-slider{height:auto;aspect-ratio:auto}
  .h-slider .sl-track{height:auto}
  .ab{flex-direction:column-reverse;align-items:stretch;gap:0;padding:0 0 50px;height:auto!important}
  .ab::before{display:none}
  .ab-stage{height:210px;flex:none}
  .ab-disc{width:190px}
  .ab-tag{top:auto;bottom:6px;right:12px;padding:6px 10px}.ab-tag b{font-size:12.5px}
  .ab-txt{max-width:none;padding:6px 18px 18px}
  .ab-txt b{font-size:24px}.ab-sub{font-size:12.5px!important;margin-top:4px}
  .ab-meta{margin-top:10px;padding-top:10px;gap:20px}.ab-meta strong{font-size:16px}
  .ab-btn{display:none}
  .ab-tabs button{height:44px;font-size:11.5px}
  .h-slider .sl-arr{display:none}
  .sb{padding:12px}.sb>span{max-width:62%}.sb b{font-size:12.5px}
  .sb-pr strong{font-size:13.5px}.sb-pr del{display:none}
  .sb-deal img,.sb-svc img{height:80%;bottom:4px;left:4px;max-width:40%}
}
.ab{position:relative}
/* اصلاح اولویت‌ها نسبت به استایل عمومی اسلایدر */
.h-slider .ab-stage img{width:auto;max-width:none}
.h-slider .ab-stage .ab-p0{height:76%;top:9%}
.h-slider .ab-stage .ab-p1,.h-slider .ab-stage .ab-p2{height:44%;top:auto;bottom:18%}
.h-slider .ab-stage .ab-p1{right:4%;left:auto}.h-slider .ab-stage .ab-p2{left:2%}
.ab::before{z-index:0}.ab-txt{z-index:2}.ab-stage{z-index:1}
.h-slider .ab-tabs{position:absolute;right:0;left:0;bottom:0;transform:none;display:flex;gap:0}
.h-slider .ab-tabs button{flex:1;width:auto;height:52px;border-radius:0;background:transparent;opacity:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px}
.h-slider .ab-tabs button.on{width:auto;background:rgba(255,255,255,.6)}
.h-side .sb img{height:90%;bottom:5%}
@media(max-width:700px){.h-slider .ab-stage .ab-p1,.h-slider .ab-stage .ab-p2{display:none}.h-slider .ab-tabs button{height:44px}}
.ab-stage{z-index:auto}
.ab-txt>.ab-btn,.ab-txt>.ab-meta{opacity:1}
.ab-txt>.ab-sub{opacity:.8}
@media(max-width:700px){.h-side .sb img{height:52%;max-width:34%;bottom:6px;left:6px}.h-side .sb>span{max-width:100%;padding-bottom:40px}.sb-ok{font-size:11px}}