/*
Theme Name: Copy Site Pro - Durar Altaaj
Theme URI: https://example.com/
Author: OpenAI
Description: WordPress conversion of the Lovable React website for دُرر التاج للسيارات. RTL, responsive, and visually matched to the original dark luxury automotive design.
Version: 1.6.19
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: copy-site-pro
*/

:root {
  --radius: .875rem;
  --background: oklch(0.13 0.005 240);
  --foreground: oklch(0.96 0.005 240);
  --card: oklch(0.17 0.006 240);
  --muted-foreground: oklch(0.72 0.01 240);
  --border: oklch(0.25 0.008 240 / 0.6);
  --input: oklch(0.22 0.006 240);
  --gold: oklch(0.98 0 0);
  --gold-soft: oklch(0.92 0 0);
  --sport: oklch(0.52 0.22 25);
  --gradient-gold: linear-gradient(135deg, oklch(1 0 0) 0%, oklch(0.85 0 0) 100%);
  --shadow-gold: 0 10px 40px -10px color-mix(in oklab, var(--gold) 45%, transparent);
  --shadow-deep: 0 30px 60px -20px oklch(0 0 0 / 0.6);
  --font-sans: "Tajawal", "Cairo", system-ui, sans-serif;
}
*{box-sizing:border-box;border-color:var(--border)}
html{direction:rtl;scroll-behavior:smooth;background:var(--background)}
body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--font-sans);font-feature-settings:"ss01","ss02";overflow-x:hidden;line-height:1.6}
a{color:inherit;text-decoration:none} img{max-width:100%;height:auto;display:block} button,input,textarea{font:inherit} ::selection{background:var(--gold);color:var(--background)}
.csp-site{min-height:100vh;background:var(--background);color:var(--foreground)}
.container{width:min(100% - 2rem,80rem);margin-inline:auto}.container.sm{width:min(100% - 2rem,64rem)}
.grid{display:grid}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.hidden{display:none!important}.block{display:block}.inline-flex{display:inline-flex}.flex{display:flex}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.text-right{text-align:right}.min-w-0{min-width:0}.overflow-hidden{overflow:hidden}.pointer-none{pointer-events:none}.z-nav{z-index:50}.z-intro{z-index:100}.z-float{z-index:50}.leading-tight{line-height:1.1}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.3em}.uppercase{text-transform:uppercase}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shadow-deep{box-shadow:var(--shadow-deep)}
.rounded-full{border-radius:999px}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.aspect-4-3{aspect-ratio:4/3}.aspect-5-4{aspect-ratio:5/4}.aspect-about{aspect-ratio:4/5}.object-cover{object-fit:cover}.w-full{width:100%}.h-full{height:100%}.size-full{width:100%;height:100%}.font-black{font-weight:900}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.text-5xl{font-size:3rem}.text-7xl{font-size:4.5rem}.muted{color:var(--muted-foreground)}.foreground-85{color:color-mix(in oklab,var(--foreground) 85%,transparent)}.foreground-90{color:color-mix(in oklab,var(--foreground) 90%,transparent)}.gold-soft{color:var(--gold-soft)}.gold{color:var(--gold)}
.gold-text{background:var(--gradient-gold);-webkit-background-clip:text;background-clip:text;color:transparent}.glass{background:linear-gradient(160deg,oklch(1 0 0 / .04) 0%,oklch(1 0 0 / .02) 100%);backdrop-filter:blur(20px) saturate(140%);border:1px solid oklch(1 0 0 / .08)}.glass-strong{background:linear-gradient(160deg,oklch(0.18 0.005 240 / .85) 0%,oklch(0.1 0.005 240 / .9) 100%);backdrop-filter:blur(24px) saturate(140%);border:1px solid oklch(1 0 0 / .06)}.gold-border{position:relative;background:var(--card)}.gold-border:before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;background:linear-gradient(135deg,oklch(.95 0 0 / .6),oklch(.98 0 0 / .1),oklch(.95 0 0 / .4));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.btn-gold{background:var(--gradient-gold);color:oklch(.13 .005 240);font-weight:700;transition:all .3s ease;box-shadow:0 4px 24px -6px oklch(.98 0 0 / .5)}.btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 40px -8px oklch(.98 0 0 / .7)}.btn-outline-gold{border:1px solid oklch(.98 0 0 / .5);color:var(--gold-soft);transition:all .3s ease;background:oklch(.98 0 0 / .05)}.btn-outline-gold:hover{background:oklch(.98 0 0 / .15);border-color:var(--gold);box-shadow:0 0 0 1px oklch(.98 0 0 / .4),0 8px 30px -10px oklch(.98 0 0 / .4)}
.grid-bg{background-image:linear-gradient(oklch(.98 0 0 / .06) 1px,transparent 1px),linear-gradient(90deg,oklch(.98 0 0 / .06) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse at center,oklch(0 0 0) 30%,transparent 80%)}.hex-glow{background:radial-gradient(circle at 20% 0%,oklch(.98 0 0 / .15),transparent 40%),radial-gradient(circle at 80% 10%,oklch(.98 0 0 / .1),transparent 50%),radial-gradient(circle at 50% 100%,oklch(.52 .22 25 / .08),transparent 60%)}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}@keyframes float-slow{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-20px) translateX(10px)}}@keyframes pulse-gold{0%,100%{box-shadow:0 0 0 0 oklch(.98 0 0 / .5)}50%{box-shadow:0 0 0 12px oklch(.98 0 0 / 0)}}@keyframes scan{0%{transform:translateY(-100%);opacity:0}50%{opacity:1}100%{transform:translateY(100%);opacity:0}}@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.animate-float-slow{animation:float-slow 8s ease-in-out infinite}.animate-pulse-gold{animation:pulse-gold 2s ease-in-out infinite}.animate-scan{animation:scan 4s ease-in-out infinite}.shimmer{background:linear-gradient(90deg,transparent 0%,oklch(.98 0 0 / .3) 50%,transparent 100%);background-size:200% 100%;animation:shimmer 3s linear infinite}.fade-in{animation:fadeIn .22s ease-out both}.reveal{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease}.reveal.visible{opacity:1;transform:translateY(0)}
.site-header{position:fixed;inset-inline:0;top:0;z-index:50;transition:all .5s ease;padding-block:1rem}.site-header.is-scrolled{background:oklch(.13 .005 240 / .8);backdrop-filter:blur(22px);border-bottom:1px solid var(--border);padding-block:.25rem}.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.75rem}.logo{display:flex;flex-direction:column;line-height:1.05}.logo-main{font-size:1.25rem;font-weight:900}.logo-sub{font-size:.625rem;color:var(--muted-foreground);letter-spacing:.3em}.desktop-menu{display:none;align-items:center;gap:1.75rem;font-size:.875rem;list-style:none;margin:0;padding:0}.desktop-menu a{color:var(--muted-foreground);transition:color .25s ease;position:relative}.desktop-menu a:hover{color:var(--gold-soft)}.desktop-menu a:after{content:"";position:absolute;bottom:-.25rem;right:0;height:1px;width:0;background:var(--gold);transition:width .3s ease}.desktop-menu a:hover:after{width:100%}.nav-actions{display:flex;align-items:center;gap:.5rem}.mobile-toggle{border:0;cursor:pointer;color:var(--foreground);padding:.5rem;background:transparent}.mobile-menu{display:none;margin-block:.5rem;padding:1rem}.mobile-menu.is-open{display:block}.mobile-menu ul{list-style:none;margin:0;padding:0}.mobile-menu a{display:block;padding:.75rem;border-radius:.5rem;color:var(--foreground);transition:.2s}.mobile-menu a:hover{background:oklch(.98 0 0 / .1);color:var(--gold-soft)}
.intro{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:var(--background);transition:opacity .4s ease,visibility .4s ease}.intro.is-hidden{opacity:0;visibility:hidden}.intro-content{position:relative;text-align:center;padding-inline:1.5rem}.intro-title{font-size:3rem;font-weight:900;letter-spacing:-.025em}.intro-sub{margin-top:.75rem;font-size:.75rem;letter-spacing:.4em;color:var(--gold-soft)}.intro-line{margin:1.25rem auto 0;height:1px;width:10rem;background:linear-gradient(to left,transparent,var(--gold),transparent);transform-origin:center;animation:introLine .7s ease-out both .15s}@keyframes introLine{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
.hero{position:relative;padding-block:7rem 4rem;overflow:hidden}.hero-bg{position:absolute;inset:0;z-index:-10}.hero-bg img{height:100%;width:100%;object-fit:cover;opacity:.4}.hero-bg .hero-gradient{position:absolute;inset:0;background:linear-gradient(to bottom,oklch(.13 .005 240 / .6),oklch(.13 .005 240 / .8),var(--background))}.hero-particles{position:absolute;inset:0;z-index:-10;pointer-events:none}.particle{position:absolute;width:.25rem;height:.25rem;border-radius:999px;background:var(--gold)}.hero-grid{display:grid;gap:2.5rem;align-items:center}.hero-copy{text-align:center}.eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem 1rem;border-radius:999px;font-size:.75rem;color:var(--gold-soft);margin-bottom:1.5rem}.hero-title{font-size:2.25rem;font-weight:900;line-height:1.1;letter-spacing:-.025em;margin:0}.hero-desc{margin:1.5rem auto 0;max-width:36rem;font-size:1rem;color:color-mix(in oklab,var(--foreground) 85%,transparent)}.hero-small{margin:.75rem auto 0;max-width:36rem;font-size:.875rem;color:var(--muted-foreground)}.actions{margin-top:2rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}.action-btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.75rem 1.5rem;font-size:.875rem}.hero-card-wrap{position:relative;perspective:1200px}.hero-card{position:relative;border-radius:1.5rem;overflow:hidden;box-shadow:var(--shadow-deep);transition:transform .3s ease-out;transform-style:preserve-3d}.hero-card img{width:100%;aspect-ratio:5/4;object-fit:cover}.shine-cover{position:absolute;inset-block:0;left:-25%;right:-25%;pointer-events:none}.bottom-gradient{position:absolute;inset-inline:0;bottom:0;height:50%;background:linear-gradient(to top,var(--background),oklch(.13 .005 240 / .7),transparent)}.spec-strip{position:absolute;bottom:1.25rem;inset-inline:1.25rem;padding:1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;font-size:.75rem}.dot{width:.375rem;height:.375rem;border-radius:999px;background:var(--gold);display:inline-block}.tag-top{position:absolute;top:1.25rem;right:1.25rem;border-radius:999px;padding:.375rem 1rem;font-size:.75rem;font-weight:700}.glow-under{position:absolute;inset:-2rem;z-index:-10;border-radius:999px;background:oklch(.98 0 0 / .2);filter:blur(48px);opacity:.5}.stats{margin-top:4rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.stat{border-radius:1rem;padding:1rem;text-align:center}.stat-value{font-size:1.25rem;font-weight:900}.stat-label{margin-top:.25rem;font-size:.75rem;color:var(--muted-foreground)}
.section{position:relative;padding-block:5rem}.section-head{max-width:42rem;margin-inline:auto;text-align:center}.section-head.right{text-align:right;margin-inline:0}.section-title{font-size:1.875rem;line-height:1.12;font-weight:900;letter-spacing:-.025em;margin:0}.section-desc{margin-top:1rem;color:var(--muted-foreground);font-size:1rem}.card-grid-3{display:grid;gap:1rem}.card-grid-4{display:grid;gap:1rem}.cards-margin{margin-top:3rem}.feature-card,.category-card,.trust-card,.step-card,.social-card,.car-card,.compact-card{border-radius:1rem;position:relative;overflow:hidden}.feature-card{padding:1.5rem}.feature-num,.check-dot,.step-num,.icon-box{width:2.5rem;height:2.5rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center}.feature-num{font-size:1.125rem;font-weight:900}.feature-card h3,.category-card h3,.trust-card h3,.step-card h3{margin:1rem 0 0;font-weight:700}.feature-card p,.category-card p,.trust-card p,.step-card p{margin:.5rem 0 0;color:var(--muted-foreground);font-size:.875rem}.feature-card .blob{position:absolute;top:-2.5rem;left:-2.5rem;width:10rem;height:10rem;border-radius:999px;background:oklch(.98 0 0 / .1);filter:blur(48px);transition:.4s}.feature-card:hover .blob{background:oklch(.98 0 0 / .2)}.about-grid{display:grid;gap:3rem;align-items:center}.about-points{margin:1.5rem 0 0;padding:0;list-style:none;display:grid;gap:.75rem}.about-points li{display:flex;gap:.5rem;align-items:flex-start;font-size:.875rem}.check-dot{width:1.25rem;height:1.25rem;border-radius:999px;flex:0 0 auto;margin-top:.25rem}.about-image{position:relative}.about-image-frame{position:relative;border-radius:1.5rem;overflow:hidden;box-shadow:var(--shadow-deep);aspect-ratio:4/5}.about-image-frame img{width:100%;height:100%;object-fit:cover}.about-overlay{position:absolute;inset:0;background:linear-gradient(to top,var(--background),transparent,transparent)}.about-location{position:absolute;bottom:1.25rem;right:1.25rem;left:1.25rem;padding:1rem}.about-glow{position:absolute;inset:-1.5rem;z-index:-10;border-radius:1.5rem;background:oklch(.98 0 0 / .15);filter:blur(48px)}
.car-grid{display:grid;gap:1.25rem}.car-card{border-radius:1.5rem;transition:transform .3s ease;transform-style:preserve-3d}.car-image{position:relative;aspect-ratio:4/3;overflow:hidden}.car-image img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}.car-card:hover .car-image img,.compact-card:hover .car-image img{transform:scale(1.1)}.image-gradient{position:absolute;inset:0;background:linear-gradient(to top,var(--card),oklch(.17 .006 240 / .3),transparent)}.badge{position:absolute;top:1rem;right:1rem;border-radius:999px;padding:.25rem .75rem;font-size:.6875rem;font-weight:700}.year{position:absolute;top:1rem;left:1rem;border-radius:999px;padding:.25rem .75rem;font-size:.6875rem;font-weight:700}.year-pill{background:var(--gradient-gold);color:oklch(.13 .005 240);box-shadow:0 4px 24px -6px oklch(.98 0 0 / .5);border:1px solid oklch(1 0 0 / .25)}.model-badge{position:absolute;z-index:2;background:linear-gradient(160deg,oklch(0.31 .007 240 / .96) 0%,oklch(0.22 .006 240 / .98) 100%);color:var(--foreground);backdrop-filter:blur(16px) saturate(135%);border:2px solid #05070a;outline:1px solid rgba(255,255,255,.16);outline-offset:-4px;box-shadow:0 0 0 4px #05070a,0 0 0 5px rgba(255,255,255,.14),0 14px 34px -12px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.12)}.car-body{padding:1.25rem}.car-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.car-head h3{margin:0;font-size:1.25rem;font-weight:900}.car-cat{margin:.25rem 0 0;color:var(--muted-foreground);font-size:.75rem}.price-label{font-size:.625rem;color:var(--muted-foreground);letter-spacing:.08em;text-transform:uppercase}.price{text-align:left}.chips{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.375rem}.chip{font-size:.625rem;border-radius:999px;padding:.25rem .625rem;color:color-mix(in oklab,var(--foreground) 80%,transparent)}.car-actions{margin-top:1.25rem;display:flex;gap:.5rem}.car-actions a{flex:1;border-radius:999px;padding:.5rem .75rem;text-align:center;font-size:.75rem}.category-card{padding:1.5rem;cursor:default}.category-card .cat-blob{position:absolute;bottom:-5rem;right:-2.5rem;width:12rem;height:12rem;border-radius:999px;background:oklch(.98 0 0 / .1);filter:blur(48px);transition:.5s}.category-card:hover .cat-blob{background:oklch(.98 0 0 / .25)}.cat-icon{font-size:2.25rem}.steps-wrap{margin-top:3rem;position:relative}.step-line{display:none;position:absolute;top:2.5rem;right:3rem;left:3rem;height:1px;background:linear-gradient(to left,transparent,oklch(.98 0 0 / .4),transparent)}.step-card{padding:1.5rem;text-align:center}.step-num{width:3.5rem;height:3.5rem;border-radius:1rem;font-size:1.125rem;font-weight:900;margin-inline:auto}.trust-card{padding:1.25rem}.icon-box{background:oklch(.98 0 0 / .15);color:var(--gold)}.social-grid{display:grid;gap:.75rem}.social-card{padding:1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:transform .2s ease}.social-card:hover{transform:translateY(-2px)}.social-card .external{color:var(--muted-foreground);transition:.2s;flex:0 0 auto}.social-card:hover .external{color:var(--gold)}
.contact-grid{display:grid;gap:1.5rem}.contact-form{padding:1.5rem}.field-grid{display:grid;gap:1rem}.field{width:100%;background:oklch(.22 .006 240 / .5);border:1px solid var(--border);border-radius:.75rem;padding:.75rem 1rem;color:var(--foreground);font-size:.875rem;outline:none;transition:.2s}.field::placeholder{color:var(--muted-foreground)}.field:focus{border-color:oklch(.98 0 0 / .6);box-shadow:0 0 0 2px oklch(.98 0 0 / .2)}textarea.field{margin-top:1rem;resize:none}.submit-btn{margin-top:1.25rem;width:100%;border:0;cursor:pointer;border-radius:999px;padding:.875rem 1.5rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.contact-aside{display:grid;gap:1rem}.contact-card{padding:1.5rem;border-radius:1rem;display:block;transition:transform .2s}.contact-card:hover{transform:translateY(-2px)}
.site-footer{border-top:1px solid var(--border);padding-block:3rem;margin-top:2.5rem}.footer-grid{display:grid;gap:2rem}.footer-title{font-size:1.5rem;font-weight:900}.footer-sub{font-size:.75rem;color:var(--muted-foreground);letter-spacing:.3em;margin-top:.25rem}.footer-p{margin-top:1rem;color:var(--muted-foreground);font-size:.875rem;max-width:24rem}.footer-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;color:var(--muted-foreground);font-size:.875rem}.footer-list a:hover{color:var(--gold-soft)}.footer-copy{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--border);text-align:center;color:var(--muted-foreground);font-size:.75rem}.floating-wa{position:fixed;bottom:1.25rem;left:1.25rem;z-index:50;border-radius:999px;padding:.75rem 1rem .75rem .75rem;display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;box-shadow:var(--shadow-gold)}
.page-main{padding-top:6rem}.page-hero{position:relative;padding-block:3rem 4rem}.page-glow{position:absolute;top:-5rem;right:50%;transform:translateX(50%);width:36rem;height:36rem;border-radius:999px;background:oklch(.98 0 0 / .1);filter:blur(48px);z-index:-10}.back-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--gold-soft);transition:.2s}.back-link:hover{color:var(--gold)}.detail-grid{margin-top:2rem;display:grid;gap:2rem;align-items:start}.breadcrumb{display:flex;align-items:center;gap:.75rem;font-size:.875rem;color:var(--muted-foreground);flex-wrap:wrap}.breadcrumb a:hover{color:var(--gold-soft)}.detail-image{position:relative;border-radius:1.5rem;overflow:hidden;box-shadow:var(--shadow-deep)}.detail-image img{width:100%;aspect-ratio:5/4;object-fit:cover}.detail-title{font-size:1.875rem;line-height:1.12;font-weight:900;margin:.5rem 0 0}.spec-table{margin-top:1.5rem;border-radius:1rem;overflow:hidden}.spec-row{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1.25rem;font-size:.875rem}.spec-row:nth-child(odd){background:oklch(.96 .005 240 / .02)}.price-row{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;background:oklch(.98 0 0 / .1);border-top:1px solid oklch(.98 0 0 / .3)}.detail-actions{margin-top:1.5rem;display:grid;gap:.5rem}.detail-actions a{border-radius:999px;padding:.625rem 1.25rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.not-found{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--background);padding-inline:1rem}.not-found-box{text-align:center;max-width:28rem}.not-found-box h1{font-size:4.5rem;margin:0;font-weight:900}.not-found-box h2{margin:1rem 0 0;font-size:1.25rem}.not-found-box p{margin:.5rem 0 0;color:var(--muted-foreground);font-size:.875rem}

