/* M7trf homepage v2: simple, clean, white. Product sliders per category. Scoped under .m7h2. */
@font-face{font-family:"M7 Tajawal";src:url(fonts/tajawal-400-arabic.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"M7 Tajawal";src:url(fonts/tajawal-400-latin.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"M7 Tajawal";src:url(fonts/tajawal-700-arabic.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"M7 Tajawal";src:url(fonts/tajawal-700-latin.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"M7 Tajawal";src:url(fonts/tajawal-800-arabic.woff2) format("woff2");font-weight:800;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"M7 Tajawal";src:url(fonts/tajawal-800-latin.woff2) format("woff2");font-weight:800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}

.m7h2{
  --bg:#ffffff; --soft:#f6f5fa; --line:#ebe8f2; --fg:#16131f; --muted:#6e6880;
  --accent:#7c4dff; --accent-hover:#6a3bf0; --accent-soft:#f1ecff; --sale:#e5484d;
  --font:"M7 Tajawal",Tahoma,sans-serif;
  background:var(--bg); color:var(--fg); font-family:var(--font); font-size:16px; line-height:1.6;
}
.m7h2 :where(h1,h2,p){margin:0;padding:0;border:0;color:inherit;font-family:inherit;letter-spacing:normal;text-transform:none}
.m7h2 :where(a){color:inherit;text-decoration:none}
.m7h2 :where(a,button):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.m7h2 *,.m7h2 *::before,.m7h2 *::after{box-sizing:border-box}
.m7h2 img{max-width:100%;height:auto}
.m7h2-wrap{max-width:1280px;margin:0 auto;padding-inline:20px;padding-bottom:40px}

/* hero */
.m7h2-hero{padding-block:36px 8px;display:grid;gap:22px}
.m7h2-hero-text{background:var(--soft);border-radius:20px;padding:36px 32px;display:grid;gap:12px;justify-items:start}
.m7h2 h1{font-size:clamp(26px,3.4vw,40px);font-weight:800;line-height:1.25;text-wrap:balance}
.m7h2-hero-text p{color:var(--muted);max-width:42em;font-size:17px}
.m7h2-hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.m7h2-btn{display:inline-flex;align-items:center;padding:11px 22px;border-radius:12px;font-weight:700;font-size:15px;border:1px solid var(--line);background:var(--bg);color:var(--fg);transition:background .15s,border-color .15s;line-height:1.3}
.m7h2-btn:hover{border-color:var(--accent);color:var(--accent)}
.m7h2-btn.is-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.m7h2-btn.is-primary:hover{background:var(--accent-hover);color:#fff}
.m7h2-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.m7h2-chips::-webkit-scrollbar{display:none}
.m7h2-chips a{white-space:nowrap;padding:8px 16px;border-radius:999px;border:1px solid var(--line);font-size:14px;font-weight:700;color:var(--fg);background:var(--bg);transition:all .15s}
.m7h2-chips a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* sections */
.m7h2-sec{padding-block:30px 6px;scroll-margin-top:90px}
.m7h2-sh{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:16px}
.m7h2 h2{font-size:clamp(20px,2.4vw,26px);font-weight:800;line-height:1.3}
.m7h2-sh p{color:var(--muted);font-size:14px;margin-top:2px}
.m7h2-sh-end{display:flex;align-items:center;gap:8px;flex:none}
.m7h2-all{color:var(--accent);font-weight:700;font-size:14px;margin-inline-end:6px}
.m7h2-all:hover{color:var(--accent-hover);text-decoration:underline}
.m7h2-arrow{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--fg);font-size:22px;line-height:1;cursor:pointer;display:inline-grid;place-items:center;padding:0 0 3px;transition:all .15s}
.m7h2-arrow:hover{border-color:var(--accent);color:var(--accent)}
.m7h2-arrow:disabled{opacity:.35;cursor:default}

/* rail */
.m7h2-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 5*16px)/6);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:2px 2px 10px}
.m7h2-rail::-webkit-scrollbar{display:none}
.m7h2-card{scroll-snap-align:start;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0;transition:box-shadow .2s,border-color .2s}
.m7h2-card:hover{border-color:#d9d2ee;box-shadow:0 8px 24px rgba(40,20,90,.08)}
.m7h2-img{position:relative;display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--soft)}
.m7h2-img img{width:100%;height:100%;object-fit:contain;transition:transform .3s}
.m7h2-card:hover .m7h2-img img{transform:scale(1.04)}
.m7h2-badges{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.m7h2-badge{font-size:12px;font-weight:700;border-radius:6px;padding:2px 8px;line-height:1.5}
.m7h2-badge.is-used{background:var(--accent);color:#fff}
.m7h2-badge.is-sale{background:var(--sale);color:#fff;direction:ltr}
.m7h2-name{font-size:14px;font-weight:700;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3em}
.m7h2-name:hover{color:var(--accent)}
.m7h2-foot{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:auto}
.m7h2-price{display:flex;flex-direction:column;line-height:1.25}
.m7h2-price b{font-size:16px;font-weight:800;color:var(--fg)}
.m7h2-price s{font-size:13px;color:var(--muted)}
.m7h2-add{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-size:22px;font-weight:700;line-height:1;flex:none;transition:all .15s}
.m7h2-add:hover{background:var(--accent);color:#fff}
.m7h2-add.loading{opacity:.5}
.m7h2-add.added{background:#1f9d55;color:#fff}
.m7h2 .added_to_cart{display:none!important}

@media (prefers-reduced-motion:reduce){.m7h2 *{transition:none!important}.m7h2-rail{scroll-behavior:auto}}
@media (max-width:1200px){.m7h2-rail{grid-auto-columns:calc((100% - 4*16px)/5)}}
@media (max-width:1000px){.m7h2-rail{grid-auto-columns:calc((100% - 3*14px)/4);gap:14px}}
@media (max-width:760px){
  .m7h2-rail{grid-auto-columns:calc((100% - 2*12px)/2.6);gap:12px}
  .m7h2-arrow{display:none}
  .m7h2-hero{padding-top:14px;gap:14px}
  .m7h2-hero-text{padding:20px 18px;gap:8px;border-radius:16px}
  .m7h2 h1{font-size:22px}
  .m7h2-hero-text p{font-size:14px;line-height:1.7}
  .m7h2-hero-cta{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .m7h2-btn{justify-content:center;padding:11px 12px;font-size:14px}
  .m7h2-chips{margin-inline:-20px;padding-inline:20px}
  .m7h2-sec{padding-block:22px 2px;scroll-margin-top:70px}
  .m7h2-sh{margin-bottom:12px}
  .m7h2 h2{font-size:19px}
  .m7h2-sh p{font-size:13px}
  .m7h2-rail{margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px}
}
@media (max-width:480px){
  .m7h2-wrap{padding-inline:16px}
  .m7h2-chips,.m7h2-rail{margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
  .m7h2-rail{grid-auto-columns:calc((100% - 10px)/2.2);gap:10px}
  .m7h2-card{padding:8px;border-radius:14px;gap:6px}
  .m7h2-img{border-radius:10px}
  .m7h2-name{font-size:13px}
  .m7h2-price b{font-size:15px}
  .m7h2-price s{font-size:12px}
  .m7h2-add{width:34px;height:34px;font-size:20px}
  .m7h2-badge{font-size:11px;padding:1px 6px}
}