/*
 Theme Name:   Hands Child
 Theme URI:    https://hands.sa
 Description:  Child theme for Al-Ayadi Al-Amila smart systems website
 Author:       Hands
 Author URI:   https://hands.sa
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hands-child
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
    --navy-deep: #0f172a;
    --navy-corp: #0f2557;
    --blue-pro: #1a5298;
    --primary: #38bdf8;
    --slate-soft: #e2e8f0;
    --white-base: #fafbfc;
    --slate-dark: #1e293b;
}

body {
    font-family: 'Cairo', sans-serif;
    background-color: var(--white-base);
    direction: rtl;
}

.blueprint-grid {
    background-image:
        linear-gradient(to right, rgba(226, 232, 240, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(226, 232, 240, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

.marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: 4rem;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.marquee-content {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    min-width: 100%;
    gap: 4rem;
    animation: scroll 30s linear infinite;
}

@keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

.rtl-hover-translate:hover {
    transform: translateX(-8px);
}

.glass-header {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Material Symbols Outlined icon fix for RTL pages */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ============================================
   GLOBAL MODERN DESIGN IMPROVEMENTS
   ============================================ */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Better text rendering */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Premium card style */
.card-premium {
    background: #fff;
    border: 1px solid var(--slate-soft);
    border-radius: 24px;
    box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06);
    transition: box-shadow .25s, transform .25s, border-color .25s;
}
.card-premium:hover {
    box-shadow: 0 8px 40px rgba(15,37,87,.12);
    transform: translateY(-3px);
    border-color: rgba(56,189,248,.3);
}

/* Kill pgs-section pseudo-element orbs */
.pgs-section::before,
.pgs-section::after {
    content: none !important;
    display: none !important;
}

/* Gradient text utility */
.gradient-text {
    background: linear-gradient(135deg, var(--blue-pro) 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Section label badge */
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(56,189,248,.08);
    border: 1px solid rgba(56,189,248,.2);
    color: var(--blue-pro);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* Button primary */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--navy-corp), var(--blue-pro));
    color: #fff;
    font-weight: 800;
    font-size: .875rem;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    transition: opacity .2s, transform .2s, box-shadow .2s;
    box-shadow: 0 4px 20px rgba(15,37,87,.25);
    text-decoration: none;
}
.btn-primary:hover {
    opacity: .92;
    transform: translateX(-4px);
    box-shadow: 0 8px 30px rgba(26,82,152,.3);
}

/* Button secondary */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: transparent;
    color: var(--navy-deep);
    font-weight: 800;
    font-size: .875rem;
    border-radius: 14px;
    border: 1.5px solid var(--slate-soft);
    cursor: pointer;
    transition: border-color .2s, color .2s, transform .2s;
    text-decoration: none;
}
.btn-secondary:hover {
    border-color: var(--blue-pro);
    color: var(--blue-pro);
    transform: translateX(-4px);
}

/* Divider with glow */
.divider-glow {
    height: 1px;
    background: linear-gradient(to left, transparent, var(--primary), transparent);
    opacity: .4;
}

/* Header nav dropdown shadow */
.nav-dropdown {
    box-shadow: 0 20px 60px rgba(15,23,42,.15), 0 4px 16px rgba(15,23,42,.08);
}

/* Active nav indicator */
.nav-link.active {
    color: var(--navy-corp);
}
.nav-link.active::after {
    content: '';
    display: block;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
    margin-top: 2px;
}

/* Responsive hide scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Shimmer loading animation */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}
.shimmer {
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
    background-size: 1000px 100%;
    animation: shimmer 2.5s infinite linear;
}

/* Stagger animation helper */
.stagger > * { opacity: 0; animation: fadeIn .6s ease forwards; }
.stagger > *:nth-child(1) { animation-delay: .05s; }
.stagger > *:nth-child(2) { animation-delay: .1s; }
.stagger > *:nth-child(3) { animation-delay: .15s; }
.stagger > *:nth-child(4) { animation-delay: .2s; }
.stagger > *:nth-child(5) { animation-delay: .25s; }
.stagger > *:nth-child(6) { animation-delay: .3s; }

/* Stats number highlight */
.stat-number {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1;
    color: var(--primary);
}

/* RTL-aware transitions */
[dir="rtl"] .rtl-hover-translate:hover { transform: translateX(-8px); }
[dir="rtl"] .btn-primary:hover         { transform: translateX(-4px); }
[dir="rtl"] .btn-secondary:hover       { transform: translateX(-4px); }

/* ============================================
   CUSTOM DESIGN-SYSTEM UTILITIES
   Resolves all custom class names used across
   page templates (non-standard Tailwind names).
   ============================================ */

/* ── Extended CSS variables ── */
:root {
    --accent:          #38bdf8;   /* = --primary  */
    --secondary:       #64748b;   /* slate-500    */
    --heading:         #0f172a;   /* = --navy-deep */
    --body-color:      #334155;   /* slate-700    */
    --soft-bg:         #f1f5f9;   /* slate-100    */
    --brand-sky:       #38bdf8;
    --brand-deep:      #0f172a;
    --brand-slate:     #1e293b;
    --brand-accent:    #38bdf8;
    --navy:            #0f172a;
    --navy-primary:    #0f2557;
    --navy-corporate:  #0f2557;
    --navy-brand:      #0f2557;
    --navy-muted:      #475569;   /* slate-600    */
    --v5-primary:      #38bdf8;
    --v5-accent:       #38bdf8;
    --v5-navy:         #0f2557;
    --v5-navy-deep:    #0f172a;
    --v5-blue:         #1a5298;
    --morgan-navy:     #0f172a;
    --navy-800:        #0f2040;
    --background-dark: #0f172a;
    --surface:         #ffffff;
    --border-color:    #e2e8f0;
}

/* ── Text color utilities ── */
.text-primary        { color: var(--primary) !important; }
.text-accent         { color: var(--accent) !important; }
.text-secondary      { color: var(--secondary) !important; }
.text-heading        { color: var(--heading) !important; }
.text-body           { color: var(--body-color) !important; }
.text-body-slate     { color: var(--body-color) !important; }
.text-navy           { color: var(--navy) !important; }
.text-navy-deep      { color: var(--navy-deep) !important; }
.text-navy-corp      { color: var(--navy-corp) !important; }
.text-navy-corporate { color: var(--navy-corporate) !important; }
.text-navy-primary   { color: var(--navy-primary) !important; }
.text-navy-muted     { color: var(--navy-muted) !important; }
.text-navy-v5        { color: var(--navy) !important; }
.text-navy-brand     { color: var(--navy) !important; }
.text-navy-800       { color: var(--navy-800) !important; }
.text-brand-sky      { color: var(--brand-sky) !important; }
.text-brand-dark     { color: var(--brand-deep) !important; }
.text-brand-slate    { color: var(--brand-slate) !important; }
.text-brand-accent   { color: var(--brand-accent) !important; }
.text-blue-pro       { color: var(--blue-pro) !important; }
.text-v5-primary     { color: var(--v5-primary) !important; }
.text-v5-accent      { color: var(--v5-accent) !important; }
.text-v5-navy        { color: var(--v5-navy) !important; }
.text-v5-navy-deep   { color: var(--v5-navy-deep) !important; }
.text-v5-blue        { color: var(--v5-blue) !important; }
.text-morgan-navy    { color: var(--morgan-navy) !important; }
.text-slate-custom   { color: #475569 !important; }

/* ── Background utilities ── */
.bg-primary          { background-color: var(--primary) !important; }
.bg-accent           { background-color: var(--accent) !important; }
.bg-secondary        { background-color: var(--secondary) !important; }
.bg-navy             { background-color: var(--navy) !important; }
.bg-navy-deep        { background-color: var(--navy-deep) !important; }
.bg-navy-corp        { background-color: var(--navy-corp) !important; }
.bg-navy-corporate   { background-color: var(--navy-corporate) !important; }
.bg-navy-primary     { background-color: var(--navy-primary) !important; }
.bg-navy-brand       { background-color: var(--navy-brand) !important; }
.bg-navy-v5          { background-color: var(--navy) !important; }
.bg-brand-sky        { background-color: var(--brand-sky) !important; }
.bg-brand-deep       { background-color: var(--brand-deep) !important; }
.bg-brand-slate      { background-color: var(--brand-slate) !important; }
.bg-brand-accent     { background-color: var(--brand-accent) !important; }
.bg-blue-pro         { background-color: var(--blue-pro) !important; }
.bg-v5-primary       { background-color: var(--v5-primary) !important; }
.bg-v5-accent        { background-color: var(--v5-accent) !important; }
.bg-soft-bg          { background-color: var(--soft-bg) !important; }
.bg-surface          { background-color: var(--surface) !important; }
.bg-background-dark  { background-color: var(--background-dark) !important; }
.bg-primary-navy     { background-color: var(--navy) !important; }

/* ── Border utilities ── */
.border-primary      { border-color: var(--primary) !important; }
.border-accent       { border-color: var(--accent) !important; }
.border-navy-corp    { border-color: var(--navy-corp) !important; }
.border-brand-sky    { border-color: var(--brand-sky) !important; }
.border-v5-accent    { border-color: var(--v5-accent) !important; }
.border-soft-bg      { border-color: var(--soft-bg) !important; }
.border-border-color { border-color: var(--border-color) !important; }
.border-blue-pro     { border-color: var(--blue-pro) !important; }

/* ── Contrast fix: ensure text is readable on custom backgrounds ── */
.bg-primary,
.bg-accent,
.bg-brand-sky,
.bg-v5-primary,
.bg-v5-accent,
.bg-brand-accent      { color: var(--navy-deep); }  /* dark text on light sky-blue */

.bg-navy,
.bg-navy-deep,
.bg-navy-corp,
.bg-navy-corporate,
.bg-navy-primary,
.bg-navy-brand,
.bg-navy-v5,
.bg-brand-deep,
.bg-brand-slate,
.bg-background-dark   { color: #fff; }              /* white text on dark navy bg  */

/* ── Interaction utilities ── */
.hover-rtl-shift      { transition: transform .25s ease; }
.hover-rtl-shift:hover{ transform: translateX(-4px); }
.interactive-element  { cursor: pointer; transition: all .2s ease; }

/* ============================================
   EXTENDED DESIGN-SYSTEM — Full variant map
   All remaining custom class names from every
   page template, resolved to design-token values.
   ============================================ */

/* ─── Additional text color utilities ─── */
.text-accent-blue           { color: #1a5298 !important; }
.text-deep-blue             { color: #1a5298 !important; }
.text-heading-dark          { color: #0f172a !important; }
.text-midblue               { color: #1a5298 !important; }
.text-morgan-accent         { color: #38bdf8 !important; }
.text-morgan-blue           { color: #1a5298 !important; }
.text-morgan-slate          { color: #64748b !important; }
.text-navy-500              { color: #64748b !important; }
.text-navy-900              { color: #0a0f1e !important; }
.text-navy-custom           { color: #0f2557 !important; }
.text-navy-dark             { color: #0f172a !important; }
.text-navy-darkest          { color: #060c16 !important; }
.text-neon-blue             { color: #38bdf8 !important; }
.text-primary-blue          { color: #2563eb !important; }
.text-primary-cyan          { color: #22d3ee !important; }
.text-primary-navy          { color: #0f2557 !important; }
.text-v5-blue-institutional { color: #1a5298 !important; }
.text-v5-border             { color: #e2e8f0 !important; }
.text-v5-dark               { color: #1e293b !important; }
.text-v5-gray               { color: #64748b !important; }
.text-v5-gray-blueprint     { color: #94a3b8 !important; }
.text-v5-navy-darker        { color: #0b1a3d !important; }
.text-v5-navy-muted         { color: #475569 !important; }
.text-v5-sky                { color: #38bdf8 !important; }
.text-v5-slate              { color: #64748b !important; }
.text-v5-slate-dark         { color: #1e293b !important; }
.text-v5-secondary          { color: #64748b !important; }
.text-b2b-blue              { color: #1a5298 !important; }
.text-b2b-navy              { color: #0f2557 !important; }
.text-b2b-sky               { color: #38bdf8 !important; }

/* ─── Additional background utilities ─── */
.bg-accent-blue             { background-color: #1a5298 !important; }
.bg-canvas-white            { background-color: #ffffff !important; }
.bg-card-white              { background-color: #ffffff !important; }
.bg-charcoal                { background-color: #1e293b !important; }
.bg-dark                    { background-color: #0f172a !important; }
.bg-dark-navy               { background-color: #0a0f1e !important; }
.bg-deep                    { background-color: #0f172a !important; }
.bg-deep-blue               { background-color: #1a5298 !important; }
.bg-engineering-blue        { background-color: #1a5298 !important; }
.bg-grid-white              { background-color: #ffffff !important; }
.bg-heading                 { background-color: #0f172a !important; }
.bg-ice-blue                { background-color: #bae6fd !important; }
.bg-infra-alert             { background-color: #f59e0b !important; }
.bg-interface-dark          { background-color: #0f172a !important; }
.bg-light                   { background-color: #f8fafc !important; }
.bg-light-gray              { background-color: #f1f5f9 !important; }
.bg-midblue                 { background-color: #1a5298 !important; }
.bg-morgan-accent           { background-color: #38bdf8 !important; }
.bg-morgan-blue             { background-color: #1a5298 !important; }
.bg-morgan-border           { background-color: #e2e8f0 !important; }
.bg-morgan-dark             { background-color: #0f172a !important; }
.bg-morgan-light            { background-color: #f1f5f9 !important; }
.bg-morgan-navy             { background-color: #0f172a !important; }
.bg-navy-800                { background-color: #0f2040 !important; }
.bg-navy-900                { background-color: #0a0f1e !important; }
.bg-navy-custom             { background-color: #0f2557 !important; }
.bg-navy-dark               { background-color: #0f172a !important; }
.bg-navy-darkest            { background-color: #060c16 !important; }
.bg-navy-muted              { background-color: #475569 !important; }
.bg-neon-blue               { background-color: #38bdf8 !important; }
.bg-neutral-soft            { background-color: #f1f5f9 !important; }
.bg-off-white               { background-color: #f8fafc !important; }
.bg-pearl                   { background-color: #f0f4f8 !important; }
.bg-pearl-gray              { background-color: #e8ecf0 !important; }
.bg-primary-blue            { background-color: #2563eb !important; }
.bg-primary-cyan            { background-color: #22d3ee !important; }
.bg-soft                    { background-color: #f1f5f9 !important; }
.bg-soft-white              { background-color: #f8fafc !important; }
.bg-surface-light           { background-color: #f8fafc !important; }
.bg-tech-dark               { background-color: #0f172a !important; }
.bg-bom                     { background-color: #0f2557 !important; }
.bg-v5-bg-light             { background-color: #f8fafc !important; }
.bg-bg-light                { background-color: #f8fafc !important; }
.bg-v5-blue                 { background-color: #2563eb !important; }
.bg-v5-blue-institutional   { background-color: #1a5298 !important; }
.bg-v5-border               { background-color: #e2e8f0 !important; }
.bg-v5-dark                 { background-color: #1e293b !important; }
.bg-v5-ghost                { background-color: rgba(255,255,255,0.05) !important; }
.bg-v5-gray                 { background-color: #f1f5f9 !important; }
.bg-v5-gray-blueprint       { background-color: #94a3b8 !important; }
.bg-v5-light                { background-color: #f8fafc !important; }
.bg-v5-navy-darker          { background-color: #0b1a3d !important; }
.bg-v5-navy-muted           { background-color: #475569 !important; }
.bg-v5-neutral-light        { background-color: #f8fafc !important; }
.bg-v5-secondary            { background-color: #64748b !important; }
.bg-v5-sky                  { background-color: #38bdf8 !important; }
.bg-v5-slate-card           { background-color: #1e293b !important; }
.bg-v5-slate-dark           { background-color: #1e293b !important; }
.bg-v5-space-blue           { background-color: #0d1b2a !important; }
.bg-b2b-blue                { background-color: #1a5298 !important; }
.bg-b2b-gray                { background-color: #64748b !important; }
.bg-b2b-navy                { background-color: #0f2557 !important; }
.bg-b2b-sky                 { background-color: #38bdf8 !important; }
.bg-b2b-soft                { background-color: #f1f5f9 !important; }

/* ─── Additional border utilities ─── */
.border-accent-blue         { border-color: #1a5298 !important; }
.border-engineering-blue    { border-color: #1a5298 !important; }
.border-heading             { border-color: #0f172a !important; }
.border-ice-blue            { border-color: #bae6fd !important; }
.border-midblue             { border-color: #1a5298 !important; }
.border-morgan-border       { border-color: #e2e8f0 !important; }
.border-navy                { border-color: #0f172a !important; }
.border-navy-800            { border-color: #0f2040 !important; }
.border-navy-deep           { border-color: #0f172a !important; }
.border-navy-muted          { border-color: #475569 !important; }
.border-navy-primary        { border-color: #0f2557 !important; }
.border-navy-v5             { border-color: #0f172a !important; }
.border-neon-blue           { border-color: #38bdf8 !important; }
.border-neutral-border      { border-color: #e2e8f0 !important; }
.border-pearl               { border-color: #f0f4f8 !important; }
.border-pearl-gray          { border-color: #e8ecf0 !important; }
.border-primary-blue        { border-color: #2563eb !important; }
.border-primary-cyan        { border-color: #22d3ee !important; }
.border-secondary           { border-color: #64748b !important; }
.border-v5-blue             { border-color: #2563eb !important; }
.border-v5-blue-institutional{ border-color: #1a5298 !important; }
.border-v5-border           { border-color: #e2e8f0 !important; }
.border-v5-gray             { border-color: #94a3b8 !important; }
.border-v5-gray-blueprint   { border-color: #94a3b8 !important; }
.border-v5-navy             { border-color: #0f2557 !important; }
.border-v5-primary          { border-color: #38bdf8 !important; }
.border-v5-sky              { border-color: #38bdf8 !important; }
.border-b2b-blue            { border-color: #1a5298 !important; }
.border-b2b-sky             { border-color: #38bdf8 !important; }
.border-bg-silver           { border-color: #cbd5e1 !important; }

/* ── Auto-contrast: white text on dark bg classes ── */
.bg-dark, .bg-dark-navy, .bg-deep, .bg-charcoal,
.bg-tech-dark, .bg-interface-dark, .bg-heading,
.bg-morgan-dark, .bg-morgan-navy, .bg-navy-dark,
.bg-navy-darkest, .bg-navy-800, .bg-navy-900,
.bg-navy-custom, .bg-navy-muted,
.bg-v5-dark, .bg-v5-slate-dark, .bg-v5-slate-card,
.bg-v5-space-blue, .bg-v5-navy-darker,
.bg-v5-navy-muted, .bg-v5-secondary,
.bg-b2b-navy, .bg-bom,
.bg-accent-blue, .bg-deep-blue, .bg-engineering-blue,
.bg-midblue, .bg-morgan-blue, .bg-primary-blue,
.bg-b2b-blue, .bg-v5-blue, .bg-v5-blue-institutional { color: #ffffff; }

/* ── Auto-contrast: dark text on light bg classes ── */
.bg-ice-blue, .bg-light, .bg-light-gray, .bg-neutral-soft,
.bg-off-white, .bg-pearl, .bg-pearl-gray, .bg-soft,
.bg-soft-white, .bg-canvas-white, .bg-card-white,
.bg-surface-light, .bg-morgan-light, .bg-morgan-border,
.bg-b2b-soft, .bg-b2b-gray,
.bg-v5-bg-light, .bg-bg-light, .bg-v5-light,
.bg-v5-gray, .bg-v5-neutral-light, .bg-v5-border,
.bg-neon-blue, .bg-primary-cyan, .bg-morgan-accent,
.bg-b2b-sky, .bg-v5-sky { color: #0f172a; }

/* ── Opacity alpha variants (used as bg-{color}/N) ── */
/* These are handled by Tailwind arbitrary values and inline styles,
   no additional classes needed. */

/* ============================================
   CONTRAST HARDENING
   Fix text-slate-400 used on white/light
   backgrounds in nav dropdowns & cards.
   ============================================ */

/* Header nav dropdowns: white bg → slate-400 is too light */
.nav-dropdown .text-slate-400,
#site-header [class*="bg-white"] .text-slate-400,
#site-header [class*="bg-slate-50"] .text-slate-400 {
    color: #475569 !important; /* slate-600 — 7:1 contrast on white */
}

/* Footer text on dark bg: slate-400 is fine, no override needed */
/* Body light sections: upgrade label/caption text if used as static text */
main section:not([class*="navy"]):not([class*="bg-[var(--navy"]):not([class*="bg-dark"]) > * .text-slate-400:not(.material-symbols-outlined) {
    color: #64748b !important; /* slate-500 — ~4.6:1 on white, WCAG AA for large text */
}

/* ============================================
   MOBILE CENTERING — Packages Pages & Footer
   Applied on screens below md breakpoint (< 768px)
   ============================================ */
@media (max-width: 767px) {

    /* ─────────────────────────────────────────
       FOOTER — center all stacked column content
    ───────────────────────────────────────── */

    /* Center text in every grid column once they stack */
    footer .grid > div {
        text-align: center;
    }

    /* Center the logo <a class="inline-block"> */
    footer .grid > div .inline-block {
        margin: 0 auto;
        
    }

    /* Let description paragraph fill full width centered */
    footer .grid > div .max-w-sm {
        max-width: 100%;
    }

    /* Center social-icons row */
    footer .grid > div .flex.gap-5 {
        justify-content: center;
    }

    /* Center contact list items that use flex layout */
    footer .grid > div ul li.flex {
        justify-content: center;
    }

    /* Bottom copyright bar text + links */
    footer .pt-12.border-t {
        text-align: center;
    }
    footer .pt-12.border-t .flex.gap-10 {
        justify-content: center;
    }

    /* ─────────────────────────────────────────
       ALL PACKAGES PAGE TEMPLATES
       WordPress adds body class: page-template-tpl-packages*
    ───────────────────────────────────────── */

    /* Center headings and paragraphs in the hero (first) section */
    [class*="page-template-tpl-packages"] main > section:first-of-type h1,
    [class*="page-template-tpl-packages"] main > section:first-of-type h2,
    [class*="page-template-tpl-packages"] main > section:first-of-type p {
        text-align: center !important;
    }

    /* Override .text-right used on advanced template's content div */
    [class*="page-template-tpl-packages"] main > section:first-of-type .text-right {
        text-align: center !important;
    }

    /* Center inline-flex badge / label pills */
    [class*="page-template-tpl-packages"] main > section:first-of-type .inline-flex.items-center {
        margin-left: auto;
        margin-right: auto;
        display: flex;
        width: fit-content;
    }

    /* Remove right-border decoration (RTL design bar) on centered badges */
    [class*="page-template-tpl-packages"] main > section:first-of-type .inline-block[class*="border-r"] {
        border-right: none !important;
        padding-right: 0 !important;
        text-align: center !important;
        margin: 0 auto;
        display: block;
        width: fit-content;
    }

    /* Remove right-border on RTL-styled paragraphs */
    [class*="page-template-tpl-packages"] main > section:first-of-type p.border-r {
        border-right: none !important;
        padding-right: 0 !important;
    }

    /* Center CTA / button groups */
    [class*="page-template-tpl-packages"] main > section:first-of-type .flex.flex-col.sm\:flex-row,
    [class*="page-template-tpl-packages"] main > section:first-of-type .flex.flex-wrap.gap-4,
    [class*="page-template-tpl-packages"] main > section:first-of-type .flex.flex-wrap.gap-5,
    [class*="page-template-tpl-packages"] main > section:first-of-type .flex.flex-wrap.gap-6 {
        justify-content: center !important;
        align-items: center !important;
    }

    /* Center max-width text containers horizontally */
    [class*="page-template-tpl-packages"] main > section:first-of-type .max-w-2xl,
    [class*="page-template-tpl-packages"] main > section:first-of-type .max-w-xl {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* ─────────────────────────────────────────
       PACKAGES — FONT SIZE SCALE-DOWN ON MOBILE
       Reduces oversized text across all sections
       of every tpl-packages* page (footer excluded)
    ───────────────────────────────────────── */

    /* H1 hero headings */
    [class*="page-template-tpl-packages"] main h1 {
        font-size: 1.35rem !important;   /* ~22px — was 2xl/3xl/4xl */
        line-height: 1.3 !important;
    }

    /* Section headings h2 */
    [class*="page-template-tpl-packages"] main h2 {
        font-size: 1.15rem !important;   /* ~18px — was xl/2xl/3xl/4xl */
        line-height: 1.35 !important;
    }

    /* Sub-section headings h3 */
    [class*="page-template-tpl-packages"] main h3 {
        font-size: 1rem !important;      /* 16px — was 2xl */
        line-height: 1.4 !important;
    }

    /* Body / description paragraphs */
    [class*="page-template-tpl-packages"] main p {
        font-size: 0.9rem !important;    /* ~14px — was xl/lg */
        line-height: 1.7 !important;
    }

    /* Button text */
    [class*="page-template-tpl-packages"] main button,
    [class*="page-template-tpl-packages"] main a[class*="px-"] {
        font-size: 0.85rem !important;   /* 13-14px */
    }

    /* Small labels / badges / tracking-widest spans */
    [class*="page-template-tpl-packages"] main .text-sm,
    [class*="page-template-tpl-packages"] main .text-xs,
    [class*="page-template-tpl-packages"] main [class*="tracking-widest"] {
        font-size: 0.7rem !important;    /* ~11px */
    }

    /* Stat / metric numbers */
    [class*="page-template-tpl-packages"] main .stat-number,
    [class*="page-template-tpl-packages"] main [class*="text-4xl"],
    [class*="page-template-tpl-packages"] main [class*="text-5xl"],
    [class*="page-template-tpl-packages"] main [class*="text-6xl"] {
        font-size: 1.6rem !important;
        line-height: 1.2 !important;
    }

    /* Table cells in compare / BOQ pages */
    [class*="page-template-tpl-packages"] main td,
    [class*="page-template-tpl-packages"] main th {
        font-size: 0.78rem !important;
    }

    /* ─────────────────────────────────────────
       ALL BRANDS PAGE TEMPLATES
       WordPress adds body class: page-template-tpl-brands*
    ───────────────────────────────────────── */

    /* Stack 2-col hero grid to single column */
    [class*="page-template-tpl-brands"] main section:first-of-type .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Center hero text content */
    [class*="page-template-tpl-brands"] main section:first-of-type h1,
    [class*="page-template-tpl-brands"] main section:first-of-type h2,
    [class*="page-template-tpl-brands"] main section:first-of-type p {
        text-align: center !important;
    }

    /* Center inline-flex badge pill */
    [class*="page-template-tpl-brands"] main section:first-of-type .inline-flex.items-center {
        margin-left: auto !important;
        margin-right: auto !important;
        display: flex;
        width: fit-content;
    }

    /* Center CTA button groups */
    [class*="page-template-tpl-brands"] main section:first-of-type .flex.flex-col.sm\:flex-row,
    [class*="page-template-tpl-brands"] main section:first-of-type .flex.gap-5,
    [class*="page-template-tpl-brands"] main section:first-of-type .flex.flex-wrap {
        justify-content: center !important;
        align-items: center !important;
    }

    /* Stack spec / certifications bar to wrap nicely */
    [class*="page-template-tpl-brands"] .bg-\[\#0f2557\].py-5 .flex {
        justify-content: center !important;
    }

    /* Horizontal scroll carousel: don't force centering on small screens */
    [class*="page-template-tpl-brands"] main .overflow-x-auto.flex {
        justify-content: flex-start !important;
    }

    /* Smart screens gallery — fit cards to mobile viewport */
    [class*="page-template-tpl-brands"] main .overflow-x-auto.flex > div[class*="min-w-"] {
        min-width: 82vw !important;
        padding: 1.5rem !important;
    }

    /* Scale down device mockups inside gallery cards */
    [class*="page-template-tpl-brands"] main .overflow-x-auto .museum-pedestal {
        padding: 1.5rem !important;
    }

    /* Shrink the phone/tablet mockup devices */
    [class*="page-template-tpl-brands"] main .overflow-x-auto .w-64.h-80,
    [class*="page-template-tpl-brands"] main .overflow-x-auto .w-64.h-64 {
        width: 10rem !important;
        height: auto !important;
        min-height: 13rem !important;
    }

    /* Shrink thermostat image area inside mockup */
    [class*="page-template-tpl-brands"] main .overflow-x-auto .w-full.h-32 {
        height: 5rem !important;
    }

    /* Prevent px-6 section padding from causing overflow */
    [class*="page-template-tpl-brands"] main .overflow-x-auto {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        gap: 1rem !important;
    }

    /* ─────────────────────────────────────────
       BRANDS — FONT SIZE SCALE-DOWN ON MOBILE
    ───────────────────────────────────────── */

    [class*="page-template-tpl-brands"] main h1 {
        font-size: 1.35rem !important;
        line-height: 1.3 !important;
    }

    [class*="page-template-tpl-brands"] main h2 {
        font-size: 1.15rem !important;
        line-height: 1.35 !important;
    }

    [class*="page-template-tpl-brands"] main h3,
    [class*="page-template-tpl-brands"] main h4 {
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }

    [class*="page-template-tpl-brands"] main h5,
    [class*="page-template-tpl-brands"] main h6 {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
    }

    [class*="page-template-tpl-brands"] main p {
        font-size: 0.9rem !important;
        line-height: 1.7 !important;
    }

    [class*="page-template-tpl-brands"] main button,
    [class*="page-template-tpl-brands"] main a[class*="px-"] {
        font-size: 0.85rem !important;
    }

    [class*="page-template-tpl-brands"] main .text-sm,
    [class*="page-template-tpl-brands"] main .text-xs,
    [class*="page-template-tpl-brands"] main [class*="tracking-widest"] {
        font-size: 0.7rem !important;
    }

    [class*="page-template-tpl-brands"] main [class*="text-4xl"],
    [class*="page-template-tpl-brands"] main [class*="text-5xl"],
    [class*="page-template-tpl-brands"] main [class*="text-6xl"] {
        font-size: 1.6rem !important;
        line-height: 1.2 !important;
    }

    [class*="page-template-tpl-brands"] main td,
    [class*="page-template-tpl-brands"] main th {
        font-size: 0.78rem !important;
    }
}

/* ============================================
   PRODUCT GRID — Override-Proof Layout
   Forces grid + card styles even when Tailwind
   CDN is blocked or other CSS interferes.
   ============================================ */
.product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
    list-style: none !important;
    padding: 0 !important;
}
@media (min-width: 640px) {
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Card inside product grid */
.product-grid > .card-premium {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 24px !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06) !important;
    transition: box-shadow .25s, transform .25s, border-color .25s !important;
}
.product-grid > .card-premium:hover {
    box-shadow: 0 8px 40px rgba(15,37,87,.12) !important;
    transform: translateY(-3px) !important;
    border-color: rgba(56,189,248,.3) !important;
}

/* Image area */
.product-grid > .card-premium > .prd-img {
    height: 11rem !important;
    overflow: hidden !important;
    background: linear-gradient(to bottom, #f8fafc, #eef2f7) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.25rem !important;
}
.product-grid > .card-premium > .prd-img > img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transition: transform .5s !important;
}
.product-grid > .card-premium:hover > .prd-img > img {
    transform: scale(1.1) !important;
}

/* Info area */
.product-grid > .card-premium > .prd-info {
    padding: 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}
.product-grid > .card-premium > .prd-info h3 {
    font-size: 0.875rem !important;
    font-weight: 900 !important;
    color: #0f2557 !important;
    margin-bottom: 0.25rem !important;
}
.product-grid > .card-premium > .prd-info .prd-sku {
    display: inline-block !important;
    font-size: 10px !important;
    color: #94a3b8 !important;
    font-family: ui-monospace, monospace !important;
    background: #f8fafc !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    width: fit-content !important;
    margin-bottom: 0.75rem !important;
}
.product-grid > .card-premium > .prd-info ul {
    margin-top: auto !important;
    list-style: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.375rem !important;
}
.product-grid > .card-premium > .prd-info ul li {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: #64748b !important;
    font-size: 0.75rem !important;
}
.product-grid > .card-premium > .prd-info ul li .prd-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #38bdf8 !important;
    flex-shrink: 0 !important;
}

/* Mobile tweaks */
@media (max-width: 639px) {
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }
    .product-grid > .card-premium > .prd-img {
        height: 8rem !important;
        padding: 0.75rem !important;
    }
    .product-grid > .card-premium > .prd-info {
        padding: 0.75rem !important;
    }
    .product-grid > .card-premium > .prd-info h3 {
        font-size: 0.75rem !important;
    }
}

/* ── pdt-card text colors ── */
.pdt-card-name { color: #ffffff !important; }
.pdt-card-desc { color: #ffffff !important; }
.pdt-card-specs li { color: rgba(255,255,255,.7) !important; }
body .pdt-showcase .pdt-card .pdt-card-name { color: #ffffff !important; }
body .pdt-showcase .pdt-card .pdt-card-desc { color: #ffffff !important; }
body .pdt-showcase .pdt-card .pdt-card-specs li { color: rgba(255,255,255,.7) !important; }

/* ============================================
   PDT SHOWCASE — Full component styles
   (product cards rendered by footer.php JS)
   ============================================ */
.pdt-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(180deg, #0d1730 0%, #0a1128 100%);
    border: 1px solid rgba(255,255,255,.04);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform .55s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .55s ease;
    opacity: 0;
    transform: translateY(35px) scale(0.97);
}
.pdt-card.pdt-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.pdt-card:nth-child(1)  { transition-delay: 0s; }
.pdt-card:nth-child(2)  { transition-delay: .05s; }
.pdt-card:nth-child(3)  { transition-delay: .1s; }
.pdt-card:nth-child(4)  { transition-delay: .15s; }
.pdt-card:nth-child(5)  { transition-delay: .2s; }
.pdt-card:nth-child(6)  { transition-delay: .25s; }
.pdt-card:nth-child(7)  { transition-delay: .3s; }
.pdt-card:nth-child(8)  { transition-delay: .35s; }
.pdt-card:nth-child(9)  { transition-delay: .4s; }
.pdt-card:nth-child(10) { transition-delay: .45s; }
.pdt-card:nth-child(11) { transition-delay: .5s; }
.pdt-card:nth-child(12) { transition-delay: .55s; }
.pdt-card:nth-child(n+13) { transition-delay: .6s; }
.pdt-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 21px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(56,189,248,0) 0%, rgba(56,189,248,0) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 4;
    pointer-events: none;
    transition: background .5s ease;
}
.pdt-card:hover::before {
    background: linear-gradient(135deg, #38bdf8 0%, rgba(26,82,152,.5) 50%, #38bdf8 100%);
}
.pdt-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: transparent;
    box-shadow: 0 28px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(56,189,248,.1), inset 0 1px 0 rgba(255,255,255,.04);
}
.pdt-card > .pdt-scanline {
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #38bdf8, transparent);
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 0 20px rgba(56,189,248,.35);
}
.pdt-card:hover > .pdt-scanline {
    opacity: 1;
    animation: pgs-scan-v2 1.4s ease-in-out forwards;
}
.pdt-card-visual {
    position: relative;
    height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1.5rem 1rem;
    background: linear-gradient(180deg, rgba(56,189,248,.015) 0%, transparent 100%);
    overflow: hidden;
}
.pdt-card-img {
    max-width: 82%;
    max-height: 88%;
    object-fit: contain;
    transition: transform .7s cubic-bezier(.22,1,.36,1), filter .5s ease;
    filter: drop-shadow(0 6px 20px rgba(0,0,0,.25));
    position: relative;
    z-index: 1;
}
.pdt-card:hover .pdt-card-img {
    transform: scale(1.12) translateY(-5px);
    filter: drop-shadow(0 20px 40px rgba(56,189,248,.12)) drop-shadow(0 8px 16px rgba(0,0,0,.3));
}
.pdt-card-visual::after {
    content: '';
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 55%;
    height: 45px;
    background: radial-gradient(ellipse, rgba(56,189,248,.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity .5s ease;
}
.pdt-card:hover .pdt-card-visual::after { opacity: 1; }
.pdt-card-visual::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle at 100% 0%, rgba(56,189,248,.06) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity .5s ease;
}
.pdt-card:hover .pdt-card-visual::before { opacity: 1; }
.pdt-card-code {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 11px;
    border-radius: 9px;
    background: rgba(56,189,248,.08);
    border: 1px solid rgba(56,189,248,.18);
    color: #38bdf8;
    font-size: .65rem;
    font-weight: 800;
    font-family: 'Space Grotesk', 'Inter', monospace;
    letter-spacing: .06em;
    z-index: 5;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background .3s ease, border-color .3s ease;
}
.pdt-card:hover .pdt-card-code {
    background: rgba(56,189,248,.14);
    border-color: rgba(56,189,248,.35);
}
.pdt-card-body {
    padding: 0 1.25rem 1.25rem;
    background: linear-gradient(180deg, transparent 0%, rgba(5,10,24,.5) 100%);
    flex: 1;
    display: flex;
    flex-direction: column;
}
.pdt-card-name {
    font-size: .85rem;
    font-weight: 800;
    color: #ffffff !important;
    line-height: 1.45;
    margin-bottom: .35rem;
    font-family: 'Cairo', sans-serif;
    transition: color .3s ease;
}
.pdt-card:hover .pdt-card-name { color: #fff !important; }
.pdt-card-desc {
    font-family: 'Cairo', sans-serif;
    font-size: .72rem;
    font-weight: 500;
    color: #ffffff !important;
    line-height: 1.6;
    margin-top: .25rem;
}
.pdt-card-specs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity .45s ease, max-height .5s cubic-bezier(.22,1,.36,1);
}
.pdt-card:hover .pdt-card-specs { opacity: 1; max-height: 200px; }
.pdt-card-specs li {
    font-size: .7rem;
    color: rgba(255,255,255,.7) !important;
    padding-right: 14px;
    position: relative;
    font-family: 'Cairo', sans-serif;
}
.pdt-card-specs li::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(56,189,248,.35);
}
.pdt-card-zoom {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(56,189,248,.08);
    border: 1px solid rgba(56,189,248,.2);
    color: rgba(255,255,255,.7);
    z-index: 5;
    opacity: 0;
    transform: scale(.7);
    transition: all .4s cubic-bezier(.34,1.56,.64,1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.pdt-card:hover .pdt-card-zoom { opacity: 1; transform: scale(1); }
.pdt-card-zoom:hover { background: rgba(56,189,248,.2); border-color: rgba(56,189,248,.45); color: #fff; }
.pdt-card--cover .pdt-card-visual { height: 220px; padding: 0; background: none; }
.pdt-card--cover .pdt-card-visual::after { display: none; }
.pdt-card--cover .pdt-card-img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; filter: none; }
.pdt-card--cover:hover .pdt-card-img { transform: scale(1.06); filter: none; }
@media (max-width: 768px) {
    .pdt-card-visual { height: 160px; padding: .75rem; }
    .pdt-card--cover .pdt-card-visual { height: 160px; padding: 0; }
    .pdt-card-img { max-width: 75%; }
    .pdt-card--cover .pdt-card-img { max-width: none; }
    .pdt-card-name { font-size: .75rem; }
    .pdt-card-code { font-size: .55rem; padding: 3px 7px; }
    .pdt-card-zoom { width: 30px; height: 30px; border-radius: 8px; }
    .pdt-card { border-radius: 14px; }
    .pdt-card-body { padding: 0 .75rem .75rem; }
}
@media (max-width: 480px) {
    .pdt-card-visual { height: 130px; padding: .5rem; }
    .pdt-card--cover .pdt-card-visual { height: 130px; padding: 0; }
    .pdt-card-img { max-width: 70%; max-height: 85%; }
    .pdt-card--cover .pdt-card-img { max-width: none; max-height: none; }
    .pdt-card-name { font-size: .7rem; }
    .pdt-card-body { padding: 0 .5rem .5rem; }
    .pdt-card-specs { opacity: 1; max-height: 200px; }
    .pdt-card-specs li { font-size: .6rem; }
    .pdt-card { border-radius: 12px; }
}

/* ============================================================
   PGS GALLERY — Product Gallery Section & Cards
   ============================================================ */

.pgs-section {
    margin-bottom: 80px !important;
    padding-top: 4rem !important;  /* مارجن فوق معرض الصور */
}

/* ── Section header / badge ── */
.pgs-header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}
.pgs-header > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 26px !important;
    border-radius: 999px !important;
    background: rgba(56,189,248,.08) !important;
    border: 1px solid rgba(56,189,248,.25) !important;
    color: #38bdf8 !important;
    font-size: .7rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .2em !important;
    backdrop-filter: blur(12px) !important;
    position: relative !important;
    overflow: hidden !important;
}
.pgs-header > span::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(56,189,248,.15), transparent);
    animation: pgs-badge-shimmer 3.5s ease-in-out infinite;
}
@keyframes pgs-badge-shimmer {
    0%, 100% { left: -100%; }
    50%      { left: 100%; }
}
.pgs-header > span::after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #38bdf8;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(56,189,248,.6);
    animation: pgs-pulse 2s ease-in-out infinite;
}
@keyframes pgs-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(56,189,248,.6); }
    50%      { opacity: .35; box-shadow: 0 0 2px rgba(56,189,248,.2); }
}
.pgs-header::after {
    content: '';
    display: block;
    margin: 1.5rem auto 0;
    width: 180px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(56,189,248,.5) 30%, #38bdf8 50%, rgba(56,189,248,.5) 70%, transparent);
    border-radius: 2px;
    position: relative;
}

.pgs-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: 240px;
    gap: 12px !important;
    position: relative;
    z-index: 1;
    perspective: 1200px;
    direction: rtl !important;
}

/* === صورة واحدة / صورتين / 3 صور — في النص بالجافاسكربت === */
.pgs-grid.pgs-count-1 {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
}
.pgs-grid.pgs-count-2 {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
}
.pgs-grid.pgs-count-3 {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
}
.pgs-grid.pgs-count-1 > .pgs-card,
.pgs-grid.pgs-count-2 > .pgs-card,
.pgs-grid.pgs-count-3 > .pgs-card {
    width: calc(25% - 9px);
    height: 240px;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .pgs-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-auto-rows: 200px;
        gap: 10px !important;
    }
    .pgs-grid.pgs-count-1 > .pgs-card,
    .pgs-grid.pgs-count-2 > .pgs-card,
    .pgs-grid.pgs-count-3 > .pgs-card {
        width: calc(33.333% - 7px);
        height: 200px;
    }
}
@media (max-width: 640px) {
    .pgs-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: 150px;
        gap: 8px !important;
    }
    .pgs-grid.pgs-count-1 > .pgs-card {
        width: calc(50% - 4px);
        height: 150px;
    }
    .pgs-grid.pgs-count-2 > .pgs-card,
    .pgs-grid.pgs-count-3 > .pgs-card {
        width: calc(50% - 4px);
        height: 150px;
    }
    .pgs-grid.pgs-count-2,
    .pgs-grid.pgs-count-3 {
        flex-wrap: wrap !important;
    }
}

.pgs-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: zoom-in;
    background: #0c1529;
    border: 1px solid rgba(255,255,255,.05);
    transition:
        border-color .5s ease,
        box-shadow .5s ease,
        transform .5s cubic-bezier(.22,1,.36,1);
    will-change: transform;
    transform-style: preserve-3d;
    opacity: 0;
    transform: translateY(40px) scale(0.96);
}
.pgs-card.pgs-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.pgs-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 17px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(56,189,248,0) 0%, rgba(56,189,248,0) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 4;
    pointer-events: none;
    transition: background .6s ease;
}
.pgs-card:hover::before {
    background: linear-gradient(135deg, #38bdf8 0%, rgba(26,82,152,.6) 50%, #38bdf8 100%);
    background-size: 300% 300%;
    animation: pgs-border-flow 2s linear infinite;
}
@keyframes pgs-border-flow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.pgs-card:hover {
    border-color: transparent;
    box-shadow:
        0 0 0 1px rgba(56,189,248,.15),
        0 20px 50px rgba(0,0,0,.6),
        0 0 60px rgba(56,189,248,.06),
        inset 0 1px 0 rgba(255,255,255,.04);
    z-index: 3;
}
.pgs-card--featured {
    grid-column: span 2;
    grid-row: span 2;
    border-radius: 20px;
}
.pgs-card--featured::before { border-radius: 21px; }
.pgs-card--featured::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 160px; height: 160px;
    background: radial-gradient(circle at 100% 0%, rgba(56,189,248,.15) 0%, transparent 70%);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s ease;
}
.pgs-card--featured:hover::after { opacity: 1; }

.pgs-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .8s cubic-bezier(.22,1,.36,1), filter .5s ease;
    will-change: transform;
    filter: brightness(.92) saturate(1.05);
}
.pgs-card:hover .pgs-img {
    transform: scale(1.08);
    filter: brightness(1) saturate(1.15);
}

.pgs-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(5,10,24,.92) 0%,
        rgba(5,10,24,.4) 35%,
        rgba(5,10,24,.05) 60%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity .45s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 24px;
    pointer-events: none;
    z-index: 3;
}
.pgs-card:hover .pgs-overlay { opacity: 1; }

.pgs-zoom-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 16px;
    background: rgba(56,189,248,.12);
    border: 1.5px solid rgba(56,189,248,.4);
    color: rgba(255,255,255,.95);
    font-size: 22px;
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'liga';
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    transform: scale(.6) translateY(14px);
    opacity: 0;
    transition:
        transform .4s cubic-bezier(.34,1.56,.64,1),
        opacity .3s ease,
        background .3s ease,
        border-radius .3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.pgs-card:hover .pgs-zoom-icon { transform: scale(1) translateY(0); opacity: 1; }
.pgs-card:hover .pgs-zoom-icon:hover { background: rgba(56,189,248,.3); border-radius: 50%; }

.pgs-card > .pgs-scanline {
    position: absolute;
    top: -2px; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #38bdf8, transparent);
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 0 20px rgba(56,189,248,.4), 0 0 60px rgba(56,189,248,.15);
}
.pgs-card:hover > .pgs-scanline {
    opacity: 1;
    animation: pgs-scan-v2 1.2s ease-in-out forwards;
}

.pgs-card:nth-child(1)  { transition-delay: 0s; }
.pgs-card:nth-child(2)  { transition-delay: .07s; }
.pgs-card:nth-child(3)  { transition-delay: .14s; }
.pgs-card:nth-child(4)  { transition-delay: .21s; }
.pgs-card:nth-child(5)  { transition-delay: .28s; }
.pgs-card:nth-child(6)  { transition-delay: .35s; }
.pgs-card:nth-child(7)  { transition-delay: .42s; }
.pgs-card:nth-child(8)  { transition-delay: .49s; }
.pgs-card:nth-child(9)  { transition-delay: .56s; }
.pgs-card:nth-child(10) { transition-delay: .63s; }
.pgs-card:nth-child(11) { transition-delay: .70s; }
.pgs-card:nth-child(12) { transition-delay: .77s; }

/* ============================================================
   LIGHTBOX (pgl-*) — Cinematic fullscreen viewer
   ============================================================ */

#__pgl {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: rgba(3,6,15,.97);
    backdrop-filter: blur(32px) saturate(.7);
    -webkit-backdrop-filter: blur(32px) saturate(.7);
    cursor: zoom-out;
    flex-direction: column;
}
#__pgl.pgl-active {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pgl-fade-in .35s ease;
}
@keyframes pgl-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
#__pgl::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 40%, rgba(3,6,15,.5) 100%);
    pointer-events: none;
    z-index: 0;
}

.pgl-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: min(92vw, 1200px);
    max-height: 78vh;
    cursor: default;
    z-index: 1;
    animation: pgl-zoom-in .4s cubic-bezier(.22,1,.36,1);
}
@keyframes pgl-zoom-in {
    from { opacity: 0; transform: scale(.88) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.pgl-img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 16px;
    display: block;
    box-shadow:
        0 0 0 1px rgba(56,189,248,.12),
        0 30px 100px rgba(0,0,0,.85),
        0 0 100px rgba(56,189,248,.04);
    transition: opacity .25s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.pgl-img.pgl-slide-left  { opacity: 0; transform: translateX(-60px) scale(.95); }
.pgl-img.pgl-slide-right { opacity: 0; transform: translateX(60px) scale(.95); }

.pgl-close {
    position: fixed;
    top: 22px; left: 22px;
    height: 42px;
    padding: 0 18px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(15,23,42,.7);
    color: rgba(255,255,255,.8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: 'Cairo', sans-serif;
    font-size: .75rem;
    font-weight: 700;
    transition: all .25s ease;
    z-index: 99999;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.pgl-close:hover {
    background: rgba(56,189,248,.15);
    border-color: rgba(56,189,248,.4);
    color: #fff;
}

.pgl-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(15,23,42,.6);
    color: rgba(255,255,255,.8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s ease;
    z-index: 99999;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    font-size: 20px;
}
.pgl-nav:hover {
    background: rgba(56,189,248,.15);
    border-color: rgba(56,189,248,.35);
    color: #fff;
    transform: translateY(-50%) scale(1.08);
}
.pgl-prev { left: 18px; }
.pgl-next { right: 18px; }

.pgl-thumbstrip {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 20px 20px;
    background: linear-gradient(to top, rgba(3,6,15,.85) 0%, transparent 100%);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.pgl-thumbstrip::-webkit-scrollbar { display: none; }

.pgl-thumb {
    flex-shrink: 0;
    width: 56px; height: 56px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid transparent;
    opacity: .4;
    cursor: pointer;
    transition: all .3s ease;
}
.pgl-thumb:hover { opacity: .75; transform: translateY(-2px); }
.pgl-thumb.pgl-thumb-active {
    opacity: 1;
    border-color: #38bdf8;
    box-shadow: 0 0 16px rgba(56,189,248,.3);
    transform: translateY(-3px);
}

.pgl-counter {
    position: fixed;
    top: 24px; right: 22px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 50px;
    background: rgba(15,23,42,.7);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 99999;
    font-family: 'Cairo', sans-serif;
    font-size: .8rem;
    font-weight: 800;
    color: rgba(255,255,255,.7);
}
.pgl-counter-current { color: #38bdf8; font-size: .95rem; }
.pgl-counter-sep { color: rgba(255,255,255,.2); font-weight: 400; }
.pgl-counter-total { color: rgba(255,255,255,.4); }

.pgl-caption {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: rgba(255,255,255,.45);
    font-family: 'Cairo', sans-serif;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 99999;
}

.pgl-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    background: linear-gradient(90deg, #38bdf8, #1a5298);
    z-index: 99999;
    transition: width .35s ease;
    box-shadow: 0 0 10px rgba(56,189,248,.4);
}

@media (pointer: coarse) {
    .pgl-nav { display: none; }
    .pgl-thumb { width: 48px; height: 48px; border-radius: 8px; }
}
@media (max-width: 640px) {
    .pgl-thumbstrip { padding: 10px 12px 14px; gap: 5px; }
    .pgl-thumb { width: 42px; height: 42px; }
    .pgl-stage { max-height: 65vh; }
    .pgl-img { max-height: 65vh; border-radius: 10px; }
}

/* ============================================================
   PDT SHOWCASE FRAMEWORK — Section, Toolbar, Grid
   ============================================================ */

.pdt-showcase {
    position: relative;
    padding: 5rem 0 6rem;
    background: linear-gradient(175deg, #f8fafc 0%, #f1f5f9 40%, #f8fafc 100%);
    overflow: hidden;
}
.pdt-showcase::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(56,189,248,.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black 40%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black 40%, transparent 85%);
}
.pdt-showcase::after {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    bottom: -200px; left: -100px;
    background: radial-gradient(circle, rgba(56,189,248,.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: pgs-orb-drift 14s ease-in-out infinite alternate-reverse;
}

.pdt-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
    padding: 1rem 1.5rem;
    border-radius: 20px;
    background: rgba(15,23,42,.55);
    border: 1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
    box-shadow: 0 8px 32px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03);
}

.pdt-search-wrap {
    flex: 1;
    min-width: 200px;
    position: relative;
}
.pdt-search-wrap .material-symbols-outlined {
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    color: rgba(56,189,248,.4);
    font-size: 20px;
    pointer-events: none;
    transition: color .3s ease;
}
.pdt-search {
    width: 100%;
    padding: 0.75rem 2.8rem 0.75rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.03);
    color: white;
    font-family: 'Cairo', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    outline: none;
    transition: all .35s ease;
}
.pdt-search::placeholder { color: rgba(255,255,255,.2); }
.pdt-search:focus {
    border-color: rgba(56,189,248,.4);
    background: rgba(56,189,248,.04);
    box-shadow: 0 0 24px rgba(56,189,248,.08), inset 0 0 0 1px rgba(56,189,248,.1);
}

.pdt-view-toggle {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.05);
}
.pdt-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 36px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.25);
    cursor: pointer;
    transition: all .3s ease;
    font-size: 18px;
}
.pdt-view-btn:hover { color: rgba(255,255,255,.55); background: rgba(255,255,255,.03); }
.pdt-view-btn.active {
    background: rgba(56,189,248,.12);
    color: #38bdf8;
    box-shadow: 0 0 16px rgba(56,189,248,.12);
}

/* ── Product count bar centering ── */
.pdt-count-bar {
    text-align: center;
    margin-bottom: 2rem;
}

.pdt-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    background: rgba(56,189,248,.07);
    border: 1px solid rgba(56,189,248,.18);
    color: #38bdf8;
    font-size: .75rem;
    font-weight: 800;
    white-space: nowrap;
    font-family: 'Cairo', sans-serif;
    transition: all .3s ease;
}

.pdt-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    position: relative;
    z-index: 1;
}
@media (max-width: 1200px) {
    .pdt-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
    .pdt-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .pdt-toolbar { gap: .75rem; padding: .85rem 1rem; }
}
@media (max-width: 480px) {
    .pdt-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}

.pdt-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.pdt-list .pdt-card {
    flex-direction: row !important;
    border-radius: 14px !important;
    min-height: 100px !important;
    transform: none !important;
}
.pdt-list .pdt-card .pdt-card-visual {
    width: 120px !important;
    min-width: 120px !important;
    height: auto !important;
    flex-shrink: 0 !important;
    padding: .75rem !important;
}
.pdt-list .pdt-card .pdt-card-body {
    padding: .75rem 1rem !important;
    justify-content: center !important;
}
.pdt-list .pdt-card .pdt-card-specs {
    opacity: 1 !important;
    max-height: none !important;
}
.pdt-list .pdt-card:hover { transform: translateY(-3px) scale(1) !important; }

/* ============================================================
   MISSING KEYFRAMES — scan line + orb drift
   ============================================================ */

@keyframes pgs-scan-v2 {
    0%   { top: -2px; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: calc(100% + 2px); opacity: 0; }
}

@keyframes pgs-orb-drift {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, -30px) scale(1.15); }
}