/* واجهة المتجر — ستايل واحد لكل الثيمات: الالوان والخطوط من متغيرات الثيم، والشكل (الهيدر/البانر/الكروت/الزراير) من كلاسات الـ body */
*, *::before, *::after { box-sizing: border-box; }
:root { --pad: 20px; --ease: cubic-bezier(.2, .7, .2, 1); --soft-ink: color-mix(in srgb, var(--ink) 6%, var(--bg)); }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.sf { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--fb), system-ui, sans-serif; font-size: 15px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
.sf img { max-width: 100%; display: block; }
.sf a { color: inherit; text-decoration: none; }
.sf button, .sf input, .sf select { font: inherit; color: inherit; }
.sf h1, .sf h2, .sf h3 { font-family: var(--fh), var(--fb), serif; font-weight: 600; line-height: 1.3; margin: 0; letter-spacing: -.005em; }
.sf p { margin: 0; }
.ico { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ico.sm { width: 16px; height: 16px; } .ico.lg { width: 30px; height: 30px; }
.wrap { width: min(1240px, 100% - 2 * var(--pad)); margin-inline: auto; }

/* ازرار — شكلها من الثيم */
.sbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 28px; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-weight: 500; cursor: pointer; transition: background .2s, color .2s, opacity .2s, transform .15s; border-radius: var(--radius); white-space: nowrap; }
.b-pill .sbtn { border-radius: 999px; }
.b-rounded .sbtn { border-radius: 10px; }
.b-square .sbtn { border-radius: 0; letter-spacing: .02em; }
.sbtn:active { transform: scale(.985); }
.sbtn:disabled { opacity: .45; cursor: not-allowed; }
.sf .sbtn-solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.sf.dark .sbtn-solid { color: #0e0e0e; }
.sbtn-solid:hover:not(:disabled) { opacity: .9; }
.sf .sbtn-line:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
.sbtn-block { width: 100%; }
.sbtn-lg { height: 54px; font-size: 16px; }

/* شريط المعاينة والاعلانات */
.pv-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px var(--pad); background: #171717; color: #fff; font-size: 13.5px; position: sticky; top: 0; z-index: 60; }
.pv-bar span { display: inline-flex; align-items: center; gap: 8px; }
.pv-bar a { border-bottom: 1px solid rgba(255, 255, 255, .5); }
.announce { background: var(--ink); color: var(--bg); font-size: 13px; overflow: hidden; height: 36px; display: flex; align-items: center; }
.announce-in { display: flex; gap: 56px; white-space: nowrap; animation: ann 40s linear infinite; padding-inline: 28px; }
@keyframes ann { to { transform: translateX(33.333%); } }

/* الهيدر */
.hd { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.pv-bar ~ .hd { top: 38px; }
.hd-in { display: flex; align-items: center; gap: 24px; height: 72px; }
.logo { display: inline-flex; align-items: center; }
.logo img { max-height: 44px; width: auto; max-width: 180px; object-fit: contain; }
.logo span { font-family: var(--fh), serif; font-size: 22px; font-weight: 600; letter-spacing: .01em; }
.hd-nav { display: flex; gap: 26px; font-size: 14.5px; }
.hd-nav a { color: var(--muted); transition: color .2s; position: relative; }
.hd-nav a:hover { color: var(--ink); }
.hd-tools { display: flex; gap: 4px; margin-inline-start: auto; }
.hd-icon { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.hd-icon:hover { background: var(--soft-ink); }
.hd-icon em { position: absolute; top: 3px; left: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font: normal 600 11px/18px var(--fb); text-align: center; }
.dark .hd-icon em { color: #0e0e0e; }
.hd-menu { display: none; }
.hd-search { display: none; align-items: center; gap: 8px; flex: 1; max-width: 520px; height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); }
.hd-search input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; color: var(--ink); }
/* centered: اللوجو في النص والقائمة تحته */
.h-center .hd-in { display: grid; grid-template-columns: 1fr auto 1fr; height: auto; padding-top: 18px; row-gap: 14px; }
.h-center .logo { grid-column: 2; justify-self: center; }
.h-center .logo span { font-size: 26px; letter-spacing: .14em; }
.h-center .hd-tools { grid-column: 3; grid-row: 1; justify-self: end; }
.h-center .hd-nav { grid-column: 1 / -1; grid-row: 2; justify-self: center; padding-bottom: 14px; }
/* bar: بحث كبير في النص (الالكترونيات والعروض) */
.h-bar .hd-search { display: flex; }
.h-bar .hd-search-btn { display: none; }
.h-bar .hd-nav { display: none; }
.h-bar .hd { border-bottom: 0; }
.h-bar .hd::after { content: ""; display: block; height: 1px; background: var(--line); }

/* البانر */
.hero { position: relative; overflow: hidden; }
.hero-track { position: relative; }
.slide { display: none; position: relative; }
.slide.on { display: block; }
.slide.on.go { animation: fadein .7s var(--ease); }  /* الحركة بين السلايدز بس — اول ظهور للصفحة من غير بهتان */
@keyframes fadein { from { opacity: 0; } }
.slide-img img { width: 100%; height: min(78vh, 720px); object-fit: cover; }
.slide-copy { position: absolute; inset: 0; display: flex; align-items: flex-end; padding-bottom: 64px; }
.slide-copy > div { max-width: 520px; color: #fff; text-shadow: 0 1px 24px rgba(0, 0, 0, .25); }
.slide-copy h2 { font-size: clamp(32px, 4.6vw, 60px); margin: 8px 0 26px; line-height: 1.15; }
.slide-sub { font-size: 15px; opacity: .9; }
.sf .slide-copy .sbtn-solid { background: #fff; border-color: #fff; color: #111; text-shadow: none; }
.hero-plain .slide-copy, .slide:not(:has(.slide-img)) .slide-copy { position: static; padding: 96px 0; }
.hero-plain .slide-copy > div, .slide:not(:has(.slide-img)) .slide-copy > div { color: var(--ink); text-shadow: none; }
.hero-plain .slide:not(:has(.slide-img)) { background: var(--surface); }
.hero-dots { position: absolute; bottom: 24px; inset-inline-end: var(--pad); display: flex; gap: 8px; z-index: 2; }
.hero-dots button { width: 28px; height: 3px; border: 0; padding: 0; background: rgba(255, 255, 255, .45); cursor: pointer; }
.hero-dots button.on { background: #fff; }
/* split: الصورة نص والكلام نص */
.hero-split .slide.on, .hero-split .hero-plain .slide { display: grid; grid-template-columns: 1fr 1.15fr; background: var(--surface); }
.hero-split .slide-img { order: 2; }
.hero-split .slide-img img { height: min(70vh, 620px); }
.hero-split .slide-copy { position: static; align-items: center; padding: 48px clamp(24px, 5vw, 72px); }
.hero-split .slide-copy > div { color: var(--ink); text-shadow: none; }
.sf.hero-split .slide-copy .sbtn-solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.hero-split .hero-dots button { background: color-mix(in srgb, var(--ink) 25%, transparent); }
.hero-split .hero-dots button.on { background: var(--ink); }
/* boxed: بانر جوه كارت بحواف (الالكترونيات والعروض) */
.hero-boxed .hero { width: min(1240px, 100% - 2 * var(--pad)); margin: 20px auto 0; border-radius: var(--radius); }
.hero-boxed .slide-img img { height: min(56vh, 480px); }

/* السكاشن */
.sec { padding: 72px 0; }
.sec-tight { padding-top: 32px; }
.sec-soft { background: var(--surface); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.sec-head h2 { font-size: clamp(22px, 2.4vw, 30px); }
.sec-head a { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 14px; }
.sec-head a:hover { color: var(--ink); }
.sec-head a .ico { transform: scaleX(-1); }

.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.cat { text-align: center; }
.cat-img { display: block; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.card-portrait .cat-img { aspect-ratio: 3/4; }
.b-pill .cat-img, .hero-split.b-pill .cat-img { border-radius: 50%; }
.cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.cat:hover .cat-img img { transform: scale(1.04); }
.cat b { display: block; font-weight: 500; margin-top: 12px; font-size: 14.5px; }
.cat-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-pills a { padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--muted); transition: all .2s; }
.cat-pills a:hover, .cat-pills a.on { border-color: var(--ink); color: var(--ink); }

/* كروت المنتجات */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 20px; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 20px) / 4); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.rail::-webkit-scrollbar { display: none; }
.rail .pc { scroll-snap-align: start; }
.pc { display: block; }
.pc-img { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--surface); border-radius: var(--radius); }
.card-portrait .pc-img { aspect-ratio: 3/4; }
.pc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s var(--ease), transform .9s var(--ease); }
.pc-alt { opacity: 0; }
.pc:hover .pc-alt { opacity: 1; }
.pc:hover .pc-img img:first-child { transform: scale(1.03); }
.pc-ph { position: absolute; inset: 0; background: linear-gradient(135deg, var(--surface), var(--soft-ink)); }
.pc-tag { position: absolute; top: 12px; inset-inline-start: 12px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.dark .pc-tag { color: #0e0e0e; }
.pc-out { background: var(--ink); color: var(--bg); }
.pc-draft { inset-inline-start: auto; inset-inline-end: 12px; background: #171717; color: #fff; }
.pc-body { padding-top: 14px; }
.pc-body h3 { font-family: var(--fb), sans-serif; font-weight: 500; font-size: 14.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-price { margin-top: 4px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.pc-price b { font-weight: 600; font-size: 15px; }
.pc-price s { color: var(--muted); font-size: 13px; }
/* framed: كارت بحدود وخلفية (الالكترونيات) */
.card-framed .pc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; transition: box-shadow .25s, border-color .25s; }
.card-framed .pc:hover { border-color: color-mix(in srgb, var(--ink) 25%, var(--line)); box-shadow: 0 18px 40px -24px rgba(15, 23, 42, .3); }
.card-framed .pc-img { background: var(--bg); border-radius: calc(var(--radius) - 4px); }
.card-framed .pc-img img { object-fit: contain; padding: 8%; }
.card-framed .pc-body { padding: 14px 4px 4px; }
.card-framed .pc-price b { color: var(--accent); }

.banners { display: grid; gap: 20px; }
.banners.b2 { grid-template-columns: 1fr 1fr; }
.banner { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--surface); min-height: 320px; display: flex; align-items: flex-end; }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.banner:hover img { transform: scale(1.03); }
.banner > div { position: relative; padding: 32px; color: #fff; text-shadow: 0 1px 20px rgba(0, 0, 0, .3); }
.banner:not(:has(img)) > div { color: var(--ink); text-shadow: none; }
.banner h3 { font-size: 28px; margin: 4px 0 14px; }
.banner span { font-size: 14px; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

.trust { border-top: 1px solid var(--line); }
.trust-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-in > div { padding: 32px 20px; display: grid; gap: 4px; justify-items: center; text-align: center; border-inline-start: 1px solid var(--line); }
.trust-in > div:first-child { border-inline-start: 0; }
.trust-in .ico { width: 24px; height: 24px; margin-bottom: 8px; color: var(--muted); }
.trust-in b { font-weight: 500; }
.trust-in span { color: var(--muted); font-size: 13.5px; }

/* الصفحات */
.page-head { padding: 40px 0 8px; }
.page-head h1 { font-size: clamp(26px, 3vw, 38px); margin: 6px 0 22px; }
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.pager { display: flex; justify-content: center; gap: 10px; margin-top: 48px; }
.empty-s { text-align: center; padding: 64px 0; color: var(--muted); display: grid; gap: 18px; justify-items: center; }
.prose { max-width: 760px; line-height: 2; }
.prose h2 { margin-bottom: 16px; font-size: 24px; }

/* صفحة المنتج */
.pd { padding-top: 24px; padding-bottom: 40px; }
.pd .crumbs { margin-bottom: 22px; }
.pd-in, .lp-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.gallery { position: sticky; top: 96px; }
.g-main { position: relative; aspect-ratio: 1; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.card-portrait .g-main { aspect-ratio: 4/5; }
.g-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s var(--ease); }
.card-framed .g-main img { object-fit: contain; padding: 6%; }
.g-main img.on { opacity: 1; }
.g-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.g-thumbs button { flex: none; width: 76px; aspect-ratio: 1; padding: 0; border: 1px solid transparent; background: var(--surface); border-radius: calc(var(--radius) / 2); overflow: hidden; cursor: pointer; opacity: .6; transition: opacity .2s, border-color .2s; }
.g-thumbs button.on { opacity: 1; border-color: var(--ink); }
.g-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pd-info h1, .lp-info h1 { font-size: clamp(24px, 2.8vw, 36px); }
.pd-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 14px 0 26px; }
.pd-price b { font-size: 24px; font-weight: 600; }
.pd-price s { color: var(--muted); }
.pd-save { font-size: 13px; color: var(--accent); }
.opt { margin-bottom: 22px; }
.opt p { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.opt p b { color: var(--ink); font-weight: 500; }
.opt-vals { display: flex; gap: 8px; flex-wrap: wrap; }
.opt-vals button { min-width: 52px; height: 44px; padding: 0 16px; border: 1px solid var(--line); background: var(--bg); border-radius: var(--radius); cursor: pointer; transition: border-color .2s; }
.b-pill .opt-vals button { border-radius: 999px; }
.opt-vals button:hover { border-color: var(--muted); }
.opt-vals button.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.opt.need .opt-vals button { border-color: #dc2626; }
.pd-buy { display: flex; gap: 10px; margin-bottom: 10px; }
.pd-buy .sbtn { flex: 1; }
.qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); height: 54px; }
.b-pill .qty { border-radius: 999px; }
.qty button { width: 44px; height: 100%; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.qty input { width: 40px; text-align: center; border: 0; outline: 0; background: transparent; }
.pd-perks { list-style: none; padding: 22px 0; margin: 22px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 10px; font-size: 14px; color: var(--muted); }
.pd-perks li { display: flex; align-items: center; gap: 10px; }
.pd-perks a { color: var(--ink); border-bottom: 1px solid var(--line); }
.pd-desc { padding-top: 26px; }
.pd-desc h2 { font-size: 17px; margin-bottom: 12px; }
.pd-desc div { color: var(--muted); line-height: 2; }
.buy-sheet { max-width: 640px; margin: 40px auto 0; }
.sticky-buy { display: none; }

/* فورم الطلب */
.oform h3 { font-size: 18px; margin-bottom: 18px; }
.of-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.of-wide { grid-column: 1 / -1; }
.of-field { display: grid; gap: 6px; font-size: 13.5px; color: var(--muted); }
.of-field input, .of-field select { height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: min(var(--radius), 12px); background: var(--bg); color: var(--ink); outline: 0; transition: border-color .2s; width: 100%; }
.of-field input:focus, .of-field select:focus { border-color: var(--ink); }
.of-field.bad input, .of-field.bad select { border-color: #dc2626; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.of-sum { margin: 20px 0 14px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 6px; font-size: 14px; }
.of-sum div { display: flex; justify-content: space-between; }
.of-sum span { color: var(--muted); }
.of-sum b { font-weight: 500; }
.of-total { font-size: 16px; padding-top: 6px; }
.of-total span { color: var(--ink); }
.of-total b { font-weight: 600; }
.of-err { color: #dc2626; font-size: 14px; min-height: 0; margin-bottom: 8px; }
.of-err:empty { display: none; }
.of-note { text-align: center; font-size: 13px; color: var(--muted); margin-top: 10px; }
.card-s { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.checkout { display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px; align-items: start; }
.co-items h3 { font-size: 18px; margin-bottom: 14px; }
.co-row, .cart-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.co-row:last-child { border-bottom: 0; }
.co-row img, .cart-row img { width: 64px; height: 64px; object-fit: cover; border-radius: min(var(--radius), 10px); background: var(--surface); flex: none; }
.co-row div, .cart-row div { flex: 1; min-width: 0; font-size: 14px; }
.co-row small, .cart-row small { color: var(--muted); display: block; }
.mini-qty { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; }
.mini-qty button { width: 26px; height: 26px; border: 1px solid var(--line); background: none; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.rm { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; text-decoration: underline; }

/* صفحة الهبوط */
.lp-hero { padding-top: 32px; padding-bottom: 40px; }
.lp-badge { display: inline-block; font-size: 13px; padding: 4px 14px; border-radius: 999px; background: var(--accent); color: #fff; margin-bottom: 14px; }
.dark .lp-badge { color: #0e0e0e; }
.lp-sub { color: var(--muted); font-size: 16px; margin-top: 10px; }
.lp-stars { display: flex; align-items: center; gap: 2px; color: #d4a017; margin-top: 12px; }
.lp-stars .ico { fill: currentColor; }
.lp-stars span { color: var(--muted); font-size: 13px; margin-inline-start: 8px; }
.timer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 20px; font-size: 14px; }
.timer div { display: flex; gap: 4px; direction: ltr; font-variant-numeric: tabular-nums; }
.timer b { background: var(--ink); color: var(--bg); padding: 2px 8px; border-radius: 6px; font-weight: 600; }
.lp-benefits { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.lp-benefits li { display: flex; gap: 10px; align-items: flex-start; }
.lp-benefits .ico { margin-top: 5px; color: var(--accent); }
.lp-order { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: var(--bg); }
.offers { display: grid; gap: 10px; margin-bottom: 22px; }
.offer { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: min(var(--radius), 12px); cursor: pointer; transition: border-color .2s, background .2s; position: relative; }
.offer input { position: absolute; opacity: 0; }
.offer i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--muted); flex: none; }
.offer:has(input:checked) { border-color: var(--ink); background: var(--surface); }
.offer:has(input:checked) i { border: 5px solid var(--ink); }
.offer span { display: grid; }
.offer small { color: var(--accent); font-size: 12.5px; }
.offer em { margin-inline-start: auto; font-style: normal; font-weight: 600; }
.offer-tag { font-size: 11.5px; padding: 2px 10px; border-radius: 999px; background: var(--ink); color: var(--bg); }
.lp-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.lp-gallery img { width: 100%; border-radius: var(--radius); }
.reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.review { margin: 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); }
.review blockquote { margin: 12px 0; line-height: 1.9; }
.review figcaption { color: var(--muted); font-size: 14px; }
.faq-s { max-width: 820px; }
.faq-s details { border-bottom: 1px solid var(--line); }
.faq-s summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; padding: 20px 0; font-weight: 500; }
.faq-s summary::-webkit-details-marker { display: none; }
.faq-s details[open] summary span { transform: rotate(45deg); }
.faq-s summary span { transition: transform .3s; display: grid; }
.faq-s details p { color: var(--muted); padding-bottom: 20px; }

/* الشكر */
.thanks { max-width: 620px; text-align: center; display: grid; gap: 18px; justify-items: center; }
.thanks-ico { width: 72px; height: 72px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; }
.thanks h1 { font-size: clamp(24px, 3vw, 34px); }
.thanks > p { color: var(--muted); }
.thanks-box { width: 100%; text-align: start; padding: 8px 22px; }
.th-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.th-total { border-bottom: 0; font-weight: 600; font-size: 16px; }

/* الفوتر */
.ft { border-top: 1px solid var(--line); padding: 56px 0 28px; margin-top: 40px; background: var(--bg); }
.ft-in { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 40px; }
.ft-brand p { color: var(--muted); max-width: 320px; margin-top: 12px; font-size: 14px; }
.ft-social { display: flex; gap: 8px; margin-top: 16px; }
.ft-social a { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; }
.ft-cols { display: flex; gap: 72px; }
.ft-cols div { display: grid; gap: 10px; align-content: start; font-size: 14px; }
.ft-cols b { font-weight: 500; }
.ft-cols a { color: var(--muted); }
.ft-cols a:hover { color: var(--ink); }
.ft-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* الدروار والسلة */
.drawer { position: fixed; inset: 0; z-index: 80; visibility: hidden; }
.drawer::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); opacity: 0; transition: opacity .3s; }
.drawer.open { visibility: visible; }
.drawer.open::before { opacity: 1; }
.drawer-panel { position: absolute; top: 0; bottom: 0; width: min(420px, 92vw); background: var(--bg); display: flex; flex-direction: column; transition: transform .35s var(--ease); }
.side-start { right: 0; transform: translateX(100%); }
.side-end { left: 0; transform: translateX(-100%); }
.drawer.open .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.drawer-head b { font-weight: 500; font-size: 17px; }
.drawer-nav { display: grid; padding: 8px 20px; }
.drawer-nav a { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.cart-list { flex: 1; overflow-y: auto; padding: 0 20px; }
.cart-empty { padding: 48px 0; text-align: center; color: var(--muted); }
.cart-foot { padding: 18px 20px max(18px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; gap: 12px; }
.cart-sum { display: flex; justify-content: space-between; font-size: 16px; }
.cart-note { text-align: center; color: var(--muted); font-size: 13px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); background: var(--ink); color: var(--bg); padding: 12px 22px; border-radius: 999px; font-size: 14px; opacity: 0; pointer-events: none; transition: all .3s var(--ease); z-index: 90; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.wa-float { position: fixed; bottom: 22px; left: 22px; z-index: 30; width: 52px; height: 52px; border-radius: 50%; background: #1f9d55; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .35); }

/* قريبًا */
.soon { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 24px; }
.soon > div { display: grid; gap: 18px; justify-items: center; }
.soon-logo { max-height: 72px; width: auto; }
.soon-name { font-family: var(--fh), serif; font-size: 22px; letter-spacing: .1em; }
.soon h1 { font-size: clamp(44px, 8vw, 88px); font-weight: 500; }
.soon p { color: var(--muted); }

@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .rail { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
  .hd-nav { display: none; }
  .hd-menu { display: grid; }
  .h-center .hd-in { padding-bottom: 14px; }
}
@media (max-width: 760px) {
  :root { --pad: 16px; }
  .hd-in { height: 62px; gap: 8px; }
  .h-center .hd-in { grid-template-columns: auto 1fr auto; padding: 0; }
  .h-center .logo { grid-column: 2; }
  .h-center .hd-menu { grid-column: 1; grid-row: 1; }
  .logo img { max-height: 36px; max-width: 140px; }
  .h-bar .hd-search { display: none; }
  .h-bar .hd-search-btn { display: grid; }
  .slide-img img { height: 62vh; }
  .slide-copy { padding-bottom: 40px; }
  .hero-split .slide.on { grid-template-columns: 1fr; }
  .hero-split .slide-img { order: 0; }
  .hero-split .slide-img img { height: 46vh; }
  .hero-split .slide-copy { padding: 32px 20px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .rail { grid-auto-columns: 44%; gap: 12px; }
  .sec { padding: 48px 0; }
  .banners.b2 { grid-template-columns: 1fr; }
  .banner { min-height: 240px; }
  .trust-in { grid-template-columns: 1fr 1fr; }
  .trust-in > div:nth-child(3) { border-inline-start: 0; }
  .trust-in > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .pd-in, .lp-hero, .checkout { grid-template-columns: 1fr; }
  .gallery { position: static; margin-inline: calc(-1 * var(--pad)); }
  .g-main { border-radius: 0; }
  .g-thumbs { padding-inline: var(--pad); }
  .of-grid { grid-template-columns: 1fr; }
  .sticky-buy { display: flex; align-items: center; gap: 12px; justify-content: space-between; position: fixed; inset: auto 0 0; z-index: 35; padding: 10px var(--pad) max(10px, env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .3s var(--ease); }
  .sticky-buy.show, .sticky-buy.sticky-always { transform: none; }
  .sticky-buy .sbtn { flex: 1; max-width: 60%; }
  .wa-float { bottom: 86px; left: 14px; width: 48px; height: 48px; }
  .ft-cols { gap: 40px; }
  .card-s { padding: 18px; }
  .lp-order { padding: 16px; margin-inline: calc(-1 * var(--pad) + 4px); }
}
/* ───── اقسام الصفحة الرئيسية الاضافية ───── */
.video-sec { position: relative; overflow: hidden; background: #000; }
.video-sec video, .video-sec iframe { display: block; width: 100%; height: min(70vh, 640px); object-fit: cover; border: 0; }
.video-copy { position: absolute; inset: 0; display: flex; align-items: flex-end; padding-bottom: 56px; pointer-events: none; }
.video-copy > div { color: #fff; max-width: 520px; text-shadow: 0 1px 24px rgba(0, 0, 0, .35); pointer-events: auto; }
.video-copy h2 { font-size: clamp(28px, 4vw, 48px); margin-bottom: 10px; }
.video-copy p { opacity: .9; margin-bottom: 22px; }
.sf .video-copy .sbtn-solid { background: #fff; border-color: #fff; color: #111; text-shadow: none; }
.video-sec:has(iframe) { background: var(--bg); }
.video-sec:has(iframe) .video-copy { position: static; padding: 28px 0 0; }
.video-sec:has(iframe) .video-copy > div { color: var(--ink); text-shadow: none; }

.ba-wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.ba { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius); background: var(--surface); user-select: none; }
.ba > img, .ba-before img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; transform: translateX(-1px); box-shadow: 0 0 12px rgba(0, 0, 0, .25); pointer-events: none; }
.ba-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; direction: ltr; margin: 0; }
.ba-tag { position: absolute; top: 14px; font-size: 12px; padding: 3px 12px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; }
.ba-t1 { left: 14px; } .ba-t2 { right: 14px; }
.ba-copy h2, .about-copy h2, .look-copy h2 { font-size: clamp(24px, 3vw, 36px); margin: 6px 0 14px; }
.ba-copy p, .about-copy > p:not(.slide-sub) { color: var(--muted); line-height: 2; margin-bottom: 24px; }

.look { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.look-img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius); }
.look-list { display: grid; margin-top: 18px; border-top: 1px solid var(--line); }
.look-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.look-item img { width: 64px; height: 64px; object-fit: cover; border-radius: min(var(--radius), 10px); background: var(--surface); }
.look-item span { flex: 1; display: grid; }
.look-item small { color: var(--muted); }
.look-item .ico { transform: scaleX(-1); color: var(--muted); }

.values { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.value { padding: 30px 24px 0; border-inline-start: 1px solid var(--line); }
.value:first-child { border-inline-start: 0; padding-inline-start: 0; }
.value span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.value h3 { font-size: 18px; margin: 18px 0 8px; }
.value p { color: var(--muted); font-size: 14.5px; line-height: 1.9; }

.about-b { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.about-b:not(:has(.about-img)) { grid-template-columns: 1fr; max-width: 760px; text-align: center; }
.about-img img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: var(--radius); }

.rail-reviews { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
.rail-reviews .review { background: var(--bg); margin: 0; }

.feat-in { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; padding: 22px 0; }
.feat-in-track { display: flex; gap: 64px; width: max-content; animation: ann 36s linear infinite; padding-inline: 32px; }
.feat-in-track span { font-family: var(--fh), serif; font-size: 20px; color: var(--muted); white-space: nowrap; letter-spacing: .04em; }

.news { text-align: center; max-width: 640px; display: grid; gap: 14px; justify-items: center; padding: 48px 24px; border: 1px solid var(--line); border-radius: var(--radius); }
.news h2 { font-size: clamp(22px, 2.6vw, 32px); }
.news p { color: var(--muted); }

@media (max-width: 760px) {
  .ba-wrap, .look, .about-b { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .value:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .rail-reviews { grid-auto-columns: 82%; }
  .video-sec video { height: 56vh; }
}
/* ───── الحركة: ظهور العناصر مع النزول، وتقريب بطيء لصور البانر ───── */
.js .mv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.js .mv.in { opacity: 1; transform: none; }
.slide.on .slide-img img { animation: kenburns 9s ease-out both; }
@keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
.slide.on .slide-copy > div > * { animation: rise .9s var(--ease) both; }
.slide.on .slide-copy > div > *:nth-child(2) { animation-delay: .12s; }
.slide.on .slide-copy > div > *:nth-child(3) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.banner img, .about-img img, .look-img img { will-change: transform; }
.js .banner.mv img { transform: scale(1.12); transition: transform 1.6s var(--ease); }
.js .banner.mv.in img { transform: scale(1); }
.banner:hover img { transform: scale(1.04) !important; }
.pc-img { transition: box-shadow .35s var(--ease); }
.pc:hover .pc-img { box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .35); }
.sbtn { position: relative; overflow: hidden; }
.sbtn-solid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.sbtn-solid:hover::after { transform: translateX(120%); }
.ba.hint .ba-before, .ba.hint .ba-handle { transition: clip-path 1.2s var(--ease), left 1.2s var(--ease); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .js .mv { opacity: 1; transform: none; } }