.empty-state{max-width:48rem;margin-inline:auto;text-align:center;padding:2rem;border-radius:1.5rem}
.empty-state h3{margin:0 0 .75rem;font-size:1.35rem;font-weight:900}
.empty-state p{margin:0;color:var(--muted-foreground);line-height:1.8}
@media (min-width:640px){.container{width:min(100% - 3rem,80rem)}.hero-title{font-size:3rem}.section-title{font-size:2.25rem}.field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stats{gap:1rem}.stat{padding:1.25rem}.stat-value{font-size:1.5rem}.aspect-about{aspect-ratio:5/4}.car-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card-grid-3,.social-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-title{font-size:3rem}.detail-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:768px){.card-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.card-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.step-card{text-align:right}.step-num{margin-inline:0}.step-line{display:block}.footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.desktop-menu{display:flex}.mobile-toggle{display:none}.mobile-menu{display:none!important}.hero{padding-block:9rem 6rem}.hero-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:4rem}.hero-copy{text-align:right}.hero-desc,.hero-small{margin-right:0;margin-left:auto}.actions{justify-content:flex-start}.hero-title{font-size:4.5rem}.stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:6rem}.stat-value{font-size:1.875rem}.about-grid,.detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem}.about-points{grid-template-columns:repeat(2,minmax(0,1fr))}.car-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.card-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.trust-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.social-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.contact-grid{grid-template-columns:3fr 2fr}.hero-copy .eyebrow{margin-inline-start:0}.section-title{font-size:3rem}.page-hero{padding-block:3rem 4rem}}
@media (max-width:639px){.floating-wa span{display:none}.nav-whatsapp{display:none}.intro-title{font-size:3rem}.intro-sub{font-size:.75rem}.hero-title{font-size:2.25rem}.detail-actions a{width:100%}}


