/* glasfens.com replica — global stylesheet
   Rebuilt 31 Aug 2026 from the live Wix site's computed styles.
   Fonts: montserrat + open sans (Google), lulo-clean-w01-one-bold (self-hosted),
   helvetica-w01-bold ~ Helvetica/Arial bold. */

@font-face{
  font-family:"lulo-clean-w01-one-bold";
  src:url("fonts/lulo-clean-w01-one-bold.woff2") format("woff2");
  font-weight:normal;font-style:normal;font-display:swap;
}

:root{
  --dark:#313131; --dark2:#4d4d4d;
  --light:#d0d0d0; --gray:#a2a2a2; --mid:#737373; --strip:#b9b9b9; --label:#c2c2c2;
  --red:#db0000; --red2:#e33636; --redlt:#f3a2a2;
  --mont:montserrat,sans-serif;
  --open:'open sans',sans-serif;
  --helv:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --lulo:'lulo-clean-w01-one-bold','Arial Black',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--mont);font-size:15px;color:var(--mid);background:#fff}
body.dark{background:var(--dark);color:var(--gray)}
img{max-width:100%;height:auto;border:0}
a{color:inherit;text-decoration:none}
.wrap{max-width:980px;margin:0 auto;padding:0 20px;position:relative}

/* ---------- header ---------- */
header.site{position:relative;z-index:50}
.logo-big{position:absolute;top:8px;left:0;width:300px;height:auto;z-index:5}
body.dark .logo-big{display:none}
nav.main{display:flex;justify-content:flex-end;gap:26px;padding:22px 0 10px;
  font-size:12px;letter-spacing:.02em;color:var(--dark2)}
