/* =====================================================================
   تنسيق الموقع. الألوان والخطوط الفعلية بتتحط في <head> من جدول ThemeSettings
   (متغيرات :root)، والقيم هنا هي الافتراضي لو الجدول فاضي.
   ===================================================================== */
:root {
    --bg: #000000;
    --text: #FFFFFF;
    --muted: #8C8C8C;
    --line: #1E1E1E;
    --accent: #C9A227;
    --radius: 0px;
    --font-head: 'Montserrat', 'Noto Kufi Arabic', sans-serif;
    --font-body: 'Inter', 'IBM Plex Sans Arabic', sans-serif;
    --bar-h: 72px;
    --pad-x: 6vw;
}

html { scroll-behavior: smooth; }
html, body { background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.8; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1:focus { outline: none; }

/* خطوط MudBlazor تتبع خطوط الثيم */
.mud-typography, .mud-button-root, .mud-input, .mud-input-label { font-family: var(--font-body) !important; }
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6 { font-family: var(--font-head) !important; }
h1, h2, h3 { font-family: var(--font-head); }
.muted { color: var(--muted); }
.container { padding-inline: var(--pad-x); max-width: 1500px; margin-inline: auto; }
.container.narrow { max-width: 900px; }

/* ---------- الشريط العلوي والمينيو ---------- */
.mud-appbar.site-appbar {
    background: rgba(0,0,0,.6) !important; backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line); box-shadow: none; height: var(--bar-h);
    padding-inline: var(--pad-x);
}
.site-logo { font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; color: var(--text); }
.site-nav { display: flex; gap: 36px; align-items: center; }
.nav-item { position: relative; }
.nav-link { font-size: .95rem; color: var(--muted); transition: color .2s; background: none; border: 0; cursor: pointer; font-family: inherit; }
.nav-link:hover, .nav-link.active { color: var(--text); }
.nav-sub { display: none; position: absolute; inset-inline-start: 0; top: 100%; min-width: 180px; background: var(--bg); border: 1px solid var(--line); padding: 8px 0; }
.nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub { display: block; }
.nav-sub a { display: block; padding: 8px 18px; color: var(--muted); }
.nav-sub a:hover { color: var(--text); }
.nav-burger { display: none !important; }
.mobile-nav { position: fixed; top: var(--bar-h); inset-inline: 0; z-index: 1099; background: var(--bg); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; padding: 8px var(--pad-x) 20px; }
.mobile-nav a { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.mobile-nav a.child { padding-inline-start: 18px; color: var(--muted); }

.mud-main-content.site-main { padding-top: var(--bar-h); min-height: 100vh; }

/* ---------- الهيرو (السلايدر) ---------- */
.hero { position: relative; height: 100vh; min-height: 620px; margin-top: calc(-1 * var(--bar-h)); }
.hero-carousel, .hero-carousel .mud-carousel-item { height: 100% !important; }
.hero-slide { position: relative; height: 100%; background-size: cover; background-position: center; display: flex; align-items: flex-end; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, #000 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.2) 100%); }
.hero-content { position: relative; padding: 0 var(--pad-x) 120px; max-width: 760px; margin-inline-start: 0; text-align: start; }
.hero h1 { font-weight: 800; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.25; margin: 0; }
.hero p { color: #BDBDBD; font-size: 1.1rem; margin-top: 18px; max-width: 540px; }
.hero-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero-empty { display: flex; align-items: flex-end; background: linear-gradient(135deg, #2a2a30, #0c0c0e); }

/* ---------- الأقسام ---------- */
.band { padding: 110px 0; border-top: 1px solid var(--line); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 52px; flex-wrap: wrap; }
.section-head h1, .section-head h2 { font-weight: 700; font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin: 0; }
.section-head p { max-width: 420px; margin: 0; }
.section-cta { margin-top: 36px; }
.body-text { white-space: pre-line; color: #CFCFCF; font-size: 1.05rem; }

.services-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); border-top: 1px solid var(--line); }
.service { padding-block: 36px; padding-inline-end: 28px; border-bottom: 1px solid var(--line); }
.service + .service { padding-inline-start: 28px; border-inline-start: 1px solid var(--line); }
.service h3 { font-weight: 700; font-size: 1.2rem; margin: 10px 0; }
.service p { margin: 0; font-size: .95rem; }
.service-icon { font-size: 2rem !important; }

.stats-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 24px; }
.stat-num { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.4rem); color: var(--accent); }

.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 32px; }
.projects-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 36px 24px; }
.project { display: block; grid-column: span 3; }
.project:nth-child(4n+1) { grid-column: span 4; }
.project:nth-child(4n+2) { grid-column: span 2; }
.project:nth-child(4n+3) { grid-column: span 2; }
.project:nth-child(4n+4) { grid-column: span 4; }
.thumb { aspect-ratio: 4 / 3; background-size: cover; background-position: center; position: relative; transition: opacity .2s; }
.project:hover .thumb { opacity: .85; }
.project:nth-child(4n+4) .thumb { aspect-ratio: 16 / 9; }
.thumb::after { content: ""; position: absolute; inset: 14px; border: 1px dashed rgba(255,255,255,.12); }
/* خط القياس الذهبي */
.dim { position: relative; height: 1px; background: var(--accent); margin: 30px 0 12px; }
.dim::before, .dim::after { content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: var(--accent); }
.dim::before { inset-inline-start: 0; }
.dim::after { inset-inline-end: 0; }
.dim span { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font-size: .8rem; color: var(--accent); background: var(--bg); padding: 0 8px; white-space: nowrap; }
.project h3 { font-weight: 700; font-size: 1.1rem; margin: 0; }

