/* Public-site presentation. Admin keeps its existing form styles. */
body:not(.admin-body){--bg:#090c0b;--surface:#111714;--white:#f4f6f4;--muted:#a6b0aa;--line:#29332d;--green:#67eda0;color-scheme:dark;font-family:Arial,Helvetica,sans-serif;line-height:1.5}
.icon{display:inline-block;width:23px;height:23px;flex-shrink:0;vertical-align:middle}
[data-icon]{display:inline-flex;align-items:center;justify-content:center}
body:not(.admin-body) h1,body:not(.admin-body) h2,body:not(.admin-body) h3{font-weight:600;letter-spacing:-.8px}
body:not(.admin-body) h2{font-size:clamp(32px,3.5vw,48px);line-height:1.15;margin-bottom:20px}
body:not(.admin-body) .eyebrow{font-size:15px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--muted);margin-bottom:14px}
.header{height:80px;border:0;color:#fff;padding:0 3%}
.header nav{font-weight:600;gap:30px}
.header nav a:hover{color:white;background:#ffffff24;border-radius:4px}
.header-contact{display:inline-flex;align-items:center;gap:8px;border:0;padding:8px;font-weight:600}
.header .wordmark{font-size:20px}
.hero{min-height:650px;height:90svh;max-height:960px;padding:120px 5% 60px;justify-content:center;text-align:center;color:white;background-image:linear-gradient(180deg,#0008 0%,#0002 42%,#0001 75%,#0004),url('/assets/hero.png');background-position:center 62%}
.hero-copy{max-width:1000px;width:100%}
.hero h1{font-size:clamp(40px,4.5vw,64px);line-height:1.1;letter-spacing:-1.2px;margin:0 0 12px;font-weight:600}
.hero-copy>p:not(.eyebrow){font-size:19px;color:#fff;margin:0 0 26px}
.actions{justify-content:center;margin-top:24px;gap:12px}
.button{justify-content:center;gap:10px;font-size:15px;border-radius:4px;min-height:48px;padding:12px 25px}
body:not(.admin-body) .primary{background:var(--green);color:#09190f}
body:not(.admin-body) .primary:hover{background:#8ff8b8}
.hero .button{min-width:235px}
.hero .glass{background:#ffffff13;color:#f4f6f4;border:1px solid #ffffff60;backdrop-filter:blur(12px)}
.hero-bottom{justify-content:center;bottom:28px;font-size:12px;letter-spacing:0;left:5%;right:5%;color:white}
.hero-bottom>span{display:none}
.hero-bottom a{display:flex;align-items:center;gap:8px}
.image-note{right:20px;bottom:12px;font-size:10px;color:#fff9}
.brand-strip{padding:30px 6%;border:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;letter-spacing:0;background:var(--bg)}
.brand-item{display:flex;align-items:center;justify-content:center;gap:12px;font-size:15px;font-weight:500}
.brand-item .icon{width:28px;height:28px;color:var(--green)}
.catalog-section{padding:80px 6%}
.section-heading{display:block;margin-bottom:38px}
.section-heading>p{font-size:18px;max-width:900px;margin:0;color:var(--muted)}
.empty-catalog{background:var(--surface);border:0;border-radius:8px;padding:35px;gap:24px}
.empty-catalog>span{display:flex;color:var(--white)}
.empty-catalog>span .icon{width:42px;height:42px}
.empty-catalog h3{font-size:23px}
.empty-catalog p{font-size:16px}
.text-link{display:inline-flex;align-items:center;gap:9px;border-bottom-color:#526357;font-size:15px}
.moto-section{background:var(--bg);padding-top:35px}
.brands{font-size:18px;letter-spacing:.5px;color:var(--white);padding:12px 0 35px;justify-content:flex-start;gap:35px}
.brands span{color:var(--muted)}
.card-image{background:var(--surface);border-radius:8px;color:var(--muted)}
.card-arrow{color:var(--white);background:#19221dee;width:36px;height:36px}
.status{background:var(--bg);color:var(--green);border-radius:4px;font-size:12px}
.card-info p{letter-spacing:0;font-size:14px}
.about{background:var(--surface);padding:75px 6%;gap:65px}
.about-logo{border-radius:8px;height:380px}
.about p:not(.eyebrow){font-size:18px;max-width:620px}
.contact{background:var(--bg);padding:80px 6%}
.contact h2{max-width:none}
.locations{margin-top:55px;gap:24px}
.locations article{background:var(--surface);border:0;border-radius:8px;padding:30px}
.locations article>span{display:inline-flex;color:var(--white)}
.locations article>span .icon{width:34px;height:34px}
.locations h3{font-size:22px}
.locations p{font-size:16px}
footer{background:var(--bg);border-top:1px solid var(--line)}
footer>a:last-child{display:inline-flex;gap:8px;align-items:center}
.floating-wa{display:flex;align-items:center;justify-content:center;background:var(--green);color:#09190f;width:58px;height:58px;border-radius:50%;padding:0;box-shadow:0 3px 16px #0003}
.floating-wa .icon{width:32px;height:32px}
body:not(.admin-body) dialog{background:var(--bg);color:var(--white)}
body:not(.admin-body) .close{color:var(--white)}
body:not(.admin-body) .main-photo{background:var(--surface)}
.menu-toggle{align-items:center;gap:8px}
@media(min-width:1600px){.hero{padding-top:120px}.hero-copy{max-width:1100px}}
@media(max-width:1000px){.header-contact{display:none}.empty-catalog{flex-wrap:wrap}.empty-catalog a{margin-left:0}.hero{background-position:center 62%}.about{gap:35px}.brand-item{font-size:14px}}
@media(max-width:680px){.header{height:74px;padding:0 5%}.menu-toggle{display:inline-flex;border:0;background:#ffffff20}.header nav{top:74px;background:var(--bg);color:var(--white)}.header nav a:hover{color:var(--white)}.hero{height:90svh;min-height:650px;padding:115px 5% 65px;background-image:linear-gradient(180deg,#0009,#0002 50%,#0005),url('/assets/hero.png');background-position:60% center}.hero h1{font-size:40px;letter-spacing:-1px}.hero-copy>p:not(.eyebrow){font-size:17px}.actions{align-items:center;flex-direction:column;gap:10px}.hero .button{width:100%;max-width:300px}.hero-bottom{font-size:12px}.image-note{bottom:8px;right:12px;font-size:9px}.brand-strip{grid-template-columns:1fr;gap:18px;padding:28px 5%}.brand-item{justify-content:flex-start;font-size:16px}.catalog-section{padding:55px 5%}.section-heading>p{font-size:16px}.empty-catalog{padding:25px;gap:20px}.empty-catalog>span{display:flex}.empty-catalog p{font-size:16px}.brands{gap:22px;font-size:15px}.about{padding:55px 5%;gap:30px}.about-logo{height:280px}.about p:not(.eyebrow){font-size:16px}.contact{padding:55px 5%}.locations{margin-top:35px}.locations article{padding:25px}footer{padding:30px 5% 90px}.header .wordmark{font-size:18px}}



/* Social links: accessible touch targets and brand-consistent hover. */
footer{flex-wrap:wrap;gap:24px}
.footer-socials{display:flex;align-items:center;gap:10px}
.footer-socials a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--white);border:1px solid var(--line);transition:background .2s,color .2s,border-color .2s}
.footer-socials a:hover{color:var(--green);background:var(--surface);border-color:var(--green)}
.footer-socials .icon{width:21px;height:21px}
@media(max-width:680px){.footer-socials{width:100%;justify-content:flex-start}}

/* WhatsApp support widget, matching the supplied reference. */
.floating-wa{width:auto;height:auto;display:flex;align-items:center;gap:12px;background:transparent;color:#fff;padding:0;border-radius:0;box-shadow:none;right:24px;bottom:24px}
.wa-circle{display:flex;align-items:center;justify-content:center;width:70px;height:70px;border-radius:50%;background:#348d40;box-shadow:0 4px 18px #0003;transition:background .2s}
.floating-wa .icon{width:44px;height:44px;color:#fff}
.wa-help{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;background:#242424;border-radius:6px;padding:12px 16px;min-height:64px;box-shadow:0 3px 14px #0002;font-size:14px;line-height:1.5;color:#e8e8e8}
.wa-help strong{font-size:14px;font-weight:700;color:#fff}
.floating-wa:hover .wa-circle{background:#277933}
@media(max-width:680px){.floating-wa{right:16px;bottom:16px;gap:10px}.wa-circle{width:60px;height:60px}.floating-wa .icon{width:38px;height:38px}.wa-help{min-height:56px;padding:9px 12px;font-size:13px}.wa-help strong{font-size:13px}}
@media(max-width:360px){.wa-help{display:none}}

/* Keep the WhatsApp mark balanced inside its circular button. */
.floating-wa .icon{width:38px;height:38px}
@media(max-width:680px){.floating-wa .icon{width:33px;height:33px}}

/* Keep footer links clear of the fixed WhatsApp help widget. */
footer{justify-content:flex-start;column-gap:40px;row-gap:20px;padding-right:340px}
footer>.wordmark{order:1}
footer>.footer-socials{order:2;width:auto;justify-content:flex-start}
footer>a[href^="tel:"]{order:3;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
footer>span{order:4}
@media(max-width:1000px){footer{padding-right:6%;padding-bottom:125px;column-gap:28px}}
@media(max-width:680px){footer{padding-right:5%;padding-bottom:120px;column-gap:24px}.footer-socials{flex-basis:100%}}

/* Detail gallery: horizontal swipe, buttons and keyboard navigation. */
.detail-gallery{min-width:0}
.gallery-stage{position:relative;touch-action:pan-y pinch-zoom;user-select:none;border-radius:8px;overflow:hidden}
.gallery-stage .main-photo{display:block;cursor:grab}
.gallery-stage .main-photo:active{cursor:grabbing}
.gallery-nav{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff40;border-radius:50%;background:#090c0bd9;color:#fff;padding:10px}
.gallery-nav:hover{background:#25382b}
.gallery-nav svg{width:24px;height:24px}
.gallery-prev{left:12px}.gallery-next{right:12px}
.gallery-counter{font-size:14px;color:var(--muted);margin:12px 0}
@media(max-width:680px){.gallery-prev{left:8px}.gallery-next{right:8px}}

/* Hero photo: preserve the whole composition on mobile instead of cropping it. */
.hero{isolation:isolate;background:#090c0b}
.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0008 0%,#0002 42%,#0001 75%,#0004);z-index:-1;pointer-events:none}
.hero-copy{min-width:0}
@media(min-width:681px) and (max-width:900px){
  .header{height:74px;padding-inline:5%}
  .menu-toggle{display:inline-flex;border:0;background:#ffffff20}
  .header nav{display:none;position:absolute;top:74px;left:0;right:0;background:var(--bg);padding:24px;flex-direction:column;gap:22px;font-size:16px}
  .header nav.open{display:flex}
}
@media(max-width:680px){
  .hero{height:auto;min-height:0;max-height:none;padding:105px 5% 0;display:grid;grid-template-columns:minmax(0,1fr);text-align:center}
  .hero::before{background:linear-gradient(180deg,#0004,transparent 60%)}
  .hero h1{font-size:clamp(30px,8vw,40px)}
  .hero .button{min-width:0}
  .hero-copy>p:not(.eyebrow){font-size:clamp(15px,4vw,17px)}
  .hero-image{position:relative;inset:auto;z-index:0;grid-row:2;display:block;width:calc(100% + 11.112%);max-width:none;height:auto;margin:16px -5.556% 0;object-fit:contain;object-position:center}
  .hero-bottom{position:static;grid-row:3;margin:18px 0 14px}
  .image-note{position:static;grid-row:4;margin:0 0 18px;text-align:center}
  .about-logo{height:auto;aspect-ratio:1/1}
  .locations,.about{grid-template-columns:minmax(0,1fr)}
  .empty-catalog .text-link{white-space:normal}
  .floating-wa{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}
}