/* ===== Brand theme: Deep Navy / Dark Charcoal · Gold metallic gradients · Off-white / White (loaded last) ===== */
:root{
  --navy-deep:#120506;--navy:#1a0709;--navy-2:#240a0d;--charcoal:#200809;
  --off-white:#faf8f4;--white:#ffffff;
  --gold-grad:linear-gradient(135deg,#f7dc8a 0%,#e0b040 28%,#c9962e 55%,#a87a20 78%,#e6bb55 100%);
  --gold-line:linear-gradient(90deg,#a87a20,#f0c15a 50%,#a87a20);
  --accent-grad:var(--gold-grad);
}
/* gold metallic fills */
.btn,.f-cta,.qw-submit,.qw-fab,.map-dir,.chip.gold,.cb-send,.pf-tab.active,.gal-tab.active,.aloc.main .badge,.loc.main .badge,.to-top i,.card-quote:hover,.ps-nav:hover,.ps-pause:hover,.hv-pause:hover,.lang-toggle:hover,.theme-toggle:hover,.map-tab.active.gold{
  background:var(--gold-grad)!important;color:#1a0508}
.btn.ghost{background:transparent!important;color:var(--navy-2)}
.btn.ghost:hover{background:var(--navy-2)!important;color:#f0c15a}
.btn,.f-cta,.qw-fab{box-shadow:0 8px 22px rgba(201,150,46,.38),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(90,60,10,.25)}
.hero-line,.progress i,.intro-bar i,.hv-dot i,.site-footer::before,.f-col h4::after,.f-col:not(.f-contact) li a::before{background:var(--gold-line)!important}
/* gold gradient text for key figures */
.stat b,.vn{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* brand wordmark: crisp real text with a solid gold colour, instead of a rasterised logo crop
   (background-clip:text is avoided here — it silently fails to paint Arabic glyphs in some engines) */
.brand-text b,.brand-text small{color:#e6bb55;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.brand-text b{font-weight:800}
.tagline,.page-hero p.tagline{background-image:none}
/* gold hairlines / frames */
.site-header{border-image:none!important;border-bottom:1px solid rgba(240,193,90,.55)!important;box-shadow:0 8px 32px rgba(0,0,0,.45)}
.site-footer{border-top:0}
.card,.card.product,.loc:not(.main),.aloc:not(.main){border-top:3px solid #c9962e!important;border-image:var(--gold-line) 1 0 0 0!important}
/* surfaces: navy/charcoal dark, off-white / pure white light */
.site-header,.sub{background-color:transparent}
.section{background:var(--off-white)!important}
.section:nth-of-type(even){background:linear-gradient(180deg,#f4f0e8,#efe9de)!important}
.card,.card.product,.pslide,.qw-panel,.phones a,.loc:not(.main),.aloc:not(.main){background-color:#fff!important}
.cta-band{background:radial-gradient(circle at 85% 20%,rgba(201,150,46,.22),transparent 55%),linear-gradient(135deg,#240a0d,#120506)!important;border-top:3px solid #c9962e}
.page-hero{background:radial-gradient(720px circle at 86% 15%,rgba(201,150,46,.16),transparent 62%),linear-gradient(135deg,#200809,#120506)!important}
.site-footer{background:radial-gradient(700px circle at 10% 0,rgba(201,150,46,.10),transparent 60%),linear-gradient(180deg,#200809,#0e0405)!important}
.f-glow{background:radial-gradient(circle,rgba(201,150,46,.10),transparent 65%)}
body{background:var(--off-white)}

/* ===== Animated header menu ===== */
@keyframes navIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes subItem{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
[dir=rtl] .sub li{--sx:12px}
@keyframes navDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes navGlow{0%,100%{box-shadow:0 0 0 0 rgba(240,193,90,0)}50%{box-shadow:0 0 14px 0 rgba(240,193,90,.28)}}

/* entrance: brand + links drop in one after another */
html:not(.intro-lock) .brand{animation:navIn .7s cubic-bezier(.2,.8,.2,1) both}
html:not(.intro-lock) .site-nav>ul>li{animation:navIn .6s cubic-bezier(.2,.8,.2,1) both}
html:not(.intro-lock) .site-nav>ul>li:nth-child(1){animation-delay:.15s}
html:not(.intro-lock) .site-nav>ul>li:nth-child(2){animation-delay:.22s}
html:not(.intro-lock) .site-nav>ul>li:nth-child(3){animation-delay:.29s}
html:not(.intro-lock) .site-nav>ul>li:nth-child(4){animation-delay:.36s}
html:not(.intro-lock) .site-nav>ul>li:nth-child(5){animation-delay:.43s}
html:not(.intro-lock) .theme-toggle,html:not(.intro-lock) .lang-toggle{animation:navIn .6s cubic-bezier(.2,.8,.2,1) .5s both}

/* gold underline that draws in on hover / active (uses ::before so the dropdown chevron on ::after is untouched) */
.site-nav>ul>li>a{transition:color .25s,background .25s,transform .25s}
.site-nav>ul>li>a::before{content:"";position:absolute;inset-inline:14px;bottom:3px;height:2px;border-radius:2px;background:var(--gold-line);
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
[dir=rtl] .site-nav>ul>li>a::before{transform-origin:right}
.site-nav>ul>li>a:hover::before,.site-nav>ul>li>a.active::before,.site-nav>ul>li.has-sub:hover>a::before{transform:scaleX(1)}
.site-nav>ul>li>a:hover{color:#f0c15a;transform:translateY(-2px)}
.site-nav>ul>li>a.active{color:#f0c15a;animation:navGlow 3.2s ease-in-out 1s infinite}
/* fix: active link no longer turns its dropdown chevron into an underline */
.site-nav>ul>li:not(.has-sub)>a.active::after{display:none}
.site-nav>ul>li.has-sub>a.active::after{position:static;inset:auto;height:6px;background:none}

/* dropdown items cascade in */
.has-sub:hover>.sub li,.has-sub.open>.sub li{animation:subItem .4s cubic-bezier(.2,.8,.2,1) both}
.has-sub:hover>.sub li:nth-child(1),.has-sub.open>.sub li:nth-child(1){animation-delay:.03s}
.has-sub:hover>.sub li:nth-child(2),.has-sub.open>.sub li:nth-child(2){animation-delay:.08s}
.has-sub:hover>.sub li:nth-child(3),.has-sub.open>.sub li:nth-child(3){animation-delay:.13s}
.has-sub:hover>.sub li:nth-child(4),.has-sub.open>.sub li:nth-child(4){animation-delay:.18s}
.has-sub:hover>.sub li:nth-child(5),.has-sub.open>.sub li:nth-child(5){animation-delay:.23s}
.sub a{position:relative}
.sub a::before{content:"";position:absolute;inset-inline-start:8px;top:50%;width:0;height:2px;background:var(--gold-line);transition:width .25s;translate:0 -50%}
.sub a:hover::before{width:8px}

/* mobile: menu slides down and its links stagger in */
@media(max-width:899px){
  .menu-open .site-nav{animation:navDrop .35s cubic-bezier(.2,.8,.2,1)}
  .menu-open .site-nav>ul>li{animation:subItem .45s cubic-bezier(.2,.8,.2,1) both}
  .menu-open .site-nav>ul>li:nth-child(1){animation-delay:.04s}
  .menu-open .site-nav>ul>li:nth-child(2){animation-delay:.09s}
  .menu-open .site-nav>ul>li:nth-child(3){animation-delay:.14s}
  .menu-open .site-nav>ul>li:nth-child(4){animation-delay:.19s}
  .menu-open .site-nav>ul>li:nth-child(5){animation-delay:.24s}
  .site-nav>ul>li>a:hover{transform:none}
  .site-nav>ul>li>a::before{inset-inline:14px auto;width:calc(100% - 28px)}
}
@media(prefers-reduced-motion:reduce){
  .brand,.site-nav>ul>li,.theme-toggle,.lang-toggle,.menu-open .site-nav,.menu-open .site-nav>ul>li,.has-sub>.sub li,.site-nav>ul>li>a.active{animation:none!important}
  .site-nav>ul>li>a::before{transition:none}
}

/* ===== Enhanced logo (red + gold 3D mark) ===== */
@keyframes logoShine{0%,55%{background-position:220% 0}100%{background-position:-120% 0}}
.brand-badge{position:relative}
.brand-badge img{width:66px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(240,193,90,.18));transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s}
.brand-badge::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.7) 50%,transparent 62%) 220% 0/260% 100% no-repeat;
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;animation:logoShine 6s ease-in-out 1.5s infinite}
.brand:hover .brand-badge img{transform:scale(1.08) rotate(-2deg);filter:drop-shadow(0 6px 14px rgba(0,0,0,.6)) drop-shadow(0 0 20px rgba(240,193,90,.4))}
.site-header.scrolled .brand-badge img{width:54px}
@media(max-width:899px){.brand-badge img,.site-header.scrolled .brand-badge img{width:50px}}
.site-footer .brand-badge img{width:76px}
/* floating mark: real colour logo instead of a flat gold silhouette */
.mascot{width:64px;height:66px}
.mascot-img{display:block;width:100%;height:100%;object-fit:contain;animation:mascotFloat 4s ease-in-out infinite}
/* chatbot header + splash use the colour logo too */
.cb-mark{background:var(--m) center/contain no-repeat!important;-webkit-mask:none!important;mask:none!important;width:40px!important;height:44px!important}
.intro-word{height:clamp(150px,30vw,250px)!important}
/* splash screen: real icon + crisp gold-foil text, instead of a rasterised logo crop */
.intro-icon{display:block;height:clamp(110px,20vw,170px);width:auto;opacity:0;filter:drop-shadow(0 6px 22px rgba(0,0,0,.5));animation:introPop .9s cubic-bezier(.2,.8,.2,1) .15s forwards}
.intro-word-text{display:flex;flex-direction:column;gap:8px;opacity:0;animation:introSlide .9s cubic-bezier(.2,.8,.2,1) .5s forwards}
[dir=rtl] .intro-word-text{animation-name:introSlideRtl}
.intro-word-text b,.intro-word-text small{color:#e6bb55;display:block}
.intro-word-text b{font-family:var(--ff-head);font-weight:800;letter-spacing:.03em;font-size:clamp(1.7rem,4.4vw,2.7rem);line-height:1.15;text-shadow:0 3px 10px rgba(0,0,0,.4)}
.intro-word-text small{font-family:var(--ff-ar);font-weight:700;font-size:clamp(1.1rem,2.8vw,1.6rem);line-height:1.2;text-shadow:0 2px 8px rgba(0,0,0,.35)}
[dir=rtl] .intro-word-text b{font-family:var(--ff-ar);font-size:clamp(1.9rem,4.8vw,3rem)}
[dir=rtl] .intro-word-text small{font-family:var(--ff-head);font-size:clamp(1rem,2.4vw,1.4rem)}
@media(prefers-reduced-motion:reduce){.brand-badge::after,.mascot-img{animation:none}.intro-icon,.intro-word-text{animation-duration:.01s;animation-delay:0s}}

/* ===== Cookie consent pop-up ===== */
@keyframes ckIn{from{opacity:0;transform:translate(-50%,28px)}to{opacity:1;transform:translate(-50%,0)}}
.ck{position:fixed;z-index:120;left:50%;bottom:22px;transform:translateX(-50%);width:min(680px,calc(100% - 32px));display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:18px;
  color:#f5f3ee;background:linear-gradient(145deg,rgba(18,27,47,.97),rgba(18,5,6,.98));border:1px solid rgba(240,193,90,.45);border-top:3px solid #c9962e;
  box-shadow:0 22px 60px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:ckIn .55s cubic-bezier(.2,.8,.2,1) both}
.ck.bye{opacity:0;transform:translate(-50%,24px);transition:opacity .35s,transform .35s}
.ck-ic{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#1a0508;background:var(--gold-grad)}
.ck-body{flex:1;min-width:0}
.ck-title{display:block;font-size:1rem;font-weight:700;color:#f0c15a;margin-bottom:3px}
.ck-text{margin:0;font-size:.85rem;line-height:1.55;color:#d3d6dd}
.ck-actions{flex:none;display:flex;gap:10px}
.ck button{all:unset;box-sizing:border-box;cursor:pointer;padding:10px 22px;border-radius:999px;font-weight:700;font-size:.88rem;line-height:1;text-align:center;transition:transform .2s,filter .2s,background .2s}
.ck .ck-accept{background:var(--gold-grad);color:#1a0508;box-shadow:0 6px 16px rgba(201,150,46,.35)}
.ck .ck-decline{border:1.5px solid rgba(240,193,90,.6);color:#f0c15a}
.ck .ck-accept:hover{transform:translateY(-2px);filter:brightness(1.07)}
.ck .ck-decline:hover{background:rgba(240,193,90,.14)}
.ck button:focus-visible{outline:2px solid #f0c15a;outline-offset:2px}
[dir=rtl] .ck,[dir=rtl] .ck button{font-family:var(--ff-ar)}
@media(max-width:899px){.ck{bottom:calc(70px + env(safe-area-inset-bottom))}}
@media(max-width:560px){.ck{flex-wrap:wrap;gap:12px;padding:16px}.ck-body{flex-basis:calc(100% - 64px)}.ck-actions{width:100%}.ck-actions button{flex:1}}
@media(prefers-reduced-motion:reduce){.ck{animation:none}.ck.bye{transition:none}}

/* ===== Logo theme: navy primary + gold accents ===== */
:root{
  --red:#c9962e;--red-deep:#a87a20;--red-light:#f0c15a;
  --red-grad:linear-gradient(135deg,#f0c15a 0%,#d9a63d 45%,#a87a20 100%);
  --accent:#c9962e;--on-accent:#2a0508;--wine:#4a0c12;
}
.btn,.f-cta,.qw-submit,.qw-fab,.chip.gold,.cb-send,.pf-tab.active,.gal-tab.active,.map-dir,.card-quote:hover,.ps-nav:hover,.ps-pause:hover,.hv-pause:hover,.lang-toggle:hover,.theme-toggle:hover{
  background:var(--red-grad)!important;color:#2a0508!important}
.btn,.f-cta,.qw-fab{box-shadow:0 8px 22px rgba(201,150,46,.4),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(40,8,12,.3)}
.map-dir,.pf-tab.active,.gal-tab.active{box-shadow:0 8px 20px rgba(201,150,46,.35)!important}
.btn.ghost{color:#a87a20;border-color:#c9962e}
.btn.ghost:hover{background:var(--red-grad)!important;color:#2a0508!important}
.card-quote{color:#a87a20;border-color:#c9962e}
.ck .ck-accept{background:var(--gold-grad)!important;color:#1a0508!important}
.qw-fab svg,.f-cta svg{color:#fff}
/* headings & links on light surfaces */
.section h2,.card h3,.card.product h3,.about-copy .lead,.about-h,.c-block h3,.pslide span,.pf-tab,.gal-tab,.map-tab,.chip{color:#6b0f18}
.pf-tab,.gal-tab,.map-tab:not(.active),.chip{border-color:#c9962e}
.chip:hover{background:var(--red-grad)!important;color:#2a0508!important;border-color:transparent}
.loc .map,.map-open{color:#c9962e;border-color:#c9962e}
.map-open:hover,#contact .loc .map:hover{background:#c9962e;border-color:#c9962e;color:#fff}
.gallery-cat,.stat b,.vn{}
.card.product .p-badge{color:#a87a20}
::selection{background:rgba(201,150,46,.28);color:#1a0508}
:focus-visible{outline-color:#c9962e}
/* red gradient ring on the header + red-gold section line */
.site-header{border-bottom:2px solid transparent!important;border-image:linear-gradient(90deg,#a87a20,#f0c15a 50%,#a87a20) 1!important}
.section h2::after{background:linear-gradient(90deg,#c9962e,#f0c15a)!important}
/* dark surfaces: burgundy / charcoal */
.cta-band{background:radial-gradient(circle at 85% 20%,rgba(61,106,211,.28),transparent 55%),linear-gradient(135deg,#2e0a0f,#120506)!important}
.page-hero{background:radial-gradient(720px circle at 86% 15%,rgba(61,106,211,.22),transparent 62%),linear-gradient(135deg,#240a0d,#120506)!important}
.site-footer{background:radial-gradient(700px circle at 10% 0,rgba(61,106,211,.16),transparent 60%),linear-gradient(180deg,#200809,#0e0405)!important}
.f-glow{background:radial-gradient(circle,rgba(61,106,211,.14),transparent 65%)}
/* dark mode headings stay gold */
[data-theme=dark] .section h2,[data-theme=dark] .card h3,[data-theme=dark] .card.product h3,[data-theme=dark] .about-copy .lead,[data-theme=dark] .about-h,[data-theme=dark] .c-block h3,[data-theme=dark] .pslide span,[data-theme=dark] .map-tab,[data-theme=dark] .pf-tab:not(.active),[data-theme=dark] .gal-tab:not(.active){color:#f0c15a}
[data-theme=dark] .btn.ghost,[data-theme=dark] .card-quote{color:#f0c15a;border-color:#f0c15a}
.btn.ghost{color:#a87a20!important;background:transparent!important}
.btn.ghost:hover{color:#2a0508!important;background:var(--red-grad)!important}
[data-theme=dark] .btn.ghost{color:#f0c15a!important}
.hero .btn.ghost{color:#fff!important;border-color:rgba(255,255,255,.7)}

/* Nudge the brand name down a touch so it sits visually centred against the icon's own weight */
.brand-text{transform:translateY(4px)}
@media(max-width:899px){.brand-text{transform:translateY(2px)}}

/* ===== Testimonials ===== */
.testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:32px}
.t-card{padding:28px 26px;border-radius:16px;background:#fff;box-shadow:0 6px 24px #0000001a;border-top:2px solid rgba(201,150,46,.9)}
.t-stars{display:flex;gap:2px;color:#c9962e;margin-bottom:12px}
.t-text{font-size:1rem;line-height:1.75;margin:0 0 18px}
.t-who{display:flex;align-items:center;gap:12px}
.t-av{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none}
.t-av-fallback{display:grid;place-items:center;background:var(--gold-grad);color:#3a1608;font-weight:800;font-size:1.1rem}
.t-who b{display:block;font-size:.95rem}
.t-who small{display:block;opacity:.7;font-size:.8rem;margin-top:2px}
[data-theme=dark] .t-card{background:#1a0709;box-shadow:0 6px 24px #0000004d}
[data-theme=dark] .t-who small{color:#d9a63d}

/* ===== Product tag ribbon — distinct from the category badge (opposite corner) ===== */
.p-tag{position:absolute;z-index:3;top:12px;inset-inline-end:12px;padding:5px 13px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.02em;color:#fff;background:var(--red-grad);box-shadow:0 4px 12px #0000002a;pointer-events:none}

/* ===== Footer social icons — hidden automatically while footer.social is empty in config.js ===== */
.f-social{display:flex;gap:10px;margin-top:6px}
.f-social a{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:#d9a63d;background:#ffffff0d;border:1px solid #c9962e55;transition:.3s}
.f-social a:hover{background:#c9962e;color:#1a0508;border-color:transparent;transform:translateY(-2px)}