:root{--navy:#101d3b;--blue:#182e63;--blue2:#244587;--gold:#c4a56a;--text:#14213b;--muted:#68778d;--line:#e5eaf1}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f7fb;color:var(--text);font-family:'DM Sans',Arial,Tahoma,sans-serif;line-height:1.55}
a{text-decoration:none;color:inherit}.wrap{max-width:1320px;margin:auto;padding:0 28px}
.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 3px 24px #14213b0a}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:92px;gap:22px}
.logo{display:flex;flex-direction:column;color:var(--blue);font-weight:900;font-size:32px;line-height:1;letter-spacing:2px}
.logo small{font-size:9px;letter-spacing:2px;margin-top:8px;color:#a38a56}
.logo:before{content:"";display:block;width:94px;height:35px;background:url('ysn-lettering.webp') center/contain no-repeat;margin-bottom:2px}
.menu{display:flex;align-items:center;gap:25px;flex-wrap:wrap}.menu a{font-size:13px;font-weight:700;color:#34415a}.menu a:hover{color:#b18e4e}
.lang{padding:9px 14px;border:1px solid #cbd3df;background:white;border-radius:8px;color:var(--navy);font-weight:700;cursor:pointer}
.hero{position:relative;background:linear-gradient(120deg,#0b1734 0%,#172e62 65%,#234d8c 100%);color:#fff;padding:94px 0 103px;overflow:hidden}
.hero:after{content:"YSN";position:absolute;right:-20px;bottom:-150px;font-size:380px;line-height:1;font-weight:900;color:#ffffff08;pointer-events:none}
.hero .wrap{position:relative;z-index:1}.hero h1{font-size:clamp(38px,5.2vw,76px);letter-spacing:-2px;max-width:850px;line-height:1.09;margin:10px 0 24px}
.hero h1 span{color:#e6c78e!important}.hero p{max-width:670px;font-size:18px;line-height:1.85;color:#d7e2f3}
.hero:before{content:"COMMERCIAL VEHICLE PARTS  /  SHARJAH · UAE";display:block;position:absolute;left:max(calc((100vw - 1264px)/2),28px);top:43px;font-size:11px;letter-spacing:3px;color:#e2c48e;font-weight:800}
.section{padding:65px 0}.section h2{font-size:clamp(25px,3vw,38px);margin:0 0 12px;letter-spacing:-.8px}
.muted{color:var(--muted)}.bar{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 8px;background:white;padding:13px;border:1px solid #e7ecf3;border-radius:16px;box-shadow:0 16px 35px #0b204016}
.bar input,.bar select{min-width:190px;flex:1;padding:16px 18px;border:1px solid #e2e8f0;border-radius:10px;background:#f9fbfe;font:inherit;color:#14213b}
.bar input:focus,.bar select:focus{outline:2px solid #bd9e62}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:22px}
.card{background:white;border:1px solid #e6ebf1;border-radius:16px;overflow:hidden;box-shadow:0 7px 26px #1b355409;transition:transform .2s,box-shadow .2s;display:block}
.card:hover{transform:translateY(-5px);box-shadow:0 18px 35px #1b35541a}
.card img{display:block;width:100%;height:208px;object-fit:contain;background:#fff;padding:20px}
.card .pad{padding:19px 19px 21px;border-top:1px solid #edf0f4}.card h3{font-size:16px;line-height:1.35;margin:0 0 12px;font-weight:800}
.code{color:#5e6e83;font-size:12px;line-height:1.85}.code b{color:#203864}
.pill,.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--gold);border:0;color:#101d3b;font-weight:800;padding:13px 20px;border-radius:9px;cursor:pointer}
.btn.dark{background:#1a356c;color:#fff}
.footer{background:#0b1732;color:#c6d1e3;padding:52px 0;border-top:4px solid #bd9e62;line-height:2.1}
.footer strong{color:#fff;letter-spacing:.7px}.footer a:hover{color:#e2c48e}
#about{background:#fff;border-radius:20px;padding:42px;margin:30px 0 70px;border:1px solid var(--line)}
img{max-width:100%}
@media(max-width:760px){.wrap{padding:0 16px}.nav .wrap{padding-top:12px;padding-bottom:12px;min-height:72px;align-items:flex-start}.menu{gap:10px}.menu a{font-size:12px}.logo{font-size:23px}.logo:before{width:70px;height:25px}.hero{padding:92px 0 64px}.hero:before{left:16px;top:28px;font-size:9px}.hero h1{font-size:39px;letter-spacing:-1px}.hero p{font-size:15px}.section{padding:38px 0}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card img{height:142px;padding:10px}.card .pad{padding:12px}.card h3{font-size:13px}.code{font-size:10px}.bar{padding:10px}.bar input,.bar select{min-width:100%;padding:13px}#about{padding:20px;margin:12px 0 36px}}


/* YSN official carton branding */
.nav{background:#fff;box-shadow:0 6px 22px rgba(14,29,59,.07)}
.nav .wrap{min-height:96px}
.logo{display:flex!important;align-items:center!important;flex-direction:row!important;gap:10px!important;font-size:0!important;letter-spacing:0!important}
.logo:before{display:none!important;content:none!important}
.logo small{display:none!important}
.logo img.ysn-brand{width:174px;height:94px;object-fit:contain;background:#293f78;border-radius:8px;padding:6px}
.logo img.ysn-seal{width:69px;height:70px;object-fit:contain;background:#293f78;border-radius:8px;padding:5px}
.footer .brand-footer{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.footer .brand-footer img.ysn-brand{width:170px;height:92px;object-fit:contain;background:#293f78;border-radius:8px;padding:6px}
.footer .brand-footer img.ysn-seal{width:70px;height:70px;object-fit:contain;background:#293f78;border-radius:8px;padding:5px}
.hero{background:linear-gradient(112deg,#101d3c,#293f78 73%,#162955)}
.hero h1 span{color:#e1bf76!important}
@media(max-width:760px){.nav .wrap{gap:10px}.logo img.ysn-brand{width:100px;height:58px}.logo img.ysn-seal{width:42px;height:50px}.menu{gap:9px}.menu a{font-size:11px}}

/* Consistent catalogue design and mobile header */
body{font-family:Arial,Tahoma,sans-serif;background:#f6f8fb;color:#192940}.site-header{position:sticky;top:0;z-index:70;background:#fff;border-bottom:1px solid #e6ebf1;box-shadow:0 3px 16px #11223d0a}.site-head-wrap{max-width:1250px;margin:auto;padding:8px 24px;min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:18px}.site-brand{display:flex;align-items:center;gap:11px;flex-shrink:0;font-weight:900;color:#142d50;font-size:16px;letter-spacing:.09em}.site-brand img{width:84px;height:57px;object-fit:contain;background:#253f73;border-radius:7px}.site-brand small{display:block;color:#a58e59;font-size:9px;letter-spacing:.16em}.site-links{display:flex;align-items:center;gap:17px}.site-links a{font-size:12px;font-weight:800;color:#263852}.site-links a:hover{color:#ba9251}.site-lang{font-weight:800;color:#142d50;background:#fff;border:1px solid #d5dee9;padding:10px;border-radius:7px;cursor:pointer}.menu-open{display:none;border:1px solid #e0e6ed;border-radius:8px;background:#fff;font-size:22px;padding:5px 10px}.breadcrumbs{margin-top:26px;font-size:13px;color:#647790}.detail{background:#fff;padding:24px;border:1px solid #e5eaf2;border-radius:15px;box-shadow:0 15px 33px #12244009}.catalog-footer{background:#0a1a2d;color:#e3ebf5;padding:43px 0 16px;margin-top:65px}.catalog-foot-cols{display:grid;grid-template-columns:1.2fr 1fr 1.2fr .85fr;gap:23px}.catalog-foot-cols p{margin:9px 0;color:#b8c6d8;font-size:13px;line-height:1.7}.catalog-foot-cols b{color:#fff}.catalog-foot-cols .foot-logo{width:103px;max-height:76px;object-fit:contain}.catalog-footer .social-icons{display:flex;gap:10px;margin-top:15px}.catalog-footer .social-icon{display:flex;border:1px solid #ffffff40;border-radius:50%;width:39px;height:39px;align-items:center;justify-content:center;color:#fff}.catalog-footer .social-icon:hover{background:#cfad6c}.catalog-footer .social-icon svg{width:22px;height:22px}.foot-right{margin-top:34px;padding-top:15px;border-top:1px solid #ffffff25;font-size:12px;color:#8da1bb}html[dir=rtl] .site-links{direction:rtl}
@media(max-width:850px){.menu-open{display:block}.site-head-wrap{min-height:70px}.site-links{display:none;position:absolute;top:69px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid #dbe2eb;padding:10px 23px 20px;box-shadow:0 14px 25px #13264220}.site-links.is-open{display:flex}.site-links a{padding:12px 2px;border-bottom:1px solid #eef1f4}.site-lang{align-self:flex-start;margin-top:14px}.catalog-foot-cols{grid-template-columns:1fr 1fr;gap:16px}}
@media(max-width:500px){.site-head-wrap{padding:8px 15px}.site-brand img{width:69px;height:48px}.site-brand{font-size:13px}.site-brand small{font-size:8px}.detail{padding:12px}.catalog-foot-cols{grid-template-columns:1fr 1fr}.catalog-foot-cols p{font-size:11px}.catalog-footer .social-icons{gap:6px}.catalog-footer .social-icon{width:34px;height:34px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card img{height:142px}}

.email-cta{display:inline-flex;border-radius:9px;background:#d2b071;color:#0d213c;font-weight:800;padding:12px 19px;margin:17px 0}.email-cta:hover{background:#efc987}

/* Keep the original gold quality emblem in product and category headers too. */
.site-brand::after{content:"";display:block;width:56px;height:52px;flex:none;border-radius:9px;background:#294575 url('ysn-gold-quality-display.png') center / contain no-repeat;border:1px solid #ddc78645}
@media(max-width:500px){.site-brand::after{width:41px;height:42px}}