/* Pixel-match refinements against Lovable source */
.intro-content{animation:introContentIn .6s cubic-bezier(.22,1,.36,1) both}
@keyframes introContentIn{from{opacity:0;transform:scale(.85) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.compact-card{border-radius:1.5rem}
.compact-card .car-body{padding:1.25rem}
.compact-card .car-head h3{font-size:1.125rem}
.compact-card .chip{font-size:.625rem}
@media (min-width:640px){.intro-title{font-size:3.75rem}.intro-sub{font-size:.875rem}.feature-card{padding:1.75rem}.car-body{padding:1.5rem}.chip{font-size:.75rem}.car-actions a{font-size:.875rem}}
@media (min-width:1024px){.intro-title{font-size:4.5rem}}


/* Additional source-level spacing overrides */
.eyebrow{margin-bottom:1rem}
.hero-copy>.eyebrow{margin-bottom:1.5rem}
.feature-card h3{margin-top:1.25rem;font-size:1.25rem;font-weight:700}
.category-card h3{font-size:1.125rem;font-weight:900}
.step-card h3{font-size:1.125rem;font-weight:700}
.section-desc{font-size:1rem}
@media (min-width:640px){.logo-main{font-size:1.5rem}.logo-sub{font-size:.75rem}.section-desc{font-size:1.125rem}}


/* Responsive grid corrections matching Tailwind breakpoints in Lovable */
@media (min-width:640px){.hero-desc{font-size:1.125rem}.about-points{grid-template-columns:repeat(2,minmax(0,1fr))}.about-image-frame{aspect-ratio:5/4}.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:768px) and (max-width:1023px){.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.category-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.trust-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}


/* Mobile /cars horizontal overflow fix */
html,body{width:100%;max-width:100%;overflow-x:hidden!important}
.csp-site{position:relative;width:100%;max-width:100vw;overflow-x:hidden}
.page-main,.page-hero,.page-main>section,.site-footer{width:100%;max-width:100vw;overflow-x:hidden}
.page-main *{min-width:0}
@supports (overflow:clip){html,body,.csp-site,.page-main,.page-hero,.page-main>section,.site-footer{overflow-x:clip}}
@media (max-width:639px){
  .container{width:100%;max-width:100%;padding-inline:1rem;margin-inline:auto}
  .container.sm{width:100%;max-width:100%;padding-inline:1rem}
  .page-main{padding-top:5.25rem}
  .page-hero{padding-block:2.5rem 3rem}
  .page-glow{width:22rem;height:22rem;filter:blur(36px);right:50%;transform:translateX(50%)}
  .car-grid{width:100%;max-width:100%;grid-template-columns:minmax(0,1fr)}
  .car-card,.compact-card{width:100%;max-width:100%;min-width:0;overflow:hidden}
  .car-image,.car-body,.chips,.car-actions{width:100%;max-width:100%;min-width:0}
  .car-head{gap:.5rem;min-width:0}
  .car-head>div:first-child{min-width:0;max-width:58%}
  .car-head h3{overflow-wrap:anywhere;word-break:normal}
  .price{max-width:42%;min-width:0;overflow-wrap:anywhere}
  .car-actions a{min-width:0;width:100%}
  .floating-wa{left:.875rem;bottom:.875rem}
}


/* Customizer / dashboard edit support */
.custom-logo{max-height:54px;width:auto}.wp-custom-logo .logo{display:flex;align-items:center}.contact-card{display:flex;align-items:center;gap:.75rem}.page-main .wp-block-image img{border-radius:1rem}.csp-shortcode-cars,.csp-shortcode-social{margin-block:1.5rem}.car-actions:has(a:only-child) a{width:100%;flex-basis:100%}


/* Car publishing dashboard + gallery support */
.car-head.no-price{justify-content:flex-start}.car-head.no-price>div:first-child{max-width:100%}.detail-media{min-width:0}.detail-gallery{margin-top:.875rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.625rem}.detail-gallery-item{display:block;border-radius:1rem;overflow:hidden;transition:transform .2s ease,opacity .2s ease}.detail-gallery-item:hover{transform:translateY(-2px);opacity:.92}.detail-gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover}.car-head.no-price+.chips{margin-top:1rem}
@media (max-width:639px){.detail-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}.detail-gallery-item{border-radius:.875rem}.car-head>div:first-child{max-width:100%}.price{max-width:100%}}


