
/*
Theme Name: EYPORT Trade
Theme URI: https://eyport.com/
Author: EYPORT
Description: Premium bilingual wholesale eyewear homepage for EYPORT.
Version: 3.0
Text Domain: eyport-trade
*/
:root{--navy:#071d32;--teal:#16b6ad;--ink:#14283a;--muted:#6c7b88;--cream:#f5f5f0;--line:#dfe7e8;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Arial,Helvetica,sans-serif;background:#fff}a{color:inherit;text-decoration:none}.wrap{width:min(1180px,92%);margin:auto}
.announce{background:var(--navy);color:#dce9ed;text-align:center;padding:9px 12px;font-size:12px;letter-spacing:.12em}
.site-head{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:99}.nav{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:84px}.brand img{width:185px;height:auto;display:block}.navlinks{display:flex;gap:25px;align-items:center;font-size:13px;font-weight:700}.navlinks a:hover{color:#079c98}.navright{display:flex;gap:10px;align-items:center}.lang{border:1px solid var(--line);border-radius:30px;padding:8px 12px;font-size:12px;background:#fff;cursor:pointer}.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--teal);color:#052331;border-radius:3px;padding:13px 19px;font-weight:800;font-size:12px;letter-spacing:.05em;border:0}.btn.dark{background:var(--navy);color:#fff}.btn.outline{background:transparent;border:1px solid #b7c8cc;color:var(--navy)}
.hero{background:var(--navy);color:#fff;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;min-height:520px;align-items:center;gap:35px;padding-top:50px;padding-bottom:50px}.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);font-weight:800}.hero h1{font-size:clamp(42px,5.2vw,68px);line-height:1.02;letter-spacing:-.045em;margin:18px 0}.hero p{color:#c2d1d8;line-height:1.8;max-width:500px;font-size:16px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:27px}.hero-photo{height:410px;position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:12px;align-items:center}.glass{border-radius:46% 46% 5px 5px;background:linear-gradient(145deg,#c8d9d5,#537b7a 45%,#152f40);height:330px;display:flex;align-items:center;justify-content:center;overflow:hidden}.glass img{width:100%;height:100%;object-fit:cover}.glass.second{height:260px;background:linear-gradient(145deg,#e8d4b8,#9c8066 48%,#293d4b);margin-top:95px}.frame-art{font-size:90px;filter:drop-shadow(0 18px 15px #06121b88)}.hero-note{position:absolute;bottom:0;left:5%;background:#fff;color:var(--navy);padding:14px 18px;font-size:11px;letter-spacing:.12em;font-weight:800}
.trust{border-bottom:1px solid var(--line);background:#fbfcfa}.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:24px 0;text-align:center}.trust strong{display:block;font-size:12px;letter-spacing:.1em}.trust span{font-size:11px;color:var(--muted)}
section{padding:88px 0}.section-top{text-align:center;max-width:700px;margin:0 auto 42px}.section-top h2{font-size:clamp(32px,4vw,48px);letter-spacing:-.04em;margin:12px 0}.section-top p{color:var(--muted);line-height:1.7}.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.pillar{background:var(--cream);padding:32px;min-height:220px;border-top:3px solid var(--teal)}.num{font-size:11px;color:#0caaa4;letter-spacing:.15em;font-weight:800}.pillar h3{font-size:25px;margin:22px 0 10px}.pillar p{color:var(--muted);font-size:14px;line-height:1.7}
.range{background:#f6f7f4}.range-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.range-card{background:#fff;min-height:180px;padding:25px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid #e7ece8;transition:.2s}.range-card:hover{transform:translateY(-4px);border-color:var(--teal)}.range-icon{font-size:34px}.range-card h3{font-size:17px;margin:22px 0 4px}.range-card small{color:var(--muted);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.reels{background:#fff}.reel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.reel{aspect-ratio:4/5;background:linear-gradient(150deg,#dce9e4,#9db6b2 48%,#21394b);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.reel:nth-child(2){background:linear-gradient(150deg,#eadcc8,#9c8570 55%,#273c4a)}.reel:nth-child(3){background:linear-gradient(150deg,#d9dce4,#718a9b 55%,#152d42)}.reel:nth-child(4){background:linear-gradient(150deg,#e8d8dc,#aa7886 55%,#283849)}.reel .play{width:54px;height:54px;border-radius:50%;background:#ffffffdf;display:grid;place-items:center;font-size:19px;color:var(--navy)}.reel-label{position:absolute;bottom:0;left:0;right:0;background:#071d32df;color:#fff;padding:14px;font-size:11px;letter-spacing:.12em}
.community{background:var(--navy);color:#fff;text-align:center}.community h2{font-size:clamp(34px,4vw,52px);margin:15px 0}.community p{color:#c6d4da;max-width:650px;margin:0 auto 25px;line-height:1.8}.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.step{border:1px solid var(--line);padding:25px}.step b{font-size:32px;color:var(--teal)}.step h3{font-size:17px}.step p{color:var(--muted);font-size:13px;line-height:1.7}
.about{background:#f6f7f4}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.about-panel{background:var(--navy);color:#fff;padding:45px;min-height:300px;display:flex;flex-direction:column;justify-content:center}.about-panel h2{font-size:38px;line-height:1.1}.about-copy p{color:var(--muted);line-height:1.85}.faq{max-width:850px;margin:auto}.faq details{border-bottom:1px solid var(--line);padding:20px 4px}.faq summary{font-weight:800;cursor:pointer}.faq p{color:var(--muted);line-height:1.7}
.cta{background:#e8f3ef}.cta-grid{display:flex;justify-content:space-between;align-items:center;gap:25px}.cta h2{font-size:clamp(32px,4vw,46px);margin:10px 0}.cta p{color:var(--muted)}
footer{background:#06192b;color:#fff;padding:60px 0 25px}.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}.foot-logo{width:190px;background:#fff;padding:8px}.foot-grid p,.foot-grid a{color:#c4d2d8;font-size:13px;line-height:2}.foot-grid h4{letter-spacing:.12em;font-size:12px}.copyright{border-top:1px solid #ffffff24;margin-top:40px;padding-top:20px;color:#8fa2ad;font-size:11px;display:flex;justify-content:space-between;gap:15px}
body.lang-hi .en{display:none!important}body.lang-en .hi{display:none!important}
@media(max-width:900px){.navlinks{display:none}.hero-grid{grid-template-columns:1fr;padding-top:55px}.hero-photo{height:330px}.glass{height:260px}.glass.second{height:210px}.range-grid,.reel-grid{grid-template-columns:repeat(2,1fr)}.how-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.announce{font-size:9px}.nav{min-height:70px}.brand img{width:145px}.navright .btn{display:none}.hero-grid{min-height:0}.hero h1{font-size:43px}.hero-photo{height:260px}.glass{height:215px}.glass.second{height:170px;margin-top:55px}.frame-art{font-size:60px}.trust-grid{grid-template-columns:1fr;gap:15px}.trust-grid>div{border-bottom:1px solid var(--line);padding-bottom:12px}.trust-grid>div:last-child{border:0}.pillars,.about-grid,.foot-grid{grid-template-columns:1fr}.range-grid,.reel-grid{grid-template-columns:repeat(2,1fr)}section{padding:60px 0}.pillar{min-height:0}.how-grid{grid-template-columns:1fr 1fr}.cta-grid{display:block}.copyright{display:block;line-height:2}}

/* Premium corporate eyewear collection */
.featured-frames{background:#fff}
.frame-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.frame-product{background:#f4f5f2;overflow:hidden;border:1px solid #e7ebe7;transition:.25s}
.frame-product:hover{transform:translateY(-5px);box-shadow:0 18px 34px #102a3518}
.frame-visual{height:225px;display:grid;place-items:center;background:linear-gradient(145deg,#e7ece8,#cbd9d3)}
.frame-product:nth-child(2) .frame-visual{background:linear-gradient(145deg,#eee7dd,#d4c2aa)}
.frame-product:nth-child(3) .frame-visual{background:linear-gradient(145deg,#e4e8ef,#bdcbd7)}
.frame-product:nth-child(4) .frame-visual{background:linear-gradient(145deg,#eee4e4,#d8bfc3)}
.spec-frame{width:160px;height:66px;position:relative;filter:drop-shadow(0 12px 8px #172b3533)}
.spec-frame:before,.spec-frame:after{content:"";position:absolute;top:4px;width:69px;height:48px;border:7px solid #182b37;border-radius:18px 18px 25px 25px;background:#8ca9aa66}
.spec-frame:before{left:0;transform:skew(-5deg)}.spec-frame:after{right:0;transform:skew(5deg)}
.spec-frame .bridge{position:absolute;left:69px;top:18px;width:22px;height:7px;background:#182b37;border-radius:5px;z-index:2}
.spec-frame .arm{position:absolute;top:8px;left:-22px;width:28px;height:5px;background:#182b37;transform:rotate(8deg);border-radius:4px}
.spec-frame.round:before,.spec-frame.round:after{border-radius:50%;width:60px;height:60px;top:0}
.spec-frame.round:before{left:4px}.spec-frame.round:after{right:4px}
.spec-frame.round .bridge{left:69px;top:25px}
.spec-frame.cat:before,.spec-frame.cat:after{border-radius:4px 22px 22px 22px}
.spec-frame.kids{transform:scale(.78)}
.frame-info{padding:20px}.frame-info small{font-size:10px;letter-spacing:.16em;color:#0b9c96;font-weight:800}
.frame-info h3{font-size:19px;margin:8px 0}.frame-info p{font-size:12px;color:#71808a;line-height:1.6;min-height:38px}
.frame-info .btn{width:100%;padding:12px}
.hero{background:radial-gradient(circle at 78% 25%,#21465a 0,#0b263c 35%,#061827 78%)}
@media(max-width:900px){.frame-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.frame-grid{gap:9px}.frame-visual{height:155px}.spec-frame{transform:scale(.78)}.spec-frame.kids{transform:scale(.62)}.frame-info{padding:12px}.frame-info h3{font-size:15px}.frame-info p{font-size:11px;min-height:55px}.frame-info .btn{font-size:10px;padding:10px 6px}}