.cta-band .cta { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.cta h2 { font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0; }
.cta p { margin: 6px 0 0; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

/* ---------- تفاصيل المشروع ---------- */
.details-band { padding-top: 56px; }
.crumbs { margin-bottom: 18px; font-size: .9rem; }
.details { display: grid; grid-template-columns: 2fr 1fr; gap: 64px; align-items: start; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-empty { grid-column: 1 / -1; aspect-ratio: 16 / 9; background-size: cover; background-position: center; }
.specs { border-top: 1px solid var(--line); margin: 0; }
.specs > div { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.specs dt { color: var(--muted); }
.specs dd { font-weight: 500; margin: 0; }
.project-body { margin-top: 56px; max-width: 900px; }

/* ---------- اتصل بنا ---------- */
.contact { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; }
.contact-info dl { margin: 0; }
.contact-info dl > div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-info dt { color: var(--muted); font-size: .85rem; }
.contact-info dd { margin: 0; }
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.send-btn { align-self: flex-start; margin-top: 10px; }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }
.map-band { padding: 0; }
.map-band iframe { width: 100%; border: 0; display: block; filter: grayscale(1) invert(.92) contrast(.9); }

/* ---------- الفوتر ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 40px var(--pad-x); color: var(--muted); font-size: .9rem; }
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-name { font-family: var(--font-head); font-weight: 700; color: var(--text); }
.footer-nav { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-nav a:hover { color: var(--text); }
.footer-bottom { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.footer-privacy:hover { color: var(--text); }

/* ---------- سياسة الخصوصية ---------- */
.policy { max-width: 820px; }
.policy h1 { margin-bottom: 32px; }
.policy h2 { font-size: 1.15rem; margin: 32px 0 8px; }
.policy p { color: var(--muted); line-height: 1.8; margin: 0 0 12px; }

/* ---------- خانة الموافقة في فورم التواصل ---------- */
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--muted); cursor: pointer; }
.consent input { margin-top: 3px; accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.consent a { color: var(--accent); text-decoration: underline; }
.consent-error { color: #ff6b6b; }
.consent-msg { color: #ff6b6b; font-size: .8rem; margin-top: -8px; }

/* ---------- إشعار الكوكيز ---------- */
.cookie-notice { display: none; position: fixed; inset-inline: 16px; bottom: 16px; z-index: 1400; max-width: 560px; margin-inline: auto;
    align-items: center; gap: 16px; padding: 14px 18px; background: var(--bg); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--radius, 0); box-shadow: 0 8px 30px rgba(0,0,0,.5); font-size: .85rem; }
.cookie-notice.show { display: flex; }
.cookie-notice p { margin: 0; flex: 1; line-height: 1.6; }
.cookie-notice a { color: var(--accent); text-decoration: underline; }
.cookie-notice button { background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: 8px 18px; cursor: pointer; font: inherit; white-space: nowrap; }
.cookie-notice button:hover { background: var(--accent); color: var(--bg); }

.notfound { padding-block: 140px; text-align: center; }
.notfound h1 { font-size: 5rem; margin: 0; color: var(--accent); }

/* ---------- لوحة التحكم ---------- */
.admin-main { background: var(--bg); }
.admin-container { padding-block: 40px; }
.admin-nav { margin-inline-end: 24px; }
.logout-form { margin: 0; }
.stat-card { padding: 24px; display: flex; flex-direction: column; gap: 4px; background: transparent !important; }
.stat-card .of { font-size: 1.2rem; color: var(--muted); }

/* ---------- صفحة دخول الأدمن (Static SSR) ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 420px; border: 1px solid var(--line); padding: 40px 32px; }
.login-card h1 { font-size: 1.5rem; margin: 0 0 28px; font-weight: 700; }
.login-card .field { border-bottom: 1px solid #333; padding: 10px 0; margin-bottom: 18px; }
.login-card .field:focus-within { border-color: var(--accent); }
.login-card label { display: block; color: var(--muted); font-size: .85rem; }
.login-card input[type=text], .login-card input[type=password], .login-card input:not([type]) { width: 100%; background: none; border: 0; color: var(--text); font: inherit; outline: none; padding-top: 6px; }
.login-card .remember { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.login-btn { width: 100%; padding: 14px; background: var(--accent); color: var(--bg); border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.login-btn:hover { filter: brightness(1.1); }
.login-error { border: 1px solid #7a2a2a; color: #ff8a8a; padding: 10px 14px; margin-bottom: 18px; }
.validation-message { color: #ff8a8a; font-size: .85rem; }

/* لغة الموقع الأساسية إنجليزي (LTR). العربي (RTL) بيتفعّل من html[dir=rtl] لما الزائر يدوس AR */
h1, h2, h3 { letter-spacing: -.01em; }

/* ---------- زر اللغة (زر واحد بيعرض اللغة التانية) ---------- */
/* كل القواعد بتبدأ بـ .mud-appbar.site-appbar عشان الـ specificity تغلب أي CSS بتاع MudBlazor جوه الـ AppBar */
.mud-appbar.site-appbar .lang-switch {
    display: flex;                              /* حاوية بسيطة للزر */
    align-items: center;                        /* توسيط رأسي في الشريط */
    flex-shrink: 0;                             /* ممنوع الـ flex يضغطه ويلزقه في المينيو */
    margin-inline-start: 0;                     /* المسافة الخارجية على .site-nav (32px inline في MainLayout) */
}
.mud-appbar.site-appbar .lang-switch .lang-btn {
    display: inline-flex !important;            /* أيقونة + نص جنب بعض */
    align-items: center;                        /* توسيط الأيقونة مع النص */
    gap: 8px;                                   /* مسافة بين الأيقونة والنص */
    padding: 8px 18px;                          /* مساحة داخلية مريحة (شكل كبسولة) */
    min-height: 40px;                           /* ارتفاع مناسب للمس */
    border: 1px solid var(--accent) !important; /* إطار رفيع بالذهبي */
    border-radius: 999px;                       /* كبسولة مستديرة بالكامل */
    background: transparent !important;         /* شفاف في الوضع العادي */
    color: var(--text) !important;              /* النص بلون النص الأساسي (أبيض) */
    font: inherit;                              /* ياخد خط الموقع (الإنجليزي أو العربي حسب اللغة) */
    font-size: .88rem;                          /* حجم مناسب للشريط */
    font-weight: 600;                           /* خط شبه عريض واضح */
    line-height: 1;                             /* يمنع ارتفاع سطر زيادة */
    white-space: nowrap;                        /* النص يفضل في سطر واحد */
    cursor: pointer;                            /* شكل الإيد */
    transition: background-color .2s, color .2s; /* انتقال ناعم عند الـ hover */
}
.mud-appbar.site-appbar .lang-switch .lang-btn:hover {
    background: var(--accent) !important;       /* عند المرور بالماوس يتملي بالذهبي */
    color: var(--bg) !important;                /* والنص يتحول للون الخلفية (غامق) عشان يتقري */
}
.mud-appbar.site-appbar .lang-switch .lang-btn:focus-visible {
    outline: 2px solid var(--accent);           /* حلقة تركيز واضحة للكيبورد */
    outline-offset: 3px;                        /* بعيدة عن الزر شوية */
}
.mud-appbar.site-appbar .lang-switch .lang-btn .mud-icon-root {
    font-size: 1.15rem;                         /* حجم الأيقونة */
    color: inherit;                             /* الأيقونة تاخد لون النص (وتتغير مع الـ hover) */
}

/* ---------- سطر المطوّر في آخر الفوتر ---------- */
.site-footer .footer-dev {
    display: flex;                              /* العناصر الثلاثة في صف واحد */
    justify-content: center;                    /* في نص الصفحة */
    align-items: center;                        /* على نفس الخط */
    flex-wrap: wrap;                            /* لو الشاشة ضيقة ينزلوا سطر تاني */
    gap: 8px;                                   /* مسافة بين العناصر */
    margin-top: 24px;                           /* مسافة عن سطر حقوق النشر */
    padding-top: 16px;                          /* مسافة بين الخط وسطر المطوّر */
    border-top: 1px solid var(--line);          /* خط رفيع فاصل */
    font-size: .8rem;                           /* أصغر من باقي الفوتر */
    color: var(--muted);                        /* لون باهت */
}
.site-footer .footer-dev {
    gap: 10px;
}
.site-footer .footer-dev .dev-name {
    color: inherit;                             /* نفس لون كلمة Developed by / تطوير */
    font-size: .85rem;                          /* قريب من حجم كلمة Developed by */
    font-weight: inherit;                       /* نفس سماكة كلمة Developed by بالظبط (من الفوتر). لو عايزه أرفع: 300 */
    letter-spacing: .03em;
}
.site-footer .footer-dev .dev-phone {
    display: inline-flex;                       /* الأيقونة جنب الرقم */
    align-items: center;
    gap: 6px;
    color: inherit;                             /* نفس لون كلمة Developed by / تطوير */
    font-weight: inherit;                       /* نفس سماكة كلمة Developed by */
    font-size: .85rem;
    direction: ltr;                             /* الرقم دايماً من الشمال لليمين (علامة + في مكانها حتى في العربي) */
    unicode-bidi: isolate;
    text-decoration: none;
}
.site-footer .footer-dev .dev-phone .mud-icon-root {
    color: inherit;
}
.site-footer .footer-dev .dev-phone:hover { color: var(--text); }   /* الرقم يفتح شوية عند الوقوف عليه */
/* روابط بيانات التواصل (اتصال / واتساب / إيميل) بلون النص العادي */
.contact-info dd a { color: inherit; text-decoration: none; unicode-bidi: isolate; }
.contact-info dd a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- العربي (RTL) ---------- */
/* الحروف العربية متصلة، فأي letter-spacing بيقطّعها */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; }
/* التدرّج فوق صورة السلايدر بيبدأ من ناحية النص (يمين في العربي) */
[dir="rtl"] .hero-overlay { background: linear-gradient(to left, #000 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.2) 100%); }
[dir="rtl"] .hero p, [dir="rtl"] .section-head p { line-height: 2; }

/* ---------- ريسبونسف: تابلت وموبايل ---------- */
html, body { overflow-x: hidden; }
.mud-main-content, .container { min-width: 0; }
.nav-link, .mobile-nav a { min-height: 44px; display: inline-flex; align-items: center; }   /* مساحة لمس مريحة */

@media (max-width: 1100px) {
    :root { --pad-x: 5vw; }
    .site-nav { gap: 24px; }
    .contact { gap: 48px; }
    .details { gap: 40px; }
}

@media (max-width: 900px) {
    :root { --bar-h: 64px; }
    .site-nav:not(.admin-nav) { display: none; }
    .nav-burger { display: inline-flex !important; }
    .mud-appbar.site-appbar .lang-switch { margin-inline-start: 12px; margin-inline-end: 4px; }   /* على الموبايل مسافة أصغر عشان الشريط ضيق */
    .mud-appbar.site-appbar .lang-switch .lang-btn { padding: 6px 12px; min-height: 36px; font-size: .8rem; }   /* زر أصغر على الموبايل */
    .mud-appbar.site-appbar .lang-switch .lang-btn .mud-icon-root { display: none; }   /* نخفي الأيقونة على الموبايل ونسيب الاسم بس */
    .site-logo { font-size: 1.05rem; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .band { padding: 64px 0; }
    .section-head { margin-bottom: 32px; }
    .hero { height: 100svh; min-height: 520px; }
    .hero-content { padding-bottom: 80px; }
    .hero p { font-size: 1rem; }
    .services-grid { grid-template-columns: 1fr; }
    .service { padding-inline-end: 0; }
    .service + .service { padding-inline-start: 0; border-inline-start: 0; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .projects-grid { grid-template-columns: 1fr; gap: 32px; }
    .project, .project:nth-child(n) { grid-column: auto; }
    .project:nth-child(n) .thumb { aspect-ratio: 4 / 3; }
    .details, .contact { grid-template-columns: 1fr; gap: 36px; }
    .gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
    .cta-band .cta { flex-direction: column; align-items: flex-start; }
    .footer-top { flex-direction: column; align-items: flex-start; }
    .map-band iframe { height: 280px !important; }
    .send-btn { width: 100%; align-self: stretch; }

    /* لوحة التحكم: الشريط يبان كله ويتمرر أفقياً بدل ما يختفي */
    .admin-appbar .site-logo { display: none; }
    .admin-nav { display: flex !important; gap: 4px; overflow-x: auto; margin-inline-end: 8px; flex: 1; scrollbar-width: none; }
    .admin-nav .nav-link { padding: 0 10px; font-size: .85rem; white-space: nowrap; }
    .admin-container { padding-block: 24px; }
    /* قايمة More في الأدمن: على الموبايل الروابط تبان جنب بعض بدل الـ dropdown */
    .admin-nav .nav-item { display: flex; }
    .admin-nav .more-label { display: none; }
    .admin-nav .nav-sub { display: flex !important; position: static; border: 0; padding: 0; min-width: 0; background: none; }
    .admin-nav .nav-sub a { padding: 0 10px; font-size: .85rem; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 600px) {
    :root { --pad-x: 20px; }
    .hero h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
    .hero-actions .mud-button-root { flex: 1 1 100%; }
    .gallery { grid-template-columns: 1fr; }
    .stat-num { font-size: 2.2rem; }
    .specs > div { flex-direction: column; gap: 2px; }
    .login-card { padding: 28px 20px; }
    .admin-gallery { grid-template-columns: 1fr; }
    .admin-cover { flex-direction: column; align-items: flex-start; }
    .mud-carousel .mud-icon-button { transform: scale(.8); }   /* أسهم السلايدر أصغر على الموبايل */
    .mud-snackbar-provider, .mud-snackbar-location-bottom-left { width: calc(100vw - 24px); }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* ---------- رسالة خطأ Blazor ---------- */
#blazor-error-ui {
    color-scheme: light only; background: lightyellow; color: #000; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    box-sizing: border-box; display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 10000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "حصل خطأ."; }

/* ---------- رفع الصور في لوحة التحكم ---------- */
.upload-btn { display: inline-block; padding: 8px 16px; border: 1px solid var(--accent); color: var(--accent); cursor: pointer; font-size: .9rem; border-radius: var(--radius); }
.upload-btn:hover { background: rgba(201,162,39,.1); }
.upload-btn input[type=file] { display: none; }
.admin-cover { display: flex; align-items: center; gap: 16px; margin: 10px 0 14px; }
.admin-cover img { height: 90px; width: 140px; object-fit: cover; border: 1px solid var(--line); }
.admin-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.admin-thumb { border: 1px solid var(--line); }
.admin-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.admin-thumb .meta { padding: 8px 10px; }
.slide-thumb { aspect-ratio: 16 / 9; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; background: #0c0c0c; }
.slide-thumb img { width: 100%; height: 100%; object-fit: cover; }
.color-swatch { width: 44px; height: 36px; padding: 0; border: 1px solid var(--line); background: none; cursor: pointer; }