/* Mobile priority fixes: product card header, mobile menu flow, card action touch targets */
@media (max-width:639px){
  .car-head{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:.75rem;
  }
  .car-head>div:first-child,
  .price{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .price{
    text-align:right;
  }
  .car-head h3{
    font-size:1.125rem;
    line-height:1.28;
    overflow-wrap:anywhere;
  }
  .car-cat{
    margin-top:.35rem;
  }
  .price-label{
    letter-spacing:.04em;
  }
  .price .gold-text{
    display:block;
    font-size:1rem;
    line-height:1.35;
    overflow-wrap:anywhere;
  }
  .car-actions{
    gap:.625rem;
  }
  .car-actions a{
    min-height:44px;
    padding:.75rem .875rem;
    font-size:.875rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1.2;
  }
}

@media (max-width:1023px){
  .mobile-toggle{
    width:44px;
    height:44px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .site-header.is-mobile-open{
    position:sticky;
    top:0;
    background:oklch(.13 .005 240 / .94);
    backdrop-filter:blur(22px) saturate(140%);
    border-bottom:1px solid var(--border);
    padding-block:.35rem;
  }
  .site-header.is-mobile-open .mobile-menu{
    margin-block:.25rem .75rem;
    max-height:calc(100dvh - 6rem);
    overflow-y:auto;
  }
}


/* =========================================================
   v1.5.3 - Comprehensive mobile/RTL overflow and layout hardening
   Fixes horizontal swipe/desktop-grid leakage on phones, product details,
   cards, breadcrumbs, action buttons, galleries, and footer columns.
   ========================================================= */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
}

body {
  position: relative;
  touch-action: pan-y;
}

.csp-site,
.site-header,
.page-main,
.page-hero,
.section,
.site-footer,
.hero,
.container,
.container.sm {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body,
  .csp-site,
  .site-header,
  .page-main,
  .page-hero,
  .section,
  .site-footer,
  .hero,
  .container,
  .container.sm {
    overflow-x: clip;
  }
}

.csp-site *,
.csp-site *::before,
.csp-site *::after {
  min-width: 0;
}

.container,
.container.sm {
  box-sizing: border-box;
}

img,
video,
svg,
iframe,
table,
pre,
code {
  max-width: 100%;
}

svg {
  flex-shrink: 0;
}

button,
a,
span,
p,
li,
div,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: anywhere;
}

.grid-bg,
.hex-glow,
.hero-particles,
.page-glow,
.hero-bg,
.hero-bg .hero-gradient {
  pointer-events: none;
  max-width: 100%;
}

.nav-inner,
.mobile-menu,
.actions,
.car-head,
.chips,
.car-actions,
.detail-actions,
.spec-row,
.price-row,
.footer-grid,
.footer-list li,
.social-card,
.contact-card,
.breadcrumb {
  min-width: 0;
  max-width: 100%;
}

.nav-inner,
.actions,
.chips,
.car-actions,
.detail-actions,
.breadcrumb {
  flex-wrap: wrap;
}

.car-grid,
.card-grid-3,
.card-grid-4,
.category-grid,
.trust-grid,
.social-grid,
.stats,
.about-grid,
.about-points,
.contact-grid,
.detail-grid,
.footer-grid,
.field-grid,
.detail-gallery {
  width: 100%;
  max-width: 100%;
}

.car-card,
.compact-card,
.feature-card,
.category-card,
.trust-card,
.step-card,
.social-card,
.contact-form,
.contact-card,
.detail-image,
.spec-table,
.footer-grid > *,
.detail-grid > *,
.about-grid > *,
.hero-grid > * {
  width: 100%;
  max-width: 100%;
}

.detail-image img,
.detail-gallery-item img,
.car-image img,
.hero-card img {
  width: 100%;
  max-width: 100%;
}

.price,
.price .gold-text,
.detail-title,
.section-title,
.hero-title,
.footer-title,
.footer-sub,
.footer-p,
.footer-list,
.breadcrumb a,
.breadcrumb span,
.spec-row span,
.price-row span {
  min-width: 0;
  max-width: 100%;
}

/* Phones and narrow tablets: one-column layout everywhere it can overflow. */
@media (max-width: 767px) {
  .container,
  .container.sm {
    width: 100%;
    max-width: 100%;
    padding-inline: 1rem;
  }

  .site-header {
    width: 100%;
    max-width: 100%;
  }

  .nav-inner {
    gap: .75rem;
  }

  .logo {
    max-width: calc(100% - 3.5rem);
  }

  .logo-main {
    font-size: clamp(1rem, 5vw, 1.35rem);
    line-height: 1.15;
  }

  .logo-sub {
    letter-spacing: .16em;
    white-space: normal;
  }

  .hero {
    padding-block: 6.5rem 3rem;
  }

  .page-main {
    padding-top: 5.25rem;
  }

  .page-hero,
  .section {
    padding-block: 2.75rem;
  }

  .page-glow {
    right: 50%;
    width: min(22rem, 92vw);
    height: min(22rem, 92vw);
    transform: translateX(50%);
  }

  .hero-grid,
  .stats,
  .about-grid,
  .about-points,
  .car-grid,
  .card-grid-3,
  .card-grid-4,
  .category-grid,
  .trust-grid,
  .social-grid,
  .contact-grid,
  .detail-grid,
  .footer-grid,
  .field-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem;
  }

  .detail-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hero-title,
  .section-title,
  .detail-title {
    font-size: clamp(1.75rem, 9vw, 2.35rem);
    line-height: 1.15;
  }

  .hero-desc,
  .hero-small,
  .section-desc,
  .foreground-85 {
    font-size: .95rem !important;
    line-height: 1.8;
  }

  .actions,
  .car-actions,
  .detail-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .625rem;
  }

  .action-btn,
  .car-actions a,
  .detail-actions a,
  .submit-btn,
  .back-link,
  .mobile-menu a {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  .breadcrumb {
    gap: .45rem;
    font-size: .8rem;
  }

  .detail-media,
  .detail-image,
  .detail-gallery,
  .spec-table {
    width: 100%;
    max-width: 100%;
  }

  .detail-image {
    border-radius: 1.1rem;
  }

  .detail-image img {
    aspect-ratio: 4 / 3;
  }

  .spec-row,
  .price-row {
    gap: .75rem;
    padding: .85rem 1rem;
  }

  .spec-row span:last-child,
  .price-row span:last-child {
    text-align: left;
  }

  .car-card,
  .compact-card {
    border-radius: 1.25rem;
    transform: none !important;
  }

  .car-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start;
    gap: .75rem;
  }

  .price {
    text-align: right;
  }

  .chips {
    display: flex;
    gap: .45rem;
  }

  .chip {
    max-width: 100%;
    white-space: normal;
    line-height: 1.45;
  }

  .footer-grid {
    text-align: right;
  }

  .footer-sub {
    letter-spacing: .12em;
  }

  .footer-p {
    max-width: 100%;
  }

  .footer-list li,
  .footer-list a {
    width: 100%;
    justify-content: flex-start !important;
    text-align: right;
  }

  .floating-wa {
    left: .875rem;
    right: auto;
    bottom: .875rem;
    max-width: calc(100vw - 1.75rem);
  }
}

/* Real touch devices can report a desktop-like CSS width in some browsers.
   Keep phone/tablet touch layouts safe up to 1180px to block side-scroll leaks. */
@media (hover: none) and (pointer: coarse) and (max-width: 1180px) {
  html,
  body,
  .csp-site {
    overflow-x: hidden !important;
  }

  .container,
  .container.sm {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: clamp(.875rem, 3.5vw, 1.25rem);
  }

  .hero-grid,
  .about-grid,
  .contact-grid,
  .detail-grid,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .car-grid,
  .card-grid-3,
  .card-grid-4,
  .category-grid,
  .trust-grid,
  .social-grid,
  .stats,
  .about-points,
  .field-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .detail-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  [data-tilt],
  .car-card,
  .compact-card {
    transform: none !important;
    transform-style: flat !important;
  }

  .car-card:hover .car-image img,
  .compact-card:hover .car-image img,
  .detail-gallery-item:hover {
    transform: none !important;
  }

  .actions,
  .car-actions,
  .detail-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .action-btn,
  .car-actions a,
  .detail-actions a {
    width: 100%;
    max-width: 100%;
  }

  .site-footer,
  .footer-grid,
  .footer-grid > * {
    width: 100%;
    max-width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .container,
  .container.sm {
    width: 100%;
    max-width: 100%;
    padding-inline: 1.5rem;
  }

  .detail-grid,
  .footer-grid,
  .contact-grid,
  .hero-grid,
  .about-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .car-grid,
  .card-grid-3,
  .category-grid,
  .trust-grid,
  .social-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  .footer-list li[dir="ltr"] {
    justify-content: flex-end !important;
    text-align: left;
  }
}

/* =========================================================
   v1.5.4 - Mobile header hamburger/menu open fix
   Makes the three-lines button reliable on touch devices and
   ensures the mobile menu is rendered above page content.
   ========================================================= */
@media (max-width: 1023px) {
  .site-header {
    z-index: 1000 !important;
    overflow: visible !important;
  }

  .site-header .container,
  .site-header .nav-inner {
    overflow: visible !important;
  }

  .site-header.is-mobile-open {
    position: fixed !important;
    top: 0;
    inset-inline: 0;
    background: oklch(.13 .005 240 / .96);
    backdrop-filter: blur(22px) saturate(140%);
    border-bottom: 1px solid var(--border);
    padding-block: .35rem;
  }

  .mobile-toggle {
    position: relative;
    z-index: 1002;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-toggle svg,
  .mobile-toggle svg * {
    pointer-events: none;
  }

  .mobile-menu {
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .mobile-menu.is-open {
    display: block !important;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    position: fixed;
    top: calc(var(--csp-header-height, 76px) + .5rem);
    right: 1rem;
    left: 1rem;
    z-index: 1001;
    width: auto;
    max-width: calc(100vw - 2rem);
    margin: 0;
    max-height: calc(100dvh - var(--csp-header-height, 76px) - 1.5rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.csp-menu-open {
    overflow: hidden !important;
  }

  body.csp-menu-open .floating-wa {
    display: none !important;
  }

  .mobile-menu .btn-gold,
  .mobile-menu a.btn-gold {
    color: oklch(.13 .005 240) !important;
  }
}

/* =========================================================
   v1.5.5 - Mobile menu WhatsApp button contrast hardening
   Forces the WhatsApp CTA inside the mobile drawer to keep a
   dark readable label/icons over the light gold button state.
   ========================================================= */
@media (max-width: 1023px) {
  .mobile-menu .mobile-whatsapp-item {
    padding-top: .625rem !important;
  }

  .mobile-menu a.mobile-whatsapp,
  .mobile-menu .mobile-whatsapp,
  .mobile-menu li > a.btn-gold,
  .mobile-menu a.btn-gold {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .5rem !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: .75rem 1rem !important;
    border-radius: 999px !important;
    background: var(--gradient-gold) !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    text-shadow: none !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    border: 1px solid rgba(255,255,255,.45) !important;
    box-shadow: 0 10px 28px rgba(255,255,255,.16) !important;
  }

  .mobile-menu a.mobile-whatsapp:visited,
  .mobile-menu a.mobile-whatsapp:hover,
  .mobile-menu a.mobile-whatsapp:focus,
  .mobile-menu a.mobile-whatsapp:active,
  .mobile-menu li > a.btn-gold:visited,
  .mobile-menu li > a.btn-gold:hover,
  .mobile-menu li > a.btn-gold:focus,
  .mobile-menu li > a.btn-gold:active {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    background: var(--gradient-gold) !important;
    opacity: 1 !important;
    outline-color: rgba(255,255,255,.75);
  }

  .mobile-menu a.mobile-whatsapp svg,
  .mobile-menu a.mobile-whatsapp svg *,
  .mobile-menu li > a.btn-gold svg,
  .mobile-menu li > a.btn-gold svg * {
    color: #111827 !important;
    stroke: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
  }
}


/* v1.5.9 - Restore social/platform accounts section while keeping demo cars hidden */

/* v1.6.0 - Restore hero statistics, remove integrated-experience demo section and contact form section. */

/* v1.6.2 - Four editable contact numbers from WordPress Customizer. */

/* Car detail slider and zoom lightbox */
.detail-slider {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  box-shadow: var(--shadow-deep);
  background: var(--card);
}
.detail-slider-main {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.detail-slider-main img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
.detail-slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid oklch(.98 0 0 / .38);
  border-radius: 999px;
  background: oklch(.13 .005 240 / .72);
  color: var(--gold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  transform: translateY(-50%);
  transition: .2s ease;
  backdrop-filter: blur(10px);
}
.detail-slider-arrow:hover {
  background: oklch(.18 .006 240 / .9);
  transform: translateY(-50%) scale(1.04);
}
.detail-slider-arrow-prev { right: .875rem; }
.detail-slider-arrow-next { left: .875rem; }
.detail-slider-count {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: oklch(.13 .005 240 / .72);
  color: var(--gold);
  font-size: .8rem;
  font-weight: 800;
  backdrop-filter: blur(10px);
}
.detail-gallery-item {
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  text-align: inherit;
}
.detail-gallery-item.is-active {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.detail-gallery-single { display: none; }
body.csp-lightbox-open { overflow: hidden; }
.csp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: oklch(.05 .004 240 / .92);
  backdrop-filter: blur(12px);
}
.csp-lightbox.is-open { display: flex; }
.csp-lightbox-stage {
  width: min(96vw, 1100px);
  max-height: 88vh;
  margin: 0;
  text-align: center;
}
.csp-lightbox-stage img {
  display: block;
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 1.25rem;
  transition: transform .2s ease;
  cursor: zoom-in;
}
.csp-lightbox.is-zoomed .csp-lightbox-stage img {
  transform: scale(1.6);
  cursor: zoom-out;
}
.csp-lightbox-stage figcaption {
  display: inline-flex;
  margin-top: .75rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: oklch(.98 0 0 / .1);
  color: var(--gold);
  font-size: .85rem;
  font-weight: 800;
}
.csp-lightbox-close,
.csp-lightbox-zoom,
.csp-lightbox-arrow {
  border: 1px solid oklch(.98 0 0 / .32);
  background: oklch(.13 .005 240 / .82);
  color: var(--gold);
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.csp-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  font-size: 2rem;
  line-height: 1;
}
.csp-lightbox-zoom {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  min-height: 2.5rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  font-weight: 900;
}
.csp-lightbox-arrow {
  position: absolute;
  top: 50%;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  font-size: 2.2rem;
  line-height: 1;
  transform: translateY(-50%);
}
.csp-lightbox-prev { right: 1rem; }
.csp-lightbox-next { left: 1rem; }
@media (max-width: 639px) {
  .detail-slider { border-radius: 1.1rem; }
  .detail-slider-main img { aspect-ratio: 4 / 3; }
  .detail-slider-arrow,
  .csp-lightbox-arrow {
    width: 2.35rem;
    height: 2.35rem;
    font-size: 1.7rem;
  }
  .detail-slider-arrow-prev { right: .5rem; }
  .detail-slider-arrow-next { left: .5rem; }
  .csp-lightbox { padding: .75rem; }
  .csp-lightbox-stage img { border-radius: .9rem; }
  .csp-lightbox.is-zoomed .csp-lightbox-stage img { transform: scale(1.35); }
}

/* v1.6.3 - Mobile car detail gallery: compact dot-style thumbnails */
@media (max-width: 639px) {
  .detail-media .detail-gallery {
    display: flex !important;
    grid-template-columns: none !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: .38rem;
    margin-top: .6rem;
    padding: .15rem .35rem 0;
    width: 100%;
    max-width: 100%;
  }

  .detail-media .detail-gallery-item {
    position: relative;
    width: .65rem !important;
    height: .65rem !important;
    min-width: .65rem !important;
    min-height: .65rem !important;
    max-width: .65rem !important;
    max-height: .65rem !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 999px !important;
    overflow: visible;
    background: color-mix(in oklab, var(--foreground) 32%, transparent) !important;
    box-shadow: none !important;
    opacity: .72;
  }

  .detail-media .detail-gallery-item img {
    display: none !important;
  }

  .detail-media .detail-gallery-item.is-active {
    width: 1.35rem !important;
    min-width: 1.35rem !important;
    max-width: 1.35rem !important;
    background: var(--gold) !important;
    opacity: 1;
  }

  .detail-media .detail-gallery-item:hover,
  .detail-media .detail-gallery-item:focus-visible {
    transform: none !important;
    opacity: 1;
  }
}

/* v1.6.4 - Mobile pinch-to-zoom support inside car image lightbox */
.csp-lightbox-stage {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
}
.csp-lightbox-stage img {
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
@media (hover: none) and (pointer: coarse) {
  .csp-lightbox-stage,
  .csp-lightbox-stage img {
    touch-action: none;
  }
}

/* v1.6.5 - Real mobile pinch zoom on car detail main image and lightbox + cache-bust */
.detail-slider-main,
.csp-lightbox-stage {
  -ms-touch-action: none;
  touch-action: none;
  overscroll-behavior: contain;
}
.detail-slider-main img,
.csp-lightbox-stage img {
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.detail-slider-main.is-touch-zoomed img,
.csp-lightbox-stage.is-touch-zoomed img {
  transition: none !important;
}
.detail-slider-main.is-touch-zoomed {
  cursor: zoom-out;
}
@media (hover: none) and (pointer: coarse) {
  .detail-slider-main,
  .detail-slider-main img,
  .csp-lightbox-stage,
  .csp-lightbox-stage img {
    -ms-touch-action: none;
    touch-action: none;
  }
}


/* v1.6.8 - Mobile car detail: breadcrumb directly under header, back link below it, image lifted; keep car title in its original place */
@media (max-width: 639px) {
  body.csp-car-detail-page .page-main {
    padding-top: 4.45rem !important;
  }

  body.csp-car-detail-page .page-hero {
    padding-top: .15rem !important;
    padding-bottom: 1.75rem !important;
  }

  body.csp-car-detail-page .page-hero > .container {
    padding-inline: .75rem !important;
  }

  .detail-mobile-breadcrumb {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    gap: .32rem !important;
    font-size: .78rem !important;
    line-height: 1.25 !important;
  }

  .detail-back-link,
  body.csp-car-detail-page .page-hero .back-link.detail-back-link {
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin-top: .35rem !important;
    padding: 0 !important;
    display: inline-flex !important;
    justify-content: flex-start !important;
    text-align: right !important;
    font-size: .84rem !important;
    line-height: 1.25 !important;
  }

  .detail-grid {
    margin-top: .5rem !important;
    gap: .75rem !important;
  }

  .detail-media,
  .detail-slider {
    margin-top: 0 !important;
  }

  .detail-slider {
    border-radius: 1rem !important;
  }

  .detail-slider-main img {
    aspect-ratio: 4 / 3 !important;
  }

  .detail-media .detail-gallery {
    margin-top: .32rem !important;
  }
}


/* =========================================================
   v1.6.10 - Extra light car card image overlay
   Makes listing photos much clearer by keeping only a very
   soft fade at the bottom edge of the image.
   ========================================================= */
.car-image .image-gradient,
.car-card .image-gradient,
.compact-card .image-gradient {
  background: linear-gradient(
    to top,
    rgba(16, 18, 24, .18) 0%,
    rgba(16, 18, 24, .07) 18%,
    transparent 42%
  ) !important;
}

.car-card .car-image img,
.compact-card .car-image img {
  filter: none !important;
  opacity: 1 !important;
}

@media (max-width: 767px) {
  .car-image .image-gradient,
  .car-card .image-gradient,
  .compact-card .image-gradient {
    background: linear-gradient(
      to top,
      rgba(16, 18, 24, .10) 0%,
      rgba(16, 18, 24, .04) 14%,
      transparent 32%
    ) !important;
  }
}


/* =========================================================
   v1.6.11 - Hide car image dark overlay completely
   Removes the image-gradient overlay from car cards on all pages.
   ========================================================= */
.image-gradient,
.car-image .image-gradient,
.car-card .image-gradient,
.compact-card .image-gradient {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  pointer-events: none !important;
}

.car-card .car-image img,
.compact-card .car-image img,
.car-image img {
  filter: none !important;
  opacity: 1 !important;
}


/* =========================================================
   v1.6.14 - Mobile menu anchor/link navigation fix
   Keeps in-page targets reachable when the mobile drawer closes.
   ========================================================= */
html {
  scroll-padding-top: calc(var(--csp-header-height, 80px) + 16px);
}

#hero,
#about,
#cars,
#details,
#categories,
#steps,
#trust,
#social,
#platforms {
  scroll-margin-top: calc(var(--csp-header-height, 80px) + 16px);
}

.csp-anchor-target {
  display: block;
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
}

/* v1.6.16 - Prevent Arabic dots from being clipped in the Related Cars title.
   Keeps the existing font, colors, and visual style unchanged. */
.related-cars-section,
.related-cars-section .container,
.related-cars-section .section-head {
  overflow: visible !important;
}
.related-cars-section .section-title {
  overflow: visible !important;
  line-height: 1.45;
  padding-block: .16em .04em;
}
.related-cars-section .section-title .gold-text {
  display: inline-block;
  overflow: visible !important;
  line-height: inherit;
  padding-top: .04em;
}


/* v1.6.18 - Keep the all-cars back-to-home link below the fixed mobile header. */
@media (max-width: 639px) {
  body.csp-cars-page .page-main {
    padding-top: 5.25rem !important;
  }

  body.csp-cars-page .page-hero {
    padding-top: 2.75rem !important;
    padding-bottom: 2.75rem !important;
  }

  body.csp-cars-page .page-hero > .container {
    padding-inline: 1rem !important;
  }

  body.csp-cars-page .page-hero .back-link {
    position: relative;
    z-index: 2;
    pointer-events: auto;
  }
}

/* =========================================================
   v1.6.19 - Complete Arabic letter dots in intro and hero titles
   Fixes slight clipping/distortion around dotted Arabic letters such as ت
   without changing images or creating any new visual assets.
   ========================================================= */
.intro,
.intro-content,
.intro-title,
.hero,
.hero-copy,
.hero-title {
  overflow: visible !important;
}

.intro-title,
.hero-title {
  font-family: "Cairo", "Tajawal", system-ui, sans-serif;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
  padding-block: .18em .08em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

.intro-title .gold-text,
.hero-title .gold-text {
  display: inline-block;
  overflow: visible !important;
  line-height: inherit;
  padding-block: .05em .02em;
  vertical-align: baseline;
}

@media (max-width: 639px) {
  .intro-title,
  .hero-title {
    line-height: 1.38 !important;
    padding-block: .2em .1em;
  }
}