body.dark nav.main{color:#b9b9b9}
nav.main a,nav.main span{color:inherit;cursor:pointer;text-transform:uppercase}
nav.main a:hover{color:var(--red)}
nav.main .active{color:var(--red)}
.dd{position:relative}
.dd>span::after{content:""}
.dd-menu{display:none;position:absolute;top:100%;right:0;background:#fff;border:1px solid #e3e3e3;
  min-width:230px;padding:8px 0;z-index:100;box-shadow:0 4px 14px rgba(0,0,0,.12)}
body.dark .dd-menu{background:#3a3a3a;border-color:#4d4d4d}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{display:block}
.dd-menu a{display:block;padding:6px 18px;font-size:12px;white-space:nowrap}
.dd-menu a:hover{color:var(--red)}

/* ---------- footer ---------- */
footer.site{padding:40px 0 30px;font-size:13px;color:var(--gray);position:relative}
footer.site .copy{padding-left:0}
footer.site img.logo-small{position:absolute;right:20px;bottom:20px;width:112px;height:auto}

/* ---------- home ---------- */
.home-strip{ text-align:center;font-size:12px;color:var(--strip);letter-spacing:-.01em;line-height:16.8px;padding:8px 0 }
.home-strip a{color:var(--strip)} .home-strip a:hover{color:#fff}
.home-hero{position:relative;margin-top:6px}
.hero-text{position:relative;z-index:3;font-family:var(--helv);font-weight:700;
  font-size:57px;line-height:.98;color:var(--light);letter-spacing:-.017em}
.hero-text .zero{color:#fff}
.slideshow{position:relative;width:600px;max-width:100%;margin:8px auto 0;height:600px;background:#313131}
.slideshow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s}
.slideshow img.on{opacity:1}
.ss-counter{position:absolute;left:10px;bottom:8px;font-family:Arial,sans-serif;font-size:12px;color:#bdbdbd;z-index:4}
.crp{display:flex;justify-content:center;gap:70px;margin:56px 0 8px}
.crp a{display:flex;align-items:flex-start;gap:16px}
.crp .big{font-family:var(--lulo);font-size:118px;line-height:1;color:var(--dark2)}
.crp .lab{margin-top:52px;font-family:var(--open);font-size:14px;color:var(--label);letter-spacing:.06em;white-space:nowrap}
.crp .lab::after{content:"\2192";display:block;font-size:22px;color:var(--dark2);margin-top:8px}
.crp a:hover .big{color:#5d5d5d}
.home-intro{max-width:560px;margin:70px auto 0;text-align:center}
.home-intro h1{font-family:var(--open);font-weight:700;font-size:33px;letter-spacing:-.05em;color:var(--light)}
.home-intro p{margin-top:26px;font-size:15px;line-height:1.7;color:var(--gray);text-align:center}
.home-contact{margin-top:64px;text-align:center;font-size:12px;color:var(--light)}
.home-contact a{color:var(--light)}
.home-logo{display:block;margin:36px auto 0;width:134px}

/* ---------- interior (light) pages ---------- */
.pagebody{min-height:520px;padding-top:10px}
.content-col{max-width:460px;margin-left:22px;padding-top:340px;padding-bottom:70px}
.content-col.wide{max-width:100%;margin-left:0}
h2.red,.red-head{font-size:24px;color:var(--red);font-weight:400;letter-spacing:.01em;margin-bottom:26px;font-family:var(--mont)}
.content-col p{font-size:15px;line-height:1.75;color:var(--gray);margin-bottom:22px}
.content-col p.mid{color:var(--mid)}
.content-col li{font-size:15px;line-height:1.75;color:var(--gray);margin:0 0 8px 18px}
.content-col a{color:var(--mid);text-decoration:underline}

/* ---------- category (store) pages ---------- */
.cat-layout{display:flex;gap:24px;padding-top:300px}
.cat-side{width:233px;flex:none;font-size:13px;color:var(--mid)}
.cat-side h2{font-size:15px;font-weight:400;color:var(--dark2);margin-bottom:14px}
.fgroup{border-top:1px solid #e5e5e5;padding:10px 0}
.fgroup>button{display:flex;justify-content:space-between;width:100%;background:none;border:0;
  font-family:var(--mont);font-size:13px;color:var(--dark2);cursor:pointer;text-transform:uppercase;letter-spacing:.02em;text-align:left}
.fgroup>button::after{content:"+";color:#999}
.fgroup.open>button::after{content:"\2212"}
.fgroup ul{display:none;margin-top:8px;list-style:none}
.fgroup.open ul{display:block}
.fgroup li{margin:5px 0}
.fgroup label{display:flex;gap:8px;align-items:flex-start;cursor:pointer;font-size:13px;color:var(--mid);line-height:1.35}
.fgroup input{margin-top:2px}
.cat-main{flex:1}
.cat-intro{margin-bottom:26px}
.cat-intro h1{font-size:24px;font-weight:400;color:var(--red);letter-spacing:.04em;margin-bottom:20px}
.cat-intro p{font-size:14px;line-height:1.7;color:var(--gray);margin-bottom:16px;max-width:640px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tile{display:block;text-align:center}
.tile .imgbox{background:#fff;border:1px solid #f0f0f0;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tile img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .3s}
.tile:hover img{transform:scale(1.04)}
.tile .name{margin:8px 0 16px;font-size:14px;color:var(--gray);line-height:1.3}
.grid-empty{padding:40px 0;color:var(--gray);font-size:14px;display:none}

/* ---------- product page ---------- */
.prod-layout{padding-top:300px;display:flex;flex-direction:column}
.prod-gallery{display:flex;gap:14px}
.prod-thumbs{display:flex;flex-direction:column;gap:8px;width:64px;flex:none}
.prod-thumbs img{width:64px;height:64px;object-fit:contain;border:1px solid #eee;cursor:pointer;background:#fff}
.prod-thumbs img.on{border-color:#999}
.prod-main{flex:1;display:flex;align-items:center;justify-content:center;min-height:420px}
.prod-main img{max-height:560px;object-fit:contain}
h1.prod-title{font-size:50px;font-weight:400;color:var(--gray);margin:44px 0 10px;letter-spacing:.01em}
.prod-links{margin:14px 0 30px;font-size:16px}
.prod-links a{display:block;color:var(--mid);text-decoration:underline;line-height:1.9}
.psec{border-top:1px solid #ececec;padding:16px 0}
.psec h3{font-size:18px;font-weight:400;color:var(--mid);cursor:pointer;display:flex;justify-content:space-between}
.psec h3::after{content:"+";color:#bbb}
.psec.open h3::after{content:"\2212"}
.psec .body{display:none;padding:12px 0 6px;font-size:13px;line-height:1.6;color:var(--mid);max-width:640px}
.psec.open .body{display:block}
.psec .body p{margin-bottom:12px}
.related{margin:60px 0 30px}
.related h2{font-size:20px;font-weight:400;color:var(--gray);margin-bottom:18px}
.rel-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.rel-strip .tile .name{font-size:12px}

/* ---------- spec pages ---------- */
.spec-layout{padding-top:40px;display:flex;gap:60px}
.spec-left{width:400px;flex:none}
.spec-right{flex:1;min-width:0}
h1.spec-title{font-size:50px;font-weight:400;color:#929292;margin:300px 0 60px;letter-spacing:.01em;white-space:nowrap}
.spec-left .lead{font-size:16px;color:var(--red2);margin-bottom:22px}
.spec-left p{font-size:14px;line-height:1.7;color:var(--gray);margin-bottom:20px}
.spec-left .redp{color:var(--red2);font-size:16px;line-height:1.5;margin:30px 0 26px}
.icon-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 40px;margin:20px 0 40px}
.icon-grid .it{text-align:left}
.icon-grid img{width:121px;height:auto}
.icon-grid .cap{font-size:13px;color:var(--gray);margin-top:8px}
.spec-h{font-size:18px;color:var(--red2);letter-spacing:.02em;margin:50px 0 20px;text-align:center}
.drawings{margin-bottom:30px}
.drawings img{width:100%;height:auto;border:1px solid #f2f2f2;margin-bottom:14px;background:#fff}
.mfrs{margin:40px 0}
.mfrs .mtitle{font-size:9px;color:var(--red2);letter-spacing:.08em;line-height:1.6;margin-bottom:16px;text-transform:uppercase}
.mfrs .logos{display:flex;flex-direction:column;gap:24px;width:96px}
.mfrs img{width:96px;height:auto;filter:none}
.quote{margin:50px 0}
.quote h2{font-size:18px;color:var(--red);margin-bottom:14px}
.quote .note{font-size:13px;color:var(--redlt);margin-bottom:26px;max-width:330px}
.spec-notes{font-size:10px;color:var(--redlt);line-height:1.9;margin:40px 0 20px}

/* ---------- forms ---------- */
form.gf{max-width:340px}
form.gf .row2{display:flex;gap:18px}
form.gf .fld{margin-bottom:18px;flex:1}
form.gf label{display:block;font-size:13px;color:var(--dark2);margin-bottom:6px}
form.gf input,form.gf textarea{width:100%;background:#f5f5f5;border:0;padding:10px 12px;
  font-family:var(--mont);font-size:13px;color:#555}
form.gf input::placeholder{color:var(--gray)}
form.gf button{margin-top:10px;width:100%;background:var(--dark2);color:#fff;border:0;
  padding:13px 0;font-family:var(--mont);font-size:15px;cursor:pointer}
form.gf button:hover{background:#5c5c5c}

/* ---------- contact page ---------- */
.contact-layout{display:flex;gap:80px;padding-top:400px;padding-bottom:60px}
.contact-left{width:320px;flex:none;text-align:right}
.contact-left h1{font-size:34px;font-weight:400;color:var(--red);margin-bottom:50px}
.contact-left p{font-size:17px;color:var(--mid);line-height:1.5}
.contact-left a{color:var(--mid)}
.contact-right{flex:1;max-width:340px}
.contact-right .mobile-note{margin-bottom:40px}
.contact-right .mobile-note .l1{font-size:14px;color:var(--red)}
.contact-right .mobile-note .l2{font-size:9px;color:#e77373;letter-spacing:.04em}
.contact-right .intro{font-size:13px;color:var(--red);margin-bottom:36px}

/* ---------- gallery page ---------- */
.gallery-full{padding:0}
.gallery-full img{display:block;width:100%;height:auto}

/* ---------- affiliations / logo pages ---------- */
.aff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 30px;align-items:center;margin:30px 0 60px}
.aff-grid img{max-width:130px;max-height:130px;margin:0 auto;display:block}
.aff-name{font-size:12px;color:var(--gray);text-align:center;margin-top:8px}

/* ---------- frames-dimensions ---------- */
.fw-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:28px 0 60px}
.fw-grid img{width:100%;height:auto;border:1px solid #f3f3f3;background:#fff}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .cat-layout,.spec-layout,.contact-layout{flex-direction:column;padding-top:120px}
  .contact-left{text-align:left;width:auto}
  .spec-left{width:auto}
  .grid{grid-template-columns:repeat(2,1fr)}
  .rel-strip{grid-template-columns:repeat(3,1fr)}
  .cat-side{width:auto}
  .content-col{padding-top:130px;margin-left:0}
  .logo-big{width:120px}
  h1.prod-title{font-size:34px}
  h1.spec-title{font-size:34px}
  .hero-text{font-size:34px}
  .crp{gap:24px}
  .crp .big{font-size:64px}
  .crp .lab{margin-top:24px;font-size:12px}
  .slideshow{height:auto;aspect-ratio:1/1}
  nav.main{flex-wrap:wrap;gap:14px;justify-content:flex-start;padding-top:12px}
  .aff-grid{grid-template-columns:repeat(2,1fr)}
  .fw-grid{grid-template-columns:1fr}
  .prod-layout{padding-top:120px}
}

/* spec data tables (transcribed from the GlasFens Website Google Sheets) */
.spec-tbl{width:100%;border-collapse:collapse;font-size:12px;color:#9d9d9d;line-height:1.45;margin:0 0 10px}
.spec-tbl td{padding:8px 14px}
.spec-tbl tbody tr:nth-child(odd){background:#f3f3f3}
.spec-tbl tbody tr:nth-child(even){background:#e3e3e3}
.spec-tbl td.m{width:20%;text-align:left;vertical-align:top}
.spec-tbl.rt td.t{text-align:right}
.spec-tbl.ct td.t{text-align:center}
.spec-tbl.eu td{text-align:center;width:33.33%}