@font-face{font-family:Inter;src:url("fonts/inter-variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:Inter;src:url("fonts/inter-variable.woff2") format("woff2");font-weight:100 900;font-style:oblique -10deg 0deg;font-display:swap} /* Authentic Unified Astro Brown Pro (Fully Vietnamese Localized) */ /* Geometry measured from the Astro homepage at 1920px. */ :root{--gl-font:Inter,Arial,Helvetica,sans-serif;--gl-paper:#fff;--gl-soft:#f0efeb;--gl-ink:#111;--gl-muted:#666;--gl-line:#e6e6e6;--ar-gutter:max(40px,calc((100% - 1440px)/2))} body.gl-astro-home{margin:0;background:#fff;color:#111;font-family:var(--gl-font);font-size:16px;font-weight:400;line-height:1.625} .gl-astro-home *, .gl-astro-home *:before,.gl-astro-home *:after{box-sizing:border-box} .gl-astro-home h1,.gl-astro-home h2,.gl-astro-home h3,.gl-astro-home h4{font-family:inherit;font-weight:400;letter-spacing:0;color:inherit;text-transform:none} .gl-astro-home h2{font-size:38px;line-height:1.158;font-weight:400;margin:0 0 20px}.gl-astro-home h3{font-size:22px;line-height:1.27;font-weight:400}.gl-astro-home p{margin:0 0 20px;font-weight:400;line-height:1.625;color:#505050}.gl-astro-home button{font:inherit;letter-spacing:0;text-transform:none;box-shadow:none;margin:0;min-height:0;cursor:pointer}.gl-astro-home a{color:inherit;text-decoration:none}.gl-astro-home img{display:block;max-width:100%}.gl-astro-home a:focus-visible,.gl-astro-home button:focus-visible{outline:2px solid #888;outline-offset:6px} .gl-header{position:relative;background:#fff;color:#111;border:0;backdrop-filter:none;z-index:50}.gl-reference-home .gl-header{position:absolute;inset:0 0 auto;background:transparent;color:#fff}.ar-utility{height:45px;border-bottom:1px solid #ddd;font-size:12px}.gl-reference-home .ar-utility{border-bottom:none;border-color:transparent}.ar-utility>div{max-width:1440px;margin:auto;height:100%;display:flex;align-items:center;justify-content:space-between}.gl-header__bar{max-width:1440px;margin:auto;padding:0;height:70px;display:flex;align-items:center;justify-content:space-between;gap:32px}.gl-logo{flex-shrink:0}.gl-logo img{width:145px;max-height:49px;object-fit:contain}.gl-reference-home .gl-logo img{filter:brightness(0) invert(1)}.gl-nav{display:flex;justify-content:flex-end;gap:38px;font-size:16px;letter-spacing:0;text-transform:none;align-items:center}.gl-nav>a,.ar-nav-products>a{padding:23px 0;display:block}.ar-nav-products{position:relative}.ar-dropdown{display:none;position:absolute;top:100%;left:-30px;width:300px;padding:24px 30px;background:#fff;color:#111;box-shadow:0 6px 20px #0001}.ar-dropdown a{display:block;padding:8px 0}.ar-search-toggle{border:0;background:transparent;color:inherit;display:flex;align-items:center;gap:12px;padding:0;line-height:normal}.ar-menu-toggle{display:none}.ar-search-panel{padding:30px var(--ar-gutter);background:white;color:#111;align-items:center;gap:16px;box-shadow:0 8px 14px #0001}.ar-search-panel:not([hidden]){display:flex}.ar-search-panel input{margin:0;flex:1;max-width:650px;box-shadow:none}.ar-search-panel button{background:#111;color:#fff;border:0;padding:9px 20px}.ar-hero{height:600px;position:relative;color:white;background:#777}.ar-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s}.ar-slide.is-active{opacity:1;visibility:visible}.ar-slide>img{width:100%;height:100%;object-fit:cover}.ar-slide:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0003,transparent 70%),linear-gradient(#0003,transparent 28%)}.ar-hero-copy{position:absolute;left:80px;top:50%;transform:translateY(-10%);z-index:1;max-width:700px}.ar-hero-copy h1{font-size:52px;line-height:1.12;margin:0 0 16px}.ar-link{display:inline-flex;align-items:center;gap:18px;border-bottom:1px solid #ccc;padding:0 0 7px;font-size:18px;line-height:1.4}.ar-link span{font-size:23px;line-height:1}.ar-hero .ar-link{border-color:#ffffff50}.ar-dots{position:absolute;right:80px;bottom:45px;display:flex;gap:10px;z-index:2}.ar-dots button{width:22px;height:22px;padding:0;border:1px solid white;border-radius:50%;background:transparent;position:relative}.ar-dots button[aria-pressed=true]:after{content:'';position:absolute;inset:5px;border-radius:50%;background:white}.ar-container{max-width:1440px;margin-left:auto;margin-right:auto}.ar-categories{padding:40px 0 80px var(--ar-gutter);display:grid;grid-template-columns:355px minmax(0,1fr);gap:20px;overflow:hidden}.ar-category-copy{align-self:center;padding-right:20px}.ar-category-copy p{max-width:325px}.ar-category-rail{min-width:0}.ar-arrows{height:60px;display:flex;justify-content:flex-end;padding-right:var(--ar-gutter);gap:10px}.ar-arrows button{height:36px;width:36px;border:1px solid #aaa;border-radius:50%;background:transparent;font-size:26px;line-height:1;padding:0;color:#666}.ar-category-track{display:flex;gap:16px;overflow:auto;scrollbar-width:none;scroll-snap-type:x mandatory}.ar-category-track>a{flex:0 0 348px;scroll-snap-align:start}.ar-category-track img{width:100%;height:414px;object-fit:cover}.ar-category-track span{display:inline-block;margin-top:16px;padding-bottom:6px;border-bottom:1px solid #ccc;font-size:18px}.ar-feature{display:grid;grid-template-columns:36.7% 63.3%;background:#f0efeb;align-items:stretch}.ar-feature-copy{padding:60px 40px 60px var(--ar-gutter);display:flex;flex-direction:column;justify-content:center}.ar-feature-copy h2{white-space:normal}.ar-feature-copy .ar-link{align-self:flex-start}.ar-kicker{font-size:16px;letter-spacing:3px;margin-bottom:8px!important}.ar-feature>img{width:100%;aspect-ratio:5/3;object-fit:cover}.ar-section-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:35px}.ar-section-heading h2{margin:0}.ar-products{padding-top:60px;padding-bottom:70px}.ar-product-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/4);gap:16px;overflow:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}.ar-product-track article{scroll-snap-align:start}.ar-product-image{position:relative;background:#f6f6f6;aspect-ratio:1}.ar-product-image img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.ar-product-image>.gl-product-badge{position:absolute;top:14px;left:15px;font-size:12px;letter-spacing:1px}.ar-product-track h3{font-size:18px;margin:16px 0 22px}.ar-image-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:270px 270px;gap:20px;padding-top:80px;border-top:1px solid #eee}.ar-image-grid a{position:relative;overflow:hidden}.ar-image-grid a:nth-child(2){grid-row:span 2}.ar-image-grid img{width:100%;height:100%;object-fit:cover}.ar-image-grid a:after{content:'';position:absolute;inset:0;background:linear-gradient(#0004,transparent 50%)}.ar-image-grid h3{position:absolute;left:40px;top:30px;color:white;z-index:1;margin:0}.ar-about{text-align:center;padding:100px 24px}.ar-about p{max-width:700px;margin:0 auto 25px}.ar-projects{padding-bottom:80px}.ar-project-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.ar-project-grid img{width:100%;aspect-ratio:5/3;object-fit:cover;margin-bottom:25px}.ar-project-grid p{font-size:13px;letter-spacing:1px;margin-bottom:8px}.ar-project-grid h3{margin:0}.gl-footer{background:#000;color:#fff;padding:45px var(--ar-gutter) 30px;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:35px;font-size:14px}.gl-footer h3{font-size:16px;text-transform:none;letter-spacing:0;color:white}.gl-footer p,.gl-footer a,.gl-footer span{color:#bbb;font-size:14px}.gl-footer img{background:none;padding:0;filter:brightness(0) invert(1);width:130px}.gl-footer__bottom{font-size:12px;padding-top:20px}.gl-catalog-hero h1,.gl-single-summary h1,.gl-page-hero h1{font-size:42px;line-height:1.15;letter-spacing:0}.gl-catalog-hero{padding:60px var(--ar-gutter)}.gl-catalog-layout{background:#fff;gap:32px;padding:0 var(--ar-gutter);grid-template-columns:250px 1fr}.gl-catalog-content{padding:25px 0}.gl-filter-panel{background:#fff;padding:25px 20px 25px 0}.gl-product-grid{background:white;border:0;gap:24px}.gl-product-card{background:#fff}.gl-product-card__image{background:#f5f5f5;padding:20px}.gl-product-card__body{padding:18px 0;min-height:0}.gl-product-card__body h3{font-size:18px;letter-spacing:0}.gl-product-card__body p{margin:10px 0}.gl-single-gallery{background:#f6f6f6}.gl-single-summary{background:white}.gl-button,.gl-pill{border-radius:0;letter-spacing:0;text-transform:none}.gl-page-main{background:#fff}.gl-page-hero{padding-top:25px}.gl-store-gallery--hidden{display:none} @media(min-width:1700px){.ar-feature-copy{padding-right:35px}.ar-feature-copy h2{font-size:36px}} @media(max-width:1550px){.gl-header__bar,.ar-utility>div,.ar-container{margin-left:40px;margin-right:40px}.gl-nav{gap:26px}.ar-categories{grid-template-columns:280px minmax(0,1fr)}.ar-category-track>a{flex-basis:290px}.ar-category-track img{height:345px}.ar-feature-copy{padding-left:40px}.ar-feature-copy h2{font-size:32px}} @media(max-width:1000px){.gl-nav{gap:18px;font-size:14px}.gl-logo img{width:115px}.ar-categories{grid-template-columns:240px minmax(0,1fr)}.ar-category-copy h2{font-size:30px}.ar-feature{grid-template-columns:40% 60%}.ar-feature-copy{padding:35px}.ar-feature-copy h2{font-size:28px}.ar-image-grid{grid-template-rows:200px 200px}.ar-image-grid h3{left:20px;font-size:20px}.gl-catalog-layout{grid-template-columns:200px 1fr}.gl-archive-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:760px){:root{--ar-gutter:20px}.gl-astro-home h2{font-size:28px}.ar-utility{height:32px}.ar-utility>div{margin:0 20px}.gl-header__bar{height:65px;margin:0 20px;padding:0;flex-direction:row}.gl-logo img{width:120px}.ar-menu-toggle{display:flex;gap:12px;align-items:center;border:0;color:inherit;background:none;padding:0}.gl-nav{display:none;position:absolute;left:0;right:0;top:97px;background:white;color:#111;padding:16px 25px;max-height:calc(100dvh - 97px);overflow:auto}.gl-nav.is-open{display:block}.gl-nav>a,.ar-nav-products>a{padding:12px 0}.ar-dropdown{position:static;box-shadow:none;width:auto;padding:0 0 10px 20px}.ar-search-toggle{padding:14px 0}.ar-search-panel:not([hidden]){flex-wrap:wrap;padding:20px}.ar-search-panel label{width:100%}.ar-search-panel input{min-width:160px}.ar-hero{height:560px}.ar-hero-copy{left:25px;right:25px;top:53%;max-width:330px}.ar-hero-copy h1{font-size:38px}.ar-dots{right:25px;bottom:25px}.ar-dots button{width:18px;height:18px}.ar-dots button[aria-pressed=true]:after{inset:4px}.ar-categories{display:block;padding:50px 0 50px 20px}.ar-category-copy{padding-right:20px;margin-bottom:20px}.ar-category-copy p{max-width:100%}.ar-category-track>a{flex-basis:72vw}.ar-category-track img{height:85vw}.ar-arrows{height:48px;padding-right:20px}.ar-feature{display:flex;flex-direction:column-reverse}.ar-feature>img{aspect-ratio:1.25}.ar-feature-copy{padding:40px 20px}.ar-container{margin-left:20px;margin-right:20px}.ar-products{padding-top:45px;padding-bottom:45px}.ar-section-heading{align-items:flex-start}.ar-section-heading .ar-link{font-size:15px;white-space:nowrap}.ar-product-track{grid-auto-columns:72%;gap:16px}.ar-image-grid{grid-template-columns:1fr 1fr;grid-template-rows:180px 180px 180px;padding-top:40px;gap:12px}.ar-image-grid a:nth-child(2){grid-row:span 2}.ar-image-grid a:last-child{grid-column:1/-1}.ar-image-grid h3{left:15px;top:18px;font-size:18px}.ar-about{padding:60px 0}.ar-project-grid{grid-template-columns:1fr;gap:30px}.ar-projects{padding-bottom:50px}.gl-footer{grid-template-columns:1fr 1fr;padding:40px 20px 25px;gap:25px}.gl-footer__brand{grid-column:1/-1}.gl-catalog-layout{display:block;padding:0 20px}.gl-catalog-hero{padding:40px 20px}.gl-filter-panel{position:static;height:auto}.gl-archive-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.gl-product-card__image{padding:0}.gl-product-card__body h3{font-size:15px}.gl-single-summary h1,.gl-page-hero h1,.gl-catalog-hero h1{font-size:32px}.gl-single-summary{padding:35px 20px}.gl-single-gallery{padding:25px 20px}} @media(prefers-reduced-motion:reduce){.ar-slide{transition:none}} .gl-reference-home .gl-logo img,.gl-footer img{filter:none}.gl-logo img{width:auto;height:38px}.gl-logo{display:flex;align-items:center;gap:0}.ar-arrows{padding-right:max(40px,calc((100vw - 1440px)/2))}@media(max-width:760px){.ar-arrows{padding-right:20px}} /* Explicitly reset Flatsome button minimums. Keep the controls geometrically circular. */ .gl-astro-home .ar-dots button{display:grid;place-items:center;box-sizing:border-box;flex:0 0 22px;width:22px;height:22px;min-width:22px;min-height:22px;max-width:22px;max-height:22px;padding:0!important;line-height:1;border-radius:50%;vertical-align:middle} .gl-astro-home .ar-arrows button{display:grid;place-items:center;box-sizing:border-box;flex:0 0 36px;width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px;line-height:1;padding:0!important;border-radius:50%;border:1px solid #777;color:#555;background:transparent;opacity:1;transition:color .2s,border-color .2s,background .2s} .gl-astro-home .ar-arrows button:disabled{border-color:#d4d4d4;color:#c6c6c6;cursor:default;pointer-events:none;opacity:1}.gl-astro-home .ar-arrows button:not(:disabled):hover{background:#111;color:white;border-color:#111}.ar-arrows svg{display:block;width:18px;height:18px;pointer-events:none}.ar-link svg{width:18px;height:18px;flex-shrink:0}.ar-dots button:hover{background:#ffffff25} .category-preview__title{position:relative}.category-preview__title:after{content:'';position:absolute;height:1px;left:0;right:0;bottom:-1px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .35s ease}.ar-category-track>a:hover .category-preview__title:after,.ar-category-track>a:focus-visible .category-preview__title:after{transform:scaleX(1)} [data-drag-scroll]{cursor:grab;touch-action:pan-x pan-y;overscroll-behavior-x:contain;scrollbar-width:none}[data-drag-scroll]::-webkit-scrollbar{display:none}[data-drag-scroll].is-dragging{cursor:grabbing;scroll-snap-type:none!important;scroll-behavior:auto!important;user-select:none}[data-drag-scroll].is-dragging *{cursor:grabbing;user-select:none}[data-drag-scroll] img{-webkit-user-drag:none;user-select:none} .gl-top-search{display:flex;align-items:center;margin:0;width:290px;height:100%}.gl-top-search input[type=search]{background:transparent;color:inherit;border:0;box-shadow:none;font:inherit;padding:0;width:100%;height:100%;margin:0}.gl-top-search input::placeholder{color:inherit;opacity:.9}.gl-top-search button{color:inherit;background:none;border:0;display:grid;place-items:center;padding:0;width:30px;min-width:30px;height:30px;line-height:1}.gl-logo:after{content:none}.gl-logo img{height:57px;width:142px;max-height:57px;object-fit:contain}.gl-reference-home .gl-logo img{filter:none}.gl-header__bar{height:80px}.gl-nav{gap:40px}.gl-footer{grid-template-columns:1.6fr 1fr 1fr}.gl-footer img{background:transparent;width:140px;max-height:90px;object-fit:contain}.gl-footer h3{font-size:16px}.gl-footer__brand p{margin-bottom:12px} .gl-source-montage{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#eee;padding:28px}.gl-source-montage a{min-width:0;background:#f4f4f4;aspect-ratio:1.25}.gl-source-montage img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.ar-products>.ar-arrows{padding:0}.ar-product-sku{font-size:13px;color:#777}.gl-spaces .ar-image-grid{padding-top:0;border:0}.gl-spaces{margin-bottom:90px}.gl-company-banner{position:relative;color:#fff;min-height:500px;display:flex;align-items:center;isolation:isolate}.gl-company-banner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.gl-company-banner:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#000c, #0002);z-index:-1}.gl-company-banner>div{max-width:750px;padding:80px 40px 80px var(--ar-gutter);box-sizing:content-box}.gl-company-banner p{max-width:580px}.gl-reasons{padding:90px 0}.gl-reasons>h2{margin-bottom:40px}.gl-reasons-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}.gl-reasons-grid article{display:flex;flex-direction:column;align-items:flex-start}.gl-reasons-grid img{width:auto;height:64px;max-width:96px;object-fit:contain;object-position:left center;margin-bottom:20px}.gl-reasons-grid h3{margin:0 0 12px;font-size:20px;line-height:1.3}.gl-project-track{display:flex;gap:20px;overflow:auto;scroll-snap-type:x mandatory}.gl-project-track figure{flex:0 0 calc((100% - 20px)/2);margin:0;scroll-snap-align:start}.gl-project-track img{width:100%;aspect-ratio:5/3;object-fit:cover}.ar-section-heading .ar-arrows{height:auto;padding:0}.gl-support{position:fixed;right:20px;bottom:20px;z-index:80;display:grid;gap:10px}.gl-support a{display:flex;flex-direction:column;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;border:1px solid #bbb;background:white;color:#111;box-shadow:0 2px 10px #0001;font-size:13px}.gl-support span{font-size:10px;line-height:1.2}.gl-support a:hover{background:#111;color:white}.gl-attribute-filters{margin:30px 0}.gl-attribute-filters label{display:block;font-weight:400;margin:16px 0 7px}.gl-attribute-filters select{box-shadow:none;border:1px solid #ddd;background-color:#fff;margin-bottom:5px}.gl-attribute-filters button{width:100%;border:1px solid #111;background:#111;color:white;line-height:1.4;padding:12px;margin-top:18px}.gl-clear-filter{font-size:13px;border:0!important}.gl-breadcrumb{display:flex;flex-wrap:wrap;gap:10px;padding:25px var(--ar-gutter);font-size:13px;color:#777}.gl-gallery-open{display:block;width:100%;padding:0!important;background:none!important;border:0!important;line-height:1;position:relative;color:#111}.gl-gallery-open>span{display:block;font-size:12px;text-align:right;padding:10px}.gl-single-thumbs{display:flex;overflow:auto;gap:12px;margin-top:10px;scroll-snap-type:x mandatory}.gl-single-thumbs button{flex:0 0 90px;width:90px;min-width:90px;height:90px;border:1px solid transparent;padding:4px;background:white;scroll-snap-align:start}.gl-single-thumbs button[aria-pressed=true]{border-color:#111}.gl-single-thumbs img{width:100%;height:100%;padding:0;object-fit:contain}.gl-single-gallery>.ar-arrows{padding:0;height:40px;margin-top:20px}.gl-single-main-img{height:min(570px,60vh)}.gl-single-summary{padding:50px;justify-content:flex-start}.gl-product-code{font-size:13px;color:#777}.gl-assurances{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;border-top:1px solid #ddd;border-bottom:1px solid #ddd;padding:24px 0;margin-top:20px}.gl-assurances>div{display:flex;align-items:center;gap:10px;font-size:13px}.gl-assurances svg{width:27px;height:27px;min-width:27px;fill:none;stroke:currentColor;stroke-width:1.2}.gl-product-options label{font-weight:400;font-size:14px;display:block}.gl-product-options select{box-shadow:none;border-color:#ddd}.gl-variant-status{font-size:13px;color:#666}.gl-single-actions a{margin:0;padding:14px 18px;display:inline-flex;gap:10px;align-items:center}.gl-single-detail{padding:0 var(--ar-gutter) 70px}.gl-detail-nav{display:flex;gap:40px;border-bottom:1px solid #ddd;padding:25px 0;margin-bottom:50px}.gl-detail-nav a{padding:8px 0}.gl-spec-section{max-width:980px;padding-bottom:50px;scroll-margin-top:30px}.gl-single-content{scroll-margin-top:30px}.gl-related{margin-top:70px}.gl-spec-section table{border-collapse:collapse;width:100%}.gl-spec-section th,.gl-spec-section td{padding:15px;border-bottom:1px solid #ddd;text-align:left;text-transform:none;font-weight:400}.gl-lightbox{width:min(90vw,1100px);max-height:90vh;border:0;padding:40px;background:#fff}.gl-lightbox::backdrop{background:#000b}.gl-lightbox>img{max-height:78vh;object-fit:contain;width:100%}.gl-lightbox>button{position:absolute;right:10px;top:5px;background:none;border:0;font-size:30px;padding:0;width:35px;height:35px;min-width:35px;line-height:1}.gl-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}.gl-contact-grid iframe{border:0;width:100%;height:100%;min-height:450px}.gl-social-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:25px}.gl-page-content:has(.gl-contact-grid){max-width:1440px}.gl-landing-products{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}.gl-space-hero{width:100%;max-height:520px;object-fit:cover;margin-bottom:45px}.gl-form-wrap{max-width:750px}.gl-form-wrap input,.gl-form-wrap textarea,.gl-form-wrap select{box-shadow:none;border:1px solid #ccc}.gl-form-wrap label{font-weight:400}.gl-form-wrap input[type=submit]{background:#111;color:#fff;letter-spacing:0;text-transform:none}.gl-news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.gl-news-grid img{width:100%;aspect-ratio:5/3;object-fit:cover}.gl-news-grid h2{font-size:23px;margin-top:20px}.gl-news-grid time{font-size:13px;color:#666} @media(max-width:1100px){.gl-nav{gap:22px;font-size:14px}.gl-reasons-grid{grid-template-columns:repeat(3,1fr);gap:30px 20px}.gl-single-layout{grid-template-columns:1fr 1fr}.gl-single-summary{padding:30px}.gl-assurances{grid-template-columns:1fr}.gl-contact-grid{gap:30px}.gl-landing-products{grid-template-columns:repeat(3,1fr)}} @media(max-width:760px){.gl-astro-home .ar-dots button{flex-basis:18px;width:18px;height:18px;min-width:18px;min-height:18px;max-width:18px;max-height:18px}.gl-logo img{height:45px;width:105px}.gl-header__bar{height:65px}.gl-top-search{width:175px}.ar-utility{height:38px;font-size:10px}.gl-nav{top:103px}.gl-nav .ar-dropdown{display:block;padding-left:15px;font-size:13px}.gl-nav .ar-nav-products>a{font-weight:400}.gl-nav{max-height:calc(100dvh - 103px)}.gl-footer{grid-template-columns:1fr 1fr}.gl-source-montage{padding:15px}.gl-spaces{margin-bottom:45px}.gl-company-banner{min-height:430px}.gl-company-banner>div{padding:50px 20px}.gl-reasons{padding:50px 0}.gl-reasons-grid{grid-template-columns:1fr 1fr;gap:24px 16px}.gl-reasons-grid img{height:52px;margin-bottom:14px}.gl-reasons-grid h3{font-size:17px;margin-bottom:8px}.gl-reasons-grid p{font-size:13px;line-height:1.5}.gl-project-track figure{flex-basis:85%}.gl-support{right:10px;bottom:12px;gap:8px}.gl-support a{width:45px;height:45px;font-size:12px}.gl-single-layout{grid-template-columns:1fr}.gl-single-summary{padding:30px 20px}.gl-assurances{grid-template-columns:repeat(3,1fr);gap:8px}.gl-assurances>div{flex-direction:column;text-align:center;font-size:11px}.gl-detail-nav{gap:20px;font-size:13px;overflow:auto;white-space:nowrap;margin-bottom:30px}.gl-single-detail{padding:0 20px 45px}.gl-single-actions{display:grid;grid-template-columns:1fr;width:100%}.gl-single-actions a{justify-content:center}.gl-contact-grid{grid-template-columns:1fr}.gl-landing-products{grid-template-columns:repeat(2,minmax(0,1fr))}.gl-news-grid{grid-template-columns:1fr}.gl-page-content{padding:0 20px}.gl-breadcrumb{padding:20px;font-size:12px}} @media(prefers-reduced-motion:reduce){.category-preview__title:after,.ar-link:after{transition:none}} .gl-editorial-content{padding-bottom:80px}.gl-space-index{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 25px}.gl-space-index img{width:100%;aspect-ratio:5/3;object-fit:cover}.gl-space-index h2{font-size:28px;margin-top:22px}.gl-solutions-index,.gl-form-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px}.gl-solutions-index article{background:#f1f0ec;padding:45px}.gl-news-tabs{display:flex;gap:30px;margin-bottom:40px;border-bottom:1px solid #ddd}.gl-news-tabs a{padding:10px 0;border-bottom:1px solid transparent}.gl-news-tabs a[aria-current=page]{border-color:#111}.gl-page-hero h1{max-width:1050px}.gl-page-hero time{display:block;font-size:14px;color:#777;margin-top:20px}.gl-page-hero .ar-link{margin-bottom:20px}.gl-pagination{display:flex;gap:12px;flex-wrap:wrap}.gl-editorial-content .wpcf7 form{margin:0}.gl-editorial-content .wpcf7 label{display:block;margin-bottom:20px}.gl-editorial-content .wpcf7 input,.gl-editorial-content .wpcf7 textarea,.gl-editorial-content .wpcf7 select{margin-top:8px}.gl-form-wrap .wpcf7-not-valid-tip{font-size:13px} @media(max-width:760px){.gl-space-index,.gl-solutions-index,.gl-form-layout{grid-template-columns:1fr;gap:35px}.gl-editorial-content{padding-bottom:45px}.gl-news-tabs{gap:20px;font-size:14px}.gl-solutions-index article{padding:25px}.gl-space-index h2{font-size:24px}} .gl-header .gl-logo img{width:auto;height:38px;max-height:38px}.gl-footer img{width:auto;max-height:44px}.gl-source-montage{align-content:center}#gl-source-track{grid-auto-columns:calc((100% - 32px)/3)} @media(max-width:760px){.gl-header .gl-logo img{width:auto;height:30px;max-height:30px}#gl-source-track{grid-auto-columns:78%}} .gl-astro-home .gl-single-actions .gl-button-dark{color:#fff;background:#111}.gl-astro-home .gl-single-actions .gl-button-dark:hover{background:#333}.gl-astro-home .gl-single-actions .gl-button-light{color:#111;background:#fff}.gl-astro-home .gl-single-actions .gl-button-light:hover{border-color:#111}.gl-astro-home .gl-single-summary h1{font-size:36px;line-height:1.2}.gl-single-short ul{padding-left:18px}.gl-single-short li{margin-bottom:6px}.gl-product-options:empty{display:none} @media(max-width:760px){.gl-astro-home .gl-single-summary h1{font-size:29px}} .gl-single-layout>*{min-width:0}.gl-single-thumbs{width:100%;max-width:100%;min-width:0}.gl-single-gallery,.gl-single-summary{max-width:100%}.gl-single-main-img{max-width:100%}.gl-product-options select{max-width:100%} /* Preserve the original Goodlight banner copy within the reference layout. */ .gl-reference-home .ar-hero-copy{top:155px;transform:none;max-width:620px}.ar-hero-copy h2{font-size:26px;margin-bottom:16px}.ar-hero-copy p{font-size:17px;line-height:1.7}.gl-hero-actions{display:flex;flex-wrap:wrap;gap:20px}.gl-hero-actions .ar-link{font-size:16px}.gl-project-track figcaption{padding-top:18px}.gl-project-track figcaption h3{font-size:22px}.gl-project-track figcaption p,.gl-reasons-grid p{font-size:15px;line-height:1.6}.gl-reasons-grid img{object-fit:contain}.ar-slide:not(:has(.ar-hero-copy)):after{background:linear-gradient(#0003,transparent 28%)} @media(max-width:760px){.gl-reference-home .ar-hero-copy{top:145px;left:20px;right:20px}.ar-hero-copy h1{font-size:30px}.ar-hero-copy h2{font-size:21px}.ar-hero-copy p{font-size:14px}.gl-hero-actions{gap:14px}.gl-hero-actions .ar-link{font-size:14px}} /* Isolate redesigned UI from the old Flatsome orange hover palette. */ body.gl-astro-home{--fs-experimental-link-color:currentColor;--fs-experimental-link-color-hover:currentColor;--primary-color:#111;--fs-color-primary:#111;--gl-accent:#111} .gl-astro-home a:hover,.gl-astro-home a:focus-visible{color:inherit} .gl-astro-home .ar-link:hover,.gl-astro-home .ar-link:focus-visible{border-bottom-color:transparent} .gl-astro-home .gl-header{position:sticky;top:0;z-index:100;background:#fff;color:#111} .gl-reference-home .gl-header{position:fixed;inset:0 0 auto;background:transparent;color:#fff;border-bottom:none;box-shadow:none;transition:background-color .2s,color .2s} .gl-reference-home .gl-header.is-scrolled,.gl-reference-home .gl-header.header--active,.gl-reference-home .gl-header.gl-search-open{background:#fff;color:#111;border-bottom:1px solid #eaeaea;box-shadow:none} .gl-reference-home .gl-header.is-scrolled .ar-utility{border-color:transparent} .gl-astro-home .gl-nav a,.gl-astro-home .gl-nav .ar-nav-products>a{font-weight:400} .gl-astro-home .gl-nav .ar-dropdown a:hover,.gl-astro-home .gl-footer a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px} .gl-astro-home .ar-feature-copy h2{font-size:38px} .gl-astro-home :is(input,select,textarea):focus-visible{outline:2px solid #666;outline-offset:3px} .gl-astro-home .ar-arrows button:disabled{cursor:default} .gl-astro-home [id]{scroll-margin-top:135px} .gl-astro-home.admin-bar .gl-header{top:32px} @media(max-width:782px){.gl-astro-home.admin-bar .gl-header{top:46px}} @media(max-width:760px){.gl-astro-home .ar-feature-copy h2{font-size:30px}.gl-reference-home .gl-header:has(.gl-nav.is-open){color:#111}} @media(prefers-reduced-motion:reduce){.gl-astro-home *, .gl-astro-home *:before,.gl-astro-home *:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}} .ar-slide:has(.ar-hero-copy):after{background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.22) 50%,transparent 75%),linear-gradient(rgba(0,0,0,.25),transparent 30%)} @media(max-width:760px){.ar-slide:has(.ar-hero-copy):after{background:linear-gradient(90deg,rgba(0,0,0,.58),rgba(0,0,0,.25))}.gl-reference-home .ar-hero-copy h2{max-width:340px}} body.gl-astro-home{font-family:var(--gl-font)} .gl-astro-home input,.gl-astro-home select,.gl-astro-home textarea{font-family:inherit} .gl-astro-home .gl-top-search input,.gl-astro-home .gl-top-search input:focus,.gl-astro-home .gl-top-search input:hover{box-shadow:none!important;background:transparent;border:0;outline:none} .gl-top-search:focus-within{outline:1px solid currentColor;outline-offset:3px} .gl-header__bar{position:relative}.gl-nav-group{position:static;display:flex;align-items:center;gap:5px}.gl-submenu-toggle{display:inline-flex;align-items:center;justify-content:center;width:28px;min-width:28px;height:32px;padding:0;border:0;background:transparent;color:inherit}.gl-submenu-toggle svg{width:15px;transform:rotate(90deg);transition:transform .2s}.gl-submenu-toggle[aria-expanded=true] svg{transform:rotate(-90deg)} .gl-nav-group>.ar-dropdown{left:0;right:0;top:100%;width:auto;max-height:calc(100dvh - 130px);overflow:auto;border-top:1px solid #ddd;padding:30px 40px;box-shadow:0 10px 20px #0001} .gl-nav-group>.ar-dropdown.gl-mega-menu{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px} .gl-nav-group.is-expanded>.ar-dropdown.gl-mega-menu{display:grid} .gl-nav-group.is-expanded>.ar-dropdown{display:block}.gl-nav-column>a{font-size:16px}.gl-nav-children a{font-size:14px;color:#666;padding:6px 0}.gl-nav-column>.gl-submenu-toggle{display:none} .gl-astro-home .gl-catalog-layout{display:grid;grid-template-columns:294px minmax(0,1fr);gap:71px;max-width:1440px;margin:0 auto;padding:50px 0 80px;align-items:start} .gl-catalog-content{min-width:0}.gl-astro-home .gl-archive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 20px}.gl-archive-grid .gl-product-card{min-width:0;background:transparent;border:0}.gl-archive-grid .gl-product-card__image{display:block;height:auto;aspect-ratio:1;overflow:hidden;background:#f5f5f5}.gl-archive-grid .gl-product-card__image img{width:100%;height:100%;object-fit:contain;padding:0;transition:transform .3s}.gl-archive-grid .gl-product-card__image:hover img{transform:scale(1.025)}.gl-archive-grid .gl-product-card__body{padding:15px 0 0}.gl-astro-home .gl-archive-grid h3{font-size:18px;line-height:26px;margin:0 0 10px;letter-spacing:0}.gl-archive-grid .gl-product-card__body p{font-size:14px;margin:0;color:#666}.gl-catalog-toolbar{margin-bottom:25px;min-height:35px;font-size:13px}.gl-catalog-toolbar p{margin:0}.gl-catalog-toolbar select{margin:0;box-shadow:none;border:0;font-size:13px}.gl-filter-toggle{display:none}.gl-astro-home .gl-filter-panel{background:transparent;padding:0;border:0}.gl-astro-home .gl-filter-panel h2{font-size:18px;line-height:36px;margin:0 0 20px}.gl-filter-panel>a{font-size:14px;padding:12px 0;border-bottom:1px solid #ddd} @media(max-width:1519px){.gl-astro-home .gl-catalog-layout{margin:0 40px;grid-template-columns:240px minmax(0,1fr);gap:40px}} @media(max-width:1100px){.gl-nav{gap:16px;font-size:14px}.gl-header__bar{gap:15px}.gl-astro-home .gl-catalog-layout{grid-template-columns:200px minmax(0,1fr);gap:25px}.gl-nav-group>.ar-dropdown.gl-mega-menu{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:1000px){ .gl-header .ar-menu-toggle{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:inherit;padding:0;min-width:44px;height:44px}.gl-header .gl-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;color:#111;padding:15px 20px;max-height:calc(100dvh - 115px);overflow:auto;box-shadow:0 10px 15px #0001}.gl-header .gl-nav.is-open{display:block}.gl-nav>a{padding:16px 0;border-bottom:1px solid #eee}.gl-nav-group{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 44px;border-bottom:1px solid #eee;gap:0}.gl-nav-group>a{padding:16px 0}.gl-nav-group>.gl-submenu-toggle{height:54px;width:44px}.gl-header .gl-nav-group>.ar-dropdown,.gl-header .gl-nav-group:hover>.ar-dropdown,.gl-header .gl-nav-group:focus-within>.ar-dropdown{display:none;position:static;grid-column:1/-1;width:auto;max-height:none;padding:0 0 15px 15px;box-shadow:none;border:0;overflow:visible}.gl-header .gl-nav-group.is-expanded>.ar-dropdown{display:block}.gl-nav-column{display:grid;grid-template-columns:minmax(0,1fr) 44px}.gl-nav-column>.gl-submenu-toggle{display:flex;height:40px;width:44px}.gl-nav-children{display:none;grid-column:1/-1;padding:0 0 12px 15px}.gl-nav-column.is-expanded>.gl-nav-children{display:block}.gl-nav-column>a{font-size:16px;padding:10px 0}.gl-nav-children a{font-size:14px} } @media(max-width:760px){ .gl-astro-home .gl-catalog-layout{display:flex;flex-direction:column;margin:0 15px;padding:20px 0 45px;gap:15px}.gl-catalog-content{width:100%}.gl-filter-toggle{display:flex;width:100%;justify-content:space-between;align-items:center;border:1px solid #111;background:#fff;color:#111;padding:8px 12px;min-height:38px;font-size:16px}.gl-astro-home .gl-filter-panel{display:none;width:100%;padding:15px 0}.gl-astro-home .gl-filter-panel.is-open{display:block}.gl-astro-home .gl-archive-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 15px}.gl-archive-grid .gl-product-card__body{padding-top:5px}.gl-astro-home .gl-archive-grid h3{font-size:16px;line-height:23px;margin-bottom:8px}.gl-archive-grid .gl-product-card__body p{font-size:12px}.gl-catalog-toolbar{font-size:11px;gap:10px;margin-bottom:15px}.gl-catalog-toolbar select{max-width:150px;font-size:11px} } .gl-astro-home .gl-catalog-toolbar .woocommerce-ordering{margin:0;float:none}.gl-astro-home .gl-catalog-toolbar select.orderby{height:36px;min-height:36px;padding:0 28px 0 0;margin:0;border-radius:0;line-height:36px;box-shadow:none;background-color:transparent}.gl-astro-home .gl-catalog-toolbar .woocommerce-result-count{display:block!important;margin:0;font-weight:400}.gl-astro-home .gl-catalog-toolbar{min-height:36px;margin-bottom:20px}.gl-astro-home .gl-archive-grid .price,.gl-astro-home .gl-archive-grid .amount{font-weight:400;letter-spacing:0} @media(max-width:760px){.gl-astro-home .gl-catalog-content{display:contents}.gl-catalog-toolbar{order:0;width:100%}.gl-filter-toggle{order:1}.gl-filter-panel{order:2}.gl-archive-grid{order:3;width:100%}.gl-catalog-layout>.gl-catalog-content>.gl-pagination{order:4}.gl-astro-home .gl-catalog-toolbar{margin-bottom:0}.gl-astro-home .gl-catalog-toolbar select.orderby{width:150px;font-size:11px}.gl-astro-home .gl-catalog-toolbar .woocommerce-result-count{font-size:11px}} /* Shared editorial geometry measured from Astro Sectors. */ .gl-astro-home .gl-page-hero{display:block;max-width:1440px;margin:0 auto;padding:45px 0;text-align:center;border:0}.gl-astro-home .gl-page-hero h1{font-size:40px;line-height:1.55;max-width:none;margin:0 0 10px}.gl-astro-home .gl-footer h3{font-size:16px;line-height:1.25;font-weight:400;letter-spacing:0}.gl-astro-home .gl-space-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;grid-auto-flow:row dense}.gl-space-index>a{position:relative;min-width:0;aspect-ratio:5/3;background:#ececec;overflow:hidden}.gl-space-index>a:nth-child(2){grid-row:span 2;aspect-ratio:auto}.gl-space-index img{height:100%;width:100%;object-fit:cover;transition:transform .4s}.gl-space-index>a:hover img{transform:scale(1.025)}.gl-space-index>a:after{content:'';position:absolute;inset:0;background:linear-gradient(#0005,transparent 60%);pointer-events:none}.gl-astro-home .gl-space-index h2{position:absolute;left:40px;right:30px;top:40px;margin:0;color:white;font-size:26px;line-height:1.46;z-index:1} @media(max-width:1519px){.gl-editorial-content.ar-container{margin-left:40px;margin-right:40px}} @media(max-width:760px){.gl-astro-home .gl-page-hero{padding:30px 15px}.gl-astro-home .gl-page-hero h1{font-size:32px;line-height:1.25}.gl-editorial-content.ar-container{margin-left:15px;margin-right:15px}.gl-astro-home .gl-space-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.gl-space-index>a{aspect-ratio:1.2}.gl-astro-home .gl-space-index h2{font-size:16px;line-height:1.5;left:15px;right:15px;top:15px}.gl-astro-home .gl-footer h3{font-size:16px}} /* Consistent component spacing and interaction surfaces. */ :root{--gl-space-section:80px;--gl-control-size:40px;--gl-header-offset:131px} .gl-astro-home .gl-top-search:focus-within{outline:none;border:0;box-shadow:none} .gl-astro-home .gl-top-search input:focus-visible{outline:none} .gl-astro-home .gl-top-search button:focus-visible{outline:1px solid currentColor;outline-offset:3px} .gl-astro-home .gl-page-content{padding-bottom:var(--gl-space-section)} .gl-astro-home .gl-page-content:has(.section),.gl-astro-home .gl-page-content:has(.gl-contact-grid){max-width:1440px;width:100%;padding-left:40px;padding-right:40px} .gl-page-content>.section .section-content>.row{max-width:100%;margin-left:auto;margin-right:auto} .gl-page-content .col-inner{min-width:0} .gl-page-content .col-inner .button{max-width:100%;white-space:normal;height:auto;line-height:1.5;padding:10px 20px;letter-spacing:0;border-radius:0} .gl-page-content .gl-social-links{margin-bottom:24px} .gl-astro-home .gl-source-montage{padding:0;gap:1px;align-content:stretch} .gl-astro-home .gl-source-montage a{aspect-ratio:1;overflow:hidden} .gl-astro-home .gl-source-montage img{object-fit:cover;width:100%;height:100%;mix-blend-mode:normal} @media(min-width:1001px){.gl-header .gl-nav{align-self:stretch;align-items:stretch}.gl-header .gl-nav-group{align-self:stretch;align-items:center}.gl-header .gl-nav-group>.ar-dropdown{margin-top:0}} body.gl-astro-home #ftwp-container-outer{max-width:100%;width:100%;margin:32px 0} body.gl-astro-home #ftwp-container #ftwp-contents{font-family:inherit;border:1px solid #ddd;border-radius:0;box-shadow:none;background:#fff;color:#111;max-width:100%} body.gl-astro-home #ftwp-container #ftwp-header,body.gl-astro-home #ftwp-container #ftwp-list{background:#fff;color:#111;font-family:inherit} body.gl-astro-home #ftwp-container #ftwp-header{padding:16px 20px;border-bottom:1px solid #ddd} body.gl-astro-home #ftwp-container #ftwp-header-title{font-size:18px;font-weight:400} body.gl-astro-home #ftwp-container #ftwp-list{padding:12px 10px;font-size:14px;line-height:1.6} body.gl-astro-home #ftwp-container #ftwp-list .ftwp-anchor{padding:8px 10px;color:#555} body.gl-astro-home #ftwp-container #ftwp-list .ftwp-anchor:hover,body.gl-astro-home #ftwp-container #ftwp-list .ftwp-active{color:#111;background:#f1f1f1} body.gl-astro-home #ftwp-container #ftwp-list .ftwp-anchor:before{display:none} body.gl-astro-home #ftwp-container.ftwp-fixed-to-post{z-index:80} body.gl-astro-home #ftwp-container.ftwp-fixed-to-post #ftwp-trigger,body.gl-astro-home #ftwp-container.ftwp-fixed-to-post #ftwp-contents{top:var(--gl-header-offset)!important;right:20px!important;left:auto!important;bottom:auto!important;transform:none!important} body.gl-astro-home #ftwp-container.ftwp-fixed-to-post #ftwp-contents{width:320px!important;max-width:calc(100vw - 40px);max-height:calc(100dvh - var(--gl-header-offset) - 24px);overflow:auto} body.gl-astro-home #ftwp-container #ftwp-trigger{width:40px;height:40px;border:1px solid #ddd;border-radius:0;background:#fff;color:#111;box-shadow:none} @media(max-width:760px){:root{--gl-space-section:48px;--gl-header-offset:119px}.gl-astro-home .gl-page-content:has(.section),.gl-astro-home .gl-page-content:has(.gl-contact-grid){padding-left:20px;padding-right:20px}.gl-page-content .row>.col{max-width:100%;flex-basis:100%}.gl-page-content .col-inner{padding-left:0!important;padding-right:0!important}.gl-page-content .gap-element{max-height:32px}.gl-page-content .gl-social-links{margin-bottom:16px}} /* UX Builder generates new column IDs per render: target layout, not transient IDs. */ .gl-page-content:has(.section) .col-inner{padding-left:0!important;padding-right:0!important} .gl-page-content:has(.section) .section-content>.row>.col>.col-inner{padding:24px!important} .gl-page-content:has(.section) .section-content>.row>.col{padding-bottom:24px} .gl-page-content:has(.section) .gap-element{max-height:40px} @media(max-width:760px){.gl-page-content:has(.section) .section-content>.row>.col>.col-inner{padding:16px 0!important}.gl-page-content:has(.section) .section-content>.row>.col{padding-bottom:16px}} .gl-page-content:has(.section) .col-inner{margin-top:0!important;margin-bottom:0!important;border-color:#ddd!important;border-top-width:1px!important;box-shadow:none!important} .gl-page-content :is(h1,h2,h3,h4) strong,.gl-page-content :is(h1,h2,h3,h4) b{font-weight:400} .gl-page-content .banner h1{font-size:clamp(30px,3.6vw,52px);line-height:1.15} /* Component states and editorial rhythm, shared across the redesigned site. */ body.gl-astro-home .gl-support a{background:#fff;color:#111;border:1px solid #ccc} body.gl-astro-home .gl-support a:hover,body.gl-astro-home .gl-support a:focus-visible{background:#111;color:#fff;border-color:#111} body.gl-astro-home .gl-support a svg{stroke:currentColor} body.gl-astro-home :is(.gl-page-content,.gl-single-content,.gl-spec-excerpt) ul, body.gl-astro-home :is(.gl-page-content,.gl-single-content,.gl-spec-excerpt) ol{margin:0 0 24px;padding:0 0 0 1.5em;list-style-position:outside} body.gl-astro-home :is(.gl-page-content,.gl-single-content,.gl-spec-excerpt) li{margin:0 0 8px;padding-left:0;text-indent:0} body.gl-astro-home :is(.gl-page-content,.gl-single-content,.gl-spec-excerpt) li>p{margin-bottom:8px} body.gl-astro-home :is(.gl-page-content,.gl-single-content,.gl-spec-excerpt) li>ul, body.gl-astro-home :is(.gl-page-content,.gl-single-content,.gl-spec-excerpt) li>ol{margin:8px 0 12px;padding-left:1.25em} body.gl-astro-home .gl-page-content a.button:not(.is-outline):not(.button--border):not(.button--border-white):not(.ar-link){background:#111!important;color:#fff!important;border:1px solid #111!important;border-radius:0!important;padding:12px 24px!important;box-shadow:none!important;font-weight:400;letter-spacing:0;line-height:1.5;display:inline-flex;align-items:center;justify-content:center;gap:10px} body.gl-astro-home .gl-page-content a.button:not(.is-outline):not(.button--border):not(.button--border-white):not(.ar-link):hover,body.gl-astro-home .gl-page-content a.button:not(.is-outline):not(.button--border):not(.button--border-white):not(.ar-link):focus-visible{background:#333!important;border-color:#333!important;color:#fff!important} body.gl-astro-home :is(.gl-page-content,.gl-single-content,.gl-spec-section) table{width:100%;border-collapse:collapse} body.gl-astro-home :is(.gl-page-content,.gl-single-content,.gl-spec-section) :is(th,td){padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid #ddd;overflow-wrap:anywhere} body.gl-astro-home #thong-so table{table-layout:fixed;margin:0 0 24px} body.gl-astro-home #thong-so :is(th,td):first-child{width:36%} body.gl-astro-home #thong-so :is(th,td):last-child{width:64%} body.gl-astro-home #thong-so td p{margin:0} body.gl-astro-home :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),textarea,select){box-shadow:none!important;border-radius:0} body.gl-astro-home :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),textarea,select):focus{box-shadow:none!important} body.gl-astro-home .wpcf7 :is(input:not([type=submit]),textarea,select){border:1px solid #ccc;background:#fff;color:#111;padding:10px 12px;font:inherit} body.gl-astro-home .wpcf7 :is(input,textarea,select):focus-visible{outline:1px solid #111;outline-offset:2px} body.gl-astro-home .gl-top-search input,body.gl-astro-home .gl-top-search input:focus{color:inherit!important;background:transparent!important} body.gl-astro-home .gl-top-search input::placeholder,body.gl-astro-home .gl-top-search input:focus::placeholder{color:inherit!important;opacity:.8} @media(max-width:760px){body.gl-astro-home :is(.gl-page-content,.gl-single-content,.gl-spec-section) :is(th,td){padding:12px}body.gl-astro-home #thong-so :is(th,td):first-child{width:40%}body.gl-astro-home #thong-so :is(th,td):last-child{width:60%}} .gl-space-intro{max-width:780px;margin:0 auto 50px!important;font-size:18px;line-height:1.7}.gl-astro-home .woocommerce form :is(input.input-text,select,textarea){border:1px solid #ccc;padding:10px 12px;background:#fff;color:#111;box-shadow:none;border-radius:0}.gl-astro-home .woocommerce form button.button,.gl-astro-home .wpcf7 input[type=submit]{background:#111;color:#fff;border:1px solid #111;border-radius:0;font-weight:400;letter-spacing:0;padding:12px 24px}.gl-astro-home .woocommerce form button.button:hover,.gl-astro-home .wpcf7 input[type=submit]:hover{background:#333;color:#fff}.gl-astro-home .woocommerce :is(.woocommerce-info,.woocommerce-message,.woocommerce-error){border-color:#111;background:#f5f5f5;color:#111}.gl-astro-home .woocommerce :is(.woocommerce-info,.woocommerce-message):before{color:#111}.gl-astro-home .woocommerce-MyAccount-navigation{font-size:16px}.gl-search-layout .gl-filter-panel{display:block}.gl-search-layout .gl-catalog-content{min-width:0}.gl-astro-home .gl-page-content .woocommerce{padding-bottom:24px}.gl-astro-home .woocommerce-form-register,.gl-astro-home .woocommerce-form-login{border:1px solid #ddd;padding:28px}.gl-astro-home .woocommerce form .form-row label{font-weight:400}.gl-astro-home .woocommerce form .show-password-input{top:12px}.gl-astro-home .gl-search-layout .gl-catalog-content{display:block}@media(max-width:760px){.gl-space-intro{font-size:16px;margin-bottom:32px!important}.gl-astro-home .woocommerce-form-register,.gl-astro-home .woocommerce-form-login{padding:20px}.gl-search-layout .gl-filter-panel{width:100%}} .gl-astro-home.woocommerce-account .kk-star-ratings{display:none} /* Catalogue geometry measured against the Astro product listing. */ @media(min-width:1100px){ .gl-catalog-page .gl-catalog-main{max-width:none;width:100%;margin:0;padding:0} .gl-catalog-page .gl-catalog-layout{width:100%;max-width:none;margin:0;padding:0;display:grid;grid-template-columns:290px minmax(0,1fr);column-gap:0} .gl-catalog-page .gl-filter-panel{width:100%;padding:35px 30px 60px 42px;box-sizing:border-box} .gl-catalog-page .gl-catalog-content{padding:35px 42px 80px 42px;box-sizing:border-box} .gl-catalog-page .gl-catalog-toolbar{margin-bottom:20px} .gl-catalog-page .gl-archive-grid{gap:30px 20px} } /* Shared controls: one box model and explicit foreground/background pairs. */ body.gl-astro-home a.button:not(.is-outline):not(.button--border):not(.button--border-white):not(.ar-link):not(.gl-button-light):not(.button--ghost),body.gl-astro-home button.button:not(.is-outline):not(.button--border):not(.button--border-white):not(.ar-link):not(.gl-button-light):not(.button--ghost){background:#111!important;color:#fff!important;border:1px solid #111!important;border-radius:0!important;box-shadow:none!important;text-shadow:none;font-weight:400;letter-spacing:0;min-height:44px;height:auto;line-height:1.5;padding:12px 24px;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:normal} body.gl-astro-home a.button:not(.is-outline):not(.button--border):not(.button--border-white):not(.ar-link):not(.gl-button-light):not(.button--ghost):hover,body.gl-astro-home button.button:not(.is-outline):not(.button--border):not(.button--border-white):not(.ar-link):not(.gl-button-light):not(.button--ghost):hover{background:#333!important;border-color:#333!important;color:#fff!important} body.gl-astro-home .gl-single-actions a.gl-button-light,body.gl-astro-home .gl-single-actions a.button--ghost{background:transparent!important;color:#111!important;border:1px solid #111!important} body.gl-astro-home .gl-single-actions a.gl-button-light:hover,body.gl-astro-home .gl-single-actions a.button--ghost:hover{background:#111!important;color:#fff!important} body.gl-astro-home .gl-single-actions a.gl-button-light span,body.gl-astro-home .gl-single-actions a.button--ghost span{color:inherit!important} body.gl-astro-home .button :is(span,i){color:inherit!important} body.gl-astro-home .button.is-outline{background:transparent!important;color:#111!important;border:1px solid #111!important} body.gl-astro-home .button.is-outline:hover{background:#111!important;color:#fff!important} body.gl-astro-home :is(a.button,button,select,input,textarea):focus-visible{outline:2px solid #555;outline-offset:3px} body.gl-astro-home select:not([multiple]){appearance:none;box-sizing:border-box!important;width:100%;max-width:100%;height:auto!important;min-height:46px!important;padding:11px 38px 11px 12px!important;margin:0;line-height:1.5!important;font-family:inherit!important;font-size:16px!important;font-weight:400;color:#111!important;background-color:#fff!important;border:1px solid #ccc!important;border-radius:0!important;box-shadow:none!important;text-overflow:ellipsis} body.gl-astro-home select option{font:inherit;color:#111;background:#fff;padding:10px 12px;line-height:1.5;white-space:normal} body.gl-astro-home select:disabled{color:#767676!important;background-color:#f4f4f4!important;cursor:not-allowed} @supports (appearance:base-select){ body.gl-astro-home select:not([multiple]),body.gl-astro-home select:not([multiple])::picker(select){appearance:base-select} body.gl-astro-home select:not([multiple]){background-image:none!important;display:flex;align-items:center;gap:12px;padding-right:12px!important;white-space:normal;overflow-wrap:anywhere} body.gl-astro-home select::picker-icon{color:#111;transition:rotate .2s} body.gl-astro-home select:open::picker-icon{rotate:180deg} body.gl-astro-home select::picker(select){font-family:inherit;font-size:16px;line-height:1.5;background:#fff;color:#111;border:1px solid #bbb;border-radius:0;box-shadow:0 6px 18px #00000014;max-height:min(320px,60vh);overflow:auto;padding:4px;min-width:anchor-size(width)} body.gl-astro-home select option{min-height:40px;display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer} body.gl-astro-home select option:checked{background:#eee;color:#111} body.gl-astro-home select option:hover,body.gl-astro-home select option:focus{background:#111;color:#fff} } body.gl-astro-home .gl-catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} body.gl-astro-home .gl-catalog-toolbar .woocommerce-ordering{max-width:100%} body.gl-astro-home .gl-catalog-toolbar select.orderby{width:240px;max-width:100%} body.gl-astro-home .wpcf7 :is(input[type=text],input[type=email],input[type=tel]),body.gl-astro-home .woocommerce input.input-text{box-sizing:border-box;height:auto;min-height:46px;line-height:1.5;padding:11px 12px} @media(min-width:1001px){ body.gl-astro-home #gl-navigation{height:100%;align-items:stretch} body.gl-astro-home #gl-navigation>.gl-nav-group,body.gl-astro-home #gl-navigation>a{display:flex;align-items:center;align-self:stretch;height:100%;margin:0;padding-top:0;padding-bottom:0} body.gl-astro-home #gl-navigation>.gl-nav-group>a{display:flex;align-items:center;height:100%;padding-top:0;padding-bottom:0;line-height:24px} body.gl-astro-home #gl-navigation>a{line-height:24px} } @media(max-width:760px){body.gl-astro-home .gl-catalog-toolbar{align-items:flex-start;gap:8px}body.gl-astro-home .gl-catalog-toolbar select.orderby{width:100%;font-size:14px!important}body.gl-astro-home .gl-catalog-toolbar .woocommerce-ordering{width:100%}} /* Customer catalogue links share the editorial spacing and monochrome controls. */ .gl-catalogue-downloads{margin:64px 0;padding:40px 0;border-top:1px solid #deddda} .gl-catalogue-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .gl-catalogue-links a.button{justify-content:space-between;text-align:left;margin:0;min-height:72px;gap:16px} @media(max-width:767px){.gl-catalogue-downloads{margin:40px 0;padding:28px 0}.gl-catalogue-links{grid-template-columns:1fr;gap:12px}} body.gl-astro-home .gl-catalogue-links a.button.is-outline{display:flex!important;align-items:center;justify-content:space-between;white-space:normal;text-transform:none;font-weight:400;line-height:1.5;padding:16px 20px!important;border-radius:0;letter-spacing:0} .gl-catalogue-links a>span[aria-hidden]{flex:0 0 auto;margin-left:12px} /* Readable catalogue pricing, including search results. */ body.gl-astro-home .gl-product-card__body p.gl-product-card__price{font-size:18px;line-height:1.5;font-weight:400;color:#111;margin-top:8px;letter-spacing:0} body.gl-astro-home .gl-product-card__price .amount{font-size:inherit;font-weight:400;color:inherit} body.gl-astro-home .gl-product-card__price ins{background:transparent;text-decoration:none} body.gl-astro-home .gl-product-card__price del{font-size:.85em;color:#6b6b6b;margin-right:6px} @media(max-width:767px){body.gl-astro-home .gl-product-card__body p.gl-product-card__price{font-size:16px}} .gl-family-price{font-size:22px;line-height:1.5;color:#111;margin:12px 0 24px;font-weight:400}.gl-family-price .amount{font-size:inherit;color:inherit;font-weight:400}.gl-family-price ins{background:none;text-decoration:none}.gl-family-price del{color:#777;font-size:.85em}.gl-family-status{font-size:14px;color:#555;margin:10px 0} /* Product options share the site's neutral, square-edged controls. */ .gl-product-options .gl-option-group{border:0;padding:0;margin:0 0 20px;min-width:0} .gl-product-options .gl-option-group legend{float:none;width:auto;padding:0;margin:0 0 10px;font-size:12px;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:1.5px} .gl-option-buttons{display:flex;flex-wrap:wrap;gap:8px} .gl-product-options .gl-option-button{position:relative;display:inline-flex;margin:0;padding:0;border:0;background:transparent;cursor:pointer;max-width:100%} .gl-option-button input[type=radio]{position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;clip-path:inset(50%)} .gl-option-button span{display:inline-flex;align-items:center;justify-content:center;min-width:58px;height:38px;min-height:38px;box-sizing:border-box;padding:0 18px;border:1px solid #d2d2d2;border-radius:0;background:#fff;color:#111;font-size:13px;font-weight:500;transition:background .18s,color .18s,border-color .18s} .gl-option-button:hover span{border-color:#000;color:#000} .gl-option-button input:checked+span{background:#000;color:#fff;border-color:#000} .gl-option-button input:focus-visible+span{outline:2px solid #000;outline-offset:3px} @media(prefers-reduced-motion:reduce){.gl-option-button span{transition:none}} /* Catalogue navigation: consistent insets and neutral interaction states. */ .gl-astro-home .gl-filter-panel{min-width:0;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#ccc transparent} .gl-astro-home .gl-filter-panel>a{box-sizing:border-box;align-items:center;min-height:48px;padding:12px 0;gap:12px;line-height:1.5;font-size:14px;font-weight:400;color:#222;border-bottom:1px solid #eaeaea;background:transparent;transition:border-color .16s} .gl-astro-home .gl-filter-panel>a span{min-width:0;overflow-wrap:break-word} .gl-astro-home .gl-filter-panel>a:hover{background:transparent;color:#111;border-bottom-color:#999} .gl-astro-home .gl-filter-panel>a[aria-current=page]{background:transparent;color:#111;border-bottom-color:#eaeaea;box-shadow:none} .gl-astro-home .gl-filter-panel a:focus-visible,.gl-astro-home .gl-filter-toggle:focus-visible{outline:2px solid #222;outline-offset:2px} .gl-astro-home .gl-filter-panel h2{margin-bottom:20px;font-size:18px;font-weight:400;line-height:1.4} .gl-astro-home .gl-attribute-filters{margin:28px 0 0} .gl-astro-home .gl-attribute-filters label{margin:20px 0 8px;font-size:14px;line-height:1.5;font-weight:400} .gl-astro-home .gl-attribute-filters select,.gl-astro-home .gl-catalog-toolbar select.orderby{height:auto;min-height:48px;line-height:1.5;padding:11px 38px 11px 14px;box-sizing:border-box;box-shadow:none;border:1px solid #ccc;border-radius:0;background-color:#fff;color:#222} .gl-astro-home .gl-attribute-filters select:focus,.gl-astro-home .gl-catalog-toolbar select.orderby:focus{border-color:#555;outline:1px solid #555;outline-offset:1px;box-shadow:none} .gl-astro-home .gl-attribute-filters button{min-height:48px;margin:20px 0 0;padding:12px 16px;font-weight:400;line-height:1.5} .gl-astro-home .gl-attribute-filters .gl-clear-filter{display:inline-flex;align-items:center;min-height:44px;padding:10px 0;margin-top:8px;color:#555;background:transparent;box-shadow:none;text-decoration:underline;text-underline-offset:4px} .gl-astro-home .gl-attribute-filters .gl-clear-filter:hover{color:#111} .gl-astro-home .gl-catalog-toolbar{gap:16px;min-width:0} .gl-astro-home .gl-catalog-toolbar .woocommerce-ordering{margin-bottom:0;max-width:100%} @media(min-width:1100px){.gl-catalog-page .gl-filter-panel{padding-right:32px}} @media(max-width:1099px){.gl-astro-home .gl-filter-panel{height:auto;max-height:none;padding:20px 0 28px}.gl-astro-home .gl-filter-toggle{min-height:48px;padding:12px 16px;line-height:1.5}.gl-astro-home .gl-filter-toggle[aria-expanded=true] svg{transform:rotate(90deg)}} @media(max-width:600px){.gl-astro-home .gl-catalog-toolbar{flex-wrap:wrap;gap:12px}.gl-astro-home .gl-catalog-toolbar select.orderby{font-size:14px;width:100%;max-width:100%;min-height:44px}.gl-astro-home .gl-catalog-toolbar .woocommerce-result-count{font-size:13px;line-height:1.5}.gl-astro-home .gl-catalog-toolbar .woocommerce-ordering{width:100%}} @media(prefers-reduced-motion:reduce){.gl-astro-home .gl-filter-panel>a{transition:none}} @media(max-width:1099px){body:has(.gl-filter-toggle[aria-expanded=true]) .gl-support{visibility:hidden;pointer-events:none}} /* Shared motion, product overlays and detail layout. */ .gl-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.gl-reveal.is-revealed{opacity:1;transform:none} .ar-slide.is-active .ar-hero-copy{animation:gl-hero-enter .8s ease both}@keyframes gl-hero-enter{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}} .ar-image-grid>a img,.ar-category-track img,.gl-category-track img,.ar-product-image img,.gl-source-montage img,.gl-product-card__image img{transition:transform .65s cubic-bezier(.2,.65,.3,1)} .ar-image-grid>a:hover img,.ar-image-grid>a:focus-visible img{transform:scale(1.045)} .ar-image-grid h3{max-width:calc(100% - 80px);padding-bottom:10px} .ar-image-grid h3:after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s ease} .ar-image-grid>a:hover h3:after,.ar-image-grid>a:focus-visible h3:after{transform:scaleX(1)} .gl-feature-arrow{position:absolute;right:30px;bottom:30px;z-index:2;color:#fff;transition:translate .35s ease}.gl-feature-arrow svg{width:40px;height:24px}.ar-image-grid>a:hover .gl-feature-arrow{translate:5px 0} .ar-category-track>a,.gl-category-track>a{overflow:hidden}.ar-category-track>a:hover img,.gl-category-track>a:hover img{transform:scale(1.035)} .ar-product-image,.gl-source-montage>a,.gl-product-card__image{position:relative;overflow:hidden;display:block} .gl-product-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;background:rgba(0,0,0,.5);color:white;opacity:0;transition:opacity .3s ease;z-index:2;text-align:center} .product-listing-item__overlay-contents{display:flex;flex:1;flex-direction:column;justify-content:center;padding:20px;gap:10px} .gl-overlay-title{font-size:18px;line-height:1.4;color:white!important}.gl-overlay-code{font-size:13px;color:white!important} .product-listing-item__overlay-actions{padding:20px;background:#333}.product-listing-item__overlay-actions>span{min-height:44px;border:1px solid #ffffff90;display:flex;align-items:center;justify-content:center;gap:16px;color:white!important;font-size:14px} .ar-product-item>a:hover .gl-product-overlay,.ar-product-item>a:focus-visible .gl-product-overlay,.gl-source-montage>a:hover .gl-product-overlay,.gl-source-montage>a:focus-visible .gl-product-overlay,.gl-product-card__image:hover .gl-product-overlay,.gl-product-card__image:focus-visible .gl-product-overlay{opacity:1} .gl-astro-home .gl-top-search{gap:12px}.gl-astro-home .gl-top-search button{order:-1;flex:0 0 30px;margin:0}.gl-astro-home .gl-top-search:focus-within,.gl-astro-home .gl-top-search input:focus{outline:none!important;border:0!important;box-shadow:none!important} .gl-astro-home .gl-single-layout{width:calc(100% - 2 * var(--ar-gutter));max-width:1440px;margin:15px auto 70px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;background:white} .gl-astro-home .gl-single-gallery{position:relative;display:grid;grid-template-columns:88px minmax(0,1fr);gap:20px;align-self:start;padding:0;background:transparent} .gl-astro-home .gl-gallery-open{grid-column:2;grid-row:1;margin:0;align-self:start;background:#f3f3f3!important;aspect-ratio:1} .gl-astro-home .gl-single-main-img{width:100%;height:100%;aspect-ratio:1;object-fit:contain;padding:0;mix-blend-mode:multiply} .gl-gallery-open>span{position:absolute;right:15px;top:15px;padding:0;font-size:12px} .gl-astro-home .gl-single-thumbs{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:10px;width:88px;margin:0;max-height:520px;overflow:auto;scroll-snap-type:y mandatory} .gl-astro-home .gl-single-thumbs button{width:88px;min-width:88px;height:88px;flex:0 0 88px;margin:0;background:#f3f3f3;border:1px solid #ddd;padding:3px}.gl-astro-home .gl-single-thumbs button[aria-pressed=true]{border-color:#333} .gl-astro-home .gl-gallery-arrows{position:absolute;top:50%;left:108px;right:0;padding:0 12px;height:0;margin:0;justify-content:space-between;pointer-events:none} .gl-gallery-arrows button{pointer-events:auto;background:#ffffffb8!important;transform:translateY(-50%);margin:0}.gl-gallery-arrows button:disabled{opacity:.3} .gl-astro-home .gl-single-summary{padding:0;display:block}.gl-single-summary h1{margin-bottom:18px}.gl-single-actions{margin:25px 0 0;display:flex;flex-wrap:wrap;gap:12px} .gl-assurances{margin:24px 0 0}.gl-single-short{margin-top:28px;padding:24px 0;border-top:1px solid #ddd;font-size:15px;line-height:1.7}.gl-single-short p:last-child{margin-bottom:0} .gl-family-price:empty,.gl-product-card__price:empty{display:none} .gl-astro-home .gl-spec-section,.gl-astro-home .gl-single-content{width:100%;max-width:980px;margin-left:auto;margin-right:auto}.gl-single-detail{max-width:1600px;margin:auto} .gl-footer-socials{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px}.gl-footer .gl-footer-socials a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:32px;margin:0;color:#fff}.gl-footer-socials svg{width:22px;height:22px;fill:currentColor}.gl-footer-socials a:hover{opacity:.65} @media(hover:none){.gl-product-overlay{display:none}} @media(max-width:1000px){.gl-astro-home .gl-single-layout{gap:24px}.gl-astro-home .gl-single-gallery{grid-template-columns:64px minmax(0,1fr);gap:12px}.gl-astro-home .gl-single-thumbs{width:64px;max-height:380px}.gl-astro-home .gl-single-thumbs button{width:64px;min-width:64px;height:64px;flex-basis:64px}.gl-astro-home .gl-gallery-arrows{left:76px}.gl-single-summary h1{font-size:30px}} @media(max-width:760px){.gl-astro-home .gl-single-layout{width:calc(100% - 40px);grid-template-columns:1fr;gap:28px;margin-bottom:40px}.gl-astro-home .gl-single-gallery{grid-template-columns:1fr;gap:12px}.gl-astro-home .gl-gallery-open{grid-column:1;grid-row:1}.gl-astro-home .gl-single-thumbs{grid-column:1;grid-row:2;flex-direction:row;width:100%;max-height:none;scroll-snap-type:x mandatory}.gl-astro-home .gl-gallery-arrows{left:0;top:calc((100% - 76px)/2)}.gl-single-actions{display:grid;grid-template-columns:1fr}.gl-single-short{padding-top:20px}.gl-feature-arrow{right:20px;bottom:20px}.ar-image-grid h3{max-width:calc(100% - 40px)}.gl-astro-home .gl-single-summary{padding:0}} @media(prefers-reduced-motion:reduce){.gl-reveal{opacity:1;transform:none}.ar-slide.is-active .ar-hero-copy{animation:none}.gl-product-overlay,.ar-image-grid img,.ar-category-track img,.gl-category-track img,.ar-image-grid h3:after{transition:none}} .gl-footer .gl-footer-contact{display:flex;align-items:center;gap:12px}.gl-footer-contact svg{width:20px;height:20px;flex:0 0 20px}.gl-single-short ul{padding-left:20px}.gl-single-short li{margin-left:0;padding-left:0} /* Reference component rules: image clips, overlay, navigation and detail rails. */ .ar-product-image>.gl-product-overlay,.gl-product-overlay{inset:0;letter-spacing:0;font-size:inherit;overflow:hidden;touch-action:pan-y} .product-listing-item__overlay-contents{min-height:0;overflow:visible;padding:16px 20px;gap:10px;align-items:center;pointer-events:none} .gl-overlay-title{font-size:24px;line-height:1.25;font-weight:400} .gl-overlay-code{font-size:16px;line-height:1.4;font-weight:400;overflow-wrap:anywhere} .product-listing-item__overlay-actions{flex:none;padding:20px;background:#333;pointer-events:none} .product-listing-item__overlay-actions>span{min-height:46px;padding:10px 16px;border:1px solid #fff;background:#fff;color:#505050!important;font-size:16px;line-height:1.4} .gl-source-montage .gl-overlay-title{font-size:20px}.gl-source-montage .gl-overlay-code{font-size:14px} .gl-category-image{display:block;overflow:hidden;margin:0;width:100%;aspect-ratio:525/625} .ar-category-track .gl-category-image img{width:100%;height:100%;object-fit:cover} .ar-image-grid>a img,.ar-category-track img{transition:transform 2.25s cubic-bezier(.19,1,.22,1)} .ar-category-track>a:hover img,.ar-category-track>a:focus-visible img,.ar-image-grid>a:hover img,.ar-image-grid>a:focus-visible img{transform:scale(1.2)} .ar-category-track>a{overflow:visible}.category-preview__title:after,.ar-link:after{transition:transform var(--gl-line-duration) var(--gl-line-ease)} .gl-feature-heading{position:absolute;top:30px;left:40px;right:40px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px} .ar-image-grid .gl-feature-heading h3, .gl-spaces .ar-image-grid h3{position:relative;inset:auto;flex:0 1 auto;width:fit-content;max-width:100%;padding:0 0 4px;margin:0;font-size:26px;line-height:1.46;color:#ffffff !important;text-shadow:0 1px 12px rgba(0,0,0,0.45) !important} .ar-image-grid h3:after{width:100%;background:#ffffff !important;transition:transform var(--gl-line-duration) var(--gl-line-ease)} .gl-feature-heading .gl-feature-arrow{position:static;flex:0 0 12px;width:12px;height:22px;opacity:0;translate:-10px 0;transition:opacity .3s,translate .3s;color:#ffffff !important} .gl-feature-heading .gl-feature-arrow svg{display:block;width:12px;height:22px} .ar-image-grid>a:hover .gl-feature-arrow,.ar-image-grid>a:focus-visible .gl-feature-arrow{opacity:1;translate:0 0} .ar-section-heading>.ar-link, .ar-section-heading>.button, .ar-section-heading>a{flex:0 0 auto !important;width:max-content !important;max-width:none !important;white-space:nowrap !important} .ar-feature{display:block}.ar-feature-inner{display:grid;grid-template-columns:minmax(0,36.7fr) minmax(0,63.3fr);width:calc(100% - 2 * var(--ar-gutter));max-width:1440px} .ar-feature .ar-feature-copy{padding:60px 40px 60px 0}.ar-feature .gl-source-montage{padding:28px 0 28px 28px} .ar-products,.gl-spaces,.gl-reasons,.ar-projects{border-bottom:1px solid #eaeaea}.gl-spaces{padding-bottom:80px} .ar-slide{transition:opacity .8s ease,visibility 0s linear .8s}.ar-slide.is-active{transition-delay:0s} .gl-reveal{transform:translateY(25px);transition:opacity 1.25s cubic-bezier(.19,1,.22,1),transform 1.25s cubic-bezier(.19,1,.22,1);transition-delay:var(--gl-reveal-delay,0s)} [data-drag-scroll]{overscroll-behavior:auto;touch-action:pan-x pan-y;scroll-snap-type:x proximity;scroll-behavior:auto} [data-drag-scroll].is-animating{scroll-snap-type:none!important} .gl-header{transition:background-color .3s,color .3s} @media(min-width:1001px){ body.gl-astro-home .gl-header:hover,body.gl-astro-home .gl-header:focus-within,body.gl-astro-home .gl-header.gl-menu-active{background:#fff;color:#111} .gl-reference-home .gl-header:hover .gl-logo img,.gl-reference-home .gl-header:focus-within .gl-logo img,.gl-reference-home .gl-header.gl-menu-active .gl-logo img{filter:none} .gl-header:hover .gl-top-search input,.gl-header:focus-within .gl-top-search input{color:#111!important} .gl-header:hover .gl-top-search input::placeholder,.gl-header:focus-within .gl-top-search input::placeholder{color:#666!important} .gl-nav>a,.gl-nav-group>a{position:relative;border-bottom:0!important} .gl-nav>a:after,.gl-nav-group>a:after{content:'';position:absolute;left:0;right:0;bottom:16px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--gl-line-duration) var(--gl-line-ease)} .gl-nav>a:hover:after,.gl-nav>a:focus-visible:after{transform:scaleX(1)} .gl-header-background{position:absolute;top:100%;left:0;right:0;height:100vh;background:rgba(0,0,0,.75);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility .3s;z-index:-1} .gl-menu-active .gl-header-background{opacity:1;visibility:visible;pointer-events:auto} .gl-header__bar,.ar-utility{position:relative;z-index:1} } .gl-thumb-rail{grid-column:1;grid-row:1;position:relative;min-height:0;align-self:start;box-sizing:border-box;padding:0;overflow:hidden} .gl-astro-home .gl-thumb-rail .gl-single-thumbs{width:100%;height:100%;max-height:none;scroll-snap-type:y proximity;gap:10px} .gl-thumb-rail .gl-thumb-arrow{position:absolute;left:50%;transform:translateX(-50%);width:30px;min-width:30px;height:24px;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent!important;color:#000!important;display:grid;place-items:center;z-index:4} .gl-thumb-arrow--up{top:0}.gl-thumb-arrow--down{bottom:0}.gl-thumb-arrow:disabled{visibility:hidden}.gl-thumb-arrow svg{width:10px;height:7px} .gl-astro-home .gl-gallery-arrows{padding:0 15px} .gl-astro-home .gl-gallery-arrows button,.gl-astro-home .gl-gallery-arrows button:not(:disabled):hover{width:36px;height:36px;min-width:36px;padding:0;border:1px solid #d2d2d2;background:transparent!important;color:#000!important;transition:border-color .2s ease-in;box-shadow:none} .gl-astro-home .gl-gallery-arrows button:not(:disabled):hover{border-color:#000} .gl-gallery-arrows button svg{width:7px;height:10px;stroke:currentColor}.gl-gallery-arrows button:disabled{opacity:.35} .gl-gallery-open>.gl-gallery-magnify{top:25px;right:25px;width:20px;height:20px;display:block;padding:0;color:#000}.gl-gallery-magnify svg{display:block;width:20px;height:20px} .gl-single-short.ar-container{width:calc(100% - 2 * var(--ar-gutter));max-width:1440px;display:grid;grid-template-columns:1fr 2fr;gap:60px;margin:0 auto 55px;padding:40px 0;border-top:1px solid #eaeaea;border-bottom:1px solid #eaeaea;font-size:16px;line-height:1.6} .gl-single-short h2{font-size:26px;font-weight:400;line-height:1.35;margin:0}.gl-single-short [data-family-excerpt]>:last-child{margin-bottom:0} .gl-single-short ul{columns:2;column-gap:40px}.gl-single-short li{break-inside:avoid}.gl-single-short table{table-layout:fixed;width:100%}.gl-single-short td{padding:12px 15px} .gl-contact-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:70px;align-items:start;padding-bottom:50px} .gl-contact-company{border-bottom:1px solid #eaeaea;padding-bottom:28px}.gl-contact-company h2{font-size:26px;line-height:1.4} .gl-contact-article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:28px;padding:30px 0;border-bottom:1px solid #eaeaea} .gl-contact-article h3{font-size:18px;line-height:1.5;font-weight:400;margin:0}.gl-contact-article p{font-size:16px;line-height:1.65;margin-bottom:14px}.gl-contact-article p:last-child{margin-bottom:0} .gl-contact-article a:not(.ar-link){text-decoration:underline;text-decoration-color:#bbb;text-underline-offset:5px;text-decoration-thickness:1px;transition:text-decoration-color .15s}.gl-contact-article a:hover{text-decoration-color:#111}.gl-contact-article .ar-link{font-size:16px}.gl-contact-grid iframe{position:sticky;top:145px;height:500px;min-height:0}.gl-contact-article .gl-social-links{gap:14px 20px} @media(max-width:1000px){.gl-feature-heading{left:24px;right:24px;top:24px}.ar-image-grid .gl-feature-heading h3{font-size:22px}.gl-contact-grid{gap:35px}.gl-contact-article{grid-template-columns:1fr;gap:12px}.gl-header-background{display:none}} @media(max-width:760px){ .ar-feature-inner{grid-template-columns:1fr;width:calc(100% - 40px)}.ar-feature .ar-feature-copy{padding:40px 0}.ar-feature .gl-source-montage{padding:0 0 30px} .gl-astro-home .gl-thumb-rail{grid-column:1;grid-row:2;width:100%;height:auto;padding:0}.gl-astro-home .gl-thumb-rail .gl-single-thumbs{height:64px;flex-direction:row;scroll-snap-type:x proximity}.gl-thumb-arrow{display:none!important} .gl-single-short.ar-container{width:calc(100% - 40px);grid-template-columns:1fr;gap:20px;margin-bottom:30px;padding:28px 0}.gl-single-short ul{columns:1}.gl-single-short h2{font-size:24px} .ar-image-grid{grid-template-rows:auto;align-items:start;row-gap:25px}.ar-image-grid>a{overflow:visible}.ar-image-grid>a>img{aspect-ratio:5/6;height:auto;object-fit:cover}.ar-image-grid>a:after{display:none}.gl-feature-heading{position:static;display:block;margin-top:10px}.ar-image-grid .gl-feature-heading h3{font-size:16px;color:#111;line-height:1.875;padding-bottom:3px;max-width:100%}.gl-feature-heading .gl-feature-arrow{display:none}.ar-image-grid h3:before{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:#0003} .ar-image-grid>a:hover img{transform:none}.gl-spaces{padding-bottom:40px}.ar-section-heading{flex-wrap:wrap;gap:16px}.ar-section-heading>.ar-link{font-size:16px} .gl-contact-grid{grid-template-columns:1fr;gap:35px}.gl-contact-grid iframe{position:static;height:350px}.gl-contact-company h2{font-size:23px} } @media(prefers-reduced-motion:reduce){.gl-reveal{opacity:1;transform:none;transition:none}.ar-image-grid>a img,.ar-category-track img,.ar-slide{transition:none}.gl-header-background{transition:none}} /* Interaction contract: click navigation, restrained filters and shared image motion. */ :root{--gl-divider:#eaeaea;--gl-motion-ease:cubic-bezier(.19,1,.22,1);--gl-image-duration:2.25s;--gl-section-gap:70px} .gl-nav-trigger{position:relative;display:flex;align-items:center;justify-content:flex-start;height:80px;margin:0;padding:0;border:0;background:transparent!important;color:inherit!important;font:inherit;font-weight:400;line-height:24px;white-space:nowrap} .gl-nav-trigger:after{content:'';position:absolute;left:0;right:0;bottom:21px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--gl-line-duration) var(--gl-line-ease)} .gl-nav-trigger:hover:after,.gl-nav-trigger[aria-expanded=true]:after,.gl-nav-trigger:focus-visible:after{transform:scaleX(1)} .gl-header .gl-nav-group>.ar-dropdown{display:none} .gl-header .gl-nav-group.is-expanded>.ar-dropdown{display:block} .gl-header .gl-nav-group.is-expanded>.gl-mega-menu{display:grid} .gl-nav-group{gap:0}.gl-nav-all{grid-column:1/-1;justify-self:start;width:fit-content;font-size:14px!important;padding:0 0 5px!important;border-bottom:1px solid #ccc;margin-bottom:8px} .gl-nav>a:after{bottom:21px} @media(max-width:1000px){.gl-header .gl-nav-group{grid-template-columns:1fr}.gl-nav-trigger{width:100%;height:56px;line-height:24px}.gl-nav-trigger:after{display:none}.gl-nav-trigger[aria-expanded=true]{font-weight:500}.gl-header .gl-nav-group.is-expanded>.gl-mega-menu{display:block}.gl-header .gl-nav-all{display:inline-block;margin:6px 0 16px}.gl-nav-column{grid-template-columns:minmax(0,1fr) 44px}} .ar-product-image img,.gl-source-montage img,.gl-product-card__image img,.gl-space-index img,.gl-news-grid img,.gl-project-track img{transition:transform var(--gl-image-duration) var(--gl-motion-ease)} .ar-product-item>a:hover .ar-product-image img,.ar-product-item>a:focus-visible .ar-product-image img,.gl-source-montage>a:hover>img,.gl-source-montage>a:focus-visible>img,.gl-astro-home .gl-product-card__image:hover img,.gl-product-card__image:focus-visible img,.gl-space-index>a:hover img,.gl-space-index>a:focus-visible img{transform:scale(1.2)} .ar-products+.gl-spaces,.gl-reasons+.ar-projects,main>.ar-projects,main>.gl-home-news{padding-top:var(--gl-section-gap)} .ar-section-heading{margin-bottom:35px}.gl-thumb-rail{padding:0} .gl-thumb-rail:before,.gl-thumb-rail:after{content:'';position:absolute;left:0;right:0;height:50px;pointer-events:none;z-index:3;opacity:0;transition:opacity .2s} .gl-thumb-rail:before{top:0;background:linear-gradient(#fff,transparent)}.gl-thumb-rail:after{bottom:0;background:linear-gradient(0deg,#fff,transparent)} .gl-thumb-rail.can-scroll-up:before,.gl-thumb-rail.can-scroll-down:after{opacity:1} .gl-thumb-rail .gl-thumb-arrow{height:30px;background:transparent!important}.gl-thumb-arrow:not(:disabled):hover svg{stroke-width:1.5} .gl-filters-collapse{display:none} .gl-view-filter{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:13px;line-height:1.5;color:#505050}.gl-view-filter>span{flex:none;color:#777} body.gl-astro-home .gl-view-filter .woocommerce-ordering{width:auto!important;flex:none!important;margin:0!important} body.gl-astro-home .gl-view-filter select.orderby{appearance:none;-webkit-appearance:none;width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:30px!important;padding:3px 18px 3px 2px!important;border:0!important;border-bottom:1px solid #ddd!important;border-radius:0!important;background-color:transparent!important;color:#111!important;font-size:13px!important;font-weight:500!important;line-height:1.5!important;box-shadow:none!important;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23333' stroke-width='1.2' d='m1 1 4 4 4-4'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 2px center!important} body.gl-astro-home .gl-view-filter select.orderby:hover{border-bottom-color:#111!important} body.gl-astro-home .gl-view-filter select.orderby:focus-visible{outline:1px solid #111;outline-offset:2px} @supports(appearance:base-select){body.gl-astro-home .gl-view-filter select.orderby{appearance:none;padding-right:18px!important}} .gl-catalog-page .gl-filter-panel>a{padding-left:0;padding-right:0;background:transparent;box-shadow:none}.gl-filter-panel>a:hover span,.gl-filter-panel>a[aria-current=page] span{text-decoration:none} @media(min-width:1100px){ .gl-catalog-layout{position:relative}.gl-catalog-page .gl-filter-panel{grid-column:1;grid-row:1}.gl-catalog-page .gl-catalog-content{grid-column:2;grid-row:1} .gl-astro-home .gl-filters-collapse{display:grid;place-items:center;position:sticky;top:130px;grid-column:2;grid-row:1;align-self:start;justify-self:start;width:32px;min-width:32px;height:38px;padding:0;margin:0 0 -38px 0;border:1px solid #eaeaea;border-left:0;border-radius:0 3px 3px 0;background:#fff!important;color:#505050!important;z-index:4;cursor:pointer} .gl-filters-collapse svg{width:7px;height:10px;transition:transform .2s}.gl-filters-collapse:hover{border-color:#999;color:#111!important}.gl-filters-collapse[aria-expanded=false] svg{transform:rotate(180deg)} .gl-catalog-page .gl-catalog-layout.gl-filters-hidden{grid-template-columns:0 minmax(0,1fr);column-gap:0}.gl-filters-hidden .gl-filter-panel{display:none}.gl-filters-hidden .gl-archive-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.gl-astro-home .gl-filters-hidden .gl-filters-collapse{margin-left:0;border-left:1px solid #eaeaea} } @media(max-width:1099px){ .gl-catalog-page .gl-catalog-layout{display:flex;flex-direction:column;margin:0 25px;padding:30px 0 55px;gap:20px}.gl-catalog-page .gl-catalog-content{display:contents}.gl-catalog-page .gl-catalog-toolbar{order:0;width:100%;margin:0}.gl-catalog-page .gl-filter-toggle{display:flex;order:1;width:100%;justify-content:space-between;align-items:center;min-height:44px;border:0;border-top:1px solid var(--gl-divider);border-bottom:1px solid var(--gl-divider);padding:12px 0;background:#fff;color:#111}.gl-catalog-page .gl-filter-panel{display:none;order:2;width:100%;padding:0 0 20px}.gl-catalog-page .gl-filter-panel.is-open{display:block}.gl-catalog-page .gl-archive-grid{order:3;width:100%}.gl-catalog-page .gl-pagination{order:4}.gl-catalog-page .gl-catalog-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px}.gl-view-filter .woocommerce-ordering{width:auto!important} } @media(max-width:760px){:root{--gl-section-gap:40px}.ar-section-heading{margin-bottom:25px}.gl-thumb-rail:before,.gl-thumb-rail:after{display:none}.gl-catalog-page .gl-catalog-layout{margin:0 20px}.gl-view-filter{font-size:13px;gap:6px}.gl-view-filter>span{white-space:nowrap}body.gl-astro-home .gl-view-filter select.orderby{font-size:13px!important;min-width:0;max-width:none;width:auto!important}.gl-view-filter .woocommerce-ordering{flex:none;width:auto!important}} @media(hover:none){.gl-astro-home .gl-product-card__image:hover img,.ar-product-item>a:hover .ar-product-image img,.gl-source-montage>a:hover>img,.gl-space-index>a:hover img{transform:none}} @media(prefers-reduced-motion:reduce){.ar-product-image img,.gl-source-montage img,.gl-product-card__image img,.gl-space-index img{transition:none}} /* Keep editorial cards legible while their photography is awaiting upload. */ .gl-space-index>a:has(img[src*="woocommerce-placeholder"]),.ar-image-grid>a:has(img[src*="woocommerce-placeholder"]){background:#ececec} .gl-space-index img[src*="woocommerce-placeholder"],.ar-image-grid img[src*="woocommerce-placeholder"]{visibility:hidden} .gl-space-index>a:has(img[src*="woocommerce-placeholder"]):after,.ar-image-grid>a:has(img[src*="woocommerce-placeholder"]):after{display:none} .gl-astro-home .gl-space-index>a:has(img[src*="woocommerce-placeholder"]) h2,.ar-image-grid>a:has(img[src*="woocommerce-placeholder"]) .gl-feature-heading{color:#111} .ar-image-grid>a:has(img[src*="woocommerce-placeholder"]) h3{color:inherit} /* Shared editorial controls, aligned with the measured reference. */ :root{--gl-line-duration:420ms;--gl-line-ease:cubic-bezier(.22,1,.36,1);--gl-ink:#111;--gl-muted:#666;--gl-hairline:#eaeaea;--gl-control-height:48px;--gl-icon-gap:10px} .gl-header .ar-dropdown .gl-nav-all{position:relative;display:inline-flex;align-items:center;gap:8px;grid-column:1/-1;justify-self:start;width:max-content;max-width:100%;padding:4px 0!important;margin:16px 0 0;border:0;font-size:14px!important;font-weight:400;line-height:20px;color:#111;text-decoration:none!important} .gl-header .ar-dropdown .gl-nav-all:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--gl-line-duration) var(--gl-line-ease)} .gl-header .ar-dropdown .gl-nav-all:hover:after,.gl-header .ar-dropdown .gl-nav-all:focus-visible:after{transform:scaleX(1)} .gl-nav-all svg{width:7px;height:10px;flex:0 0 7px;margin:0} .gl-astro-home .ar-link{display:inline-flex;align-items:center;gap:var(--gl-icon-gap);padding:0 0 8px;border-bottom:0;font-size:18px;font-weight:400;line-height:1.35;text-decoration:none} .ar-link:before{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.2} .ar-link:after{bottom:0;transition:transform var(--gl-line-duration) var(--gl-line-ease)} .ar-link svg{width:7px;height:10px;flex:0 0 7px;margin:0} .gl-astro-home .gl-filter-panel>a,.gl-astro-home .gl-filter-panel>a span,.gl-astro-home .gl-filter-panel>a:hover span,.gl-astro-home .gl-filter-panel>a[aria-current=page] span{text-decoration:none!important} .gl-filter-panel>a[aria-current=page]{color:#111;font-weight:600}.gl-filter-panel>a:not([aria-current=page]){color:#555}.gl-filter-panel>a:hover{color:#111} /* A horizontal rail must never become a second vertical scroll container. */ [data-drag-scroll]:not(.gl-single-thumbs){overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y pinch-zoom;overscroll-behavior:auto;scroll-snap-type:x proximity} .gl-product-overlay{overflow:clip;touch-action:auto} @media(max-width:760px){.gl-astro-home .ar-link{font-size:16px}.gl-header .ar-dropdown .gl-nav-all{font-size:16px!important;min-height:44px;margin:8px 0 0}} @media(prefers-reduced-motion:reduce){:root{--gl-line-duration:0ms}} /* Fixed TOC retains plugin behavior but shares the site's type and controls. */ body.gl-astro-home #ftwp-container.ftwp-wrap{font-family:Inter,'Goodlight Vietnamese',Arial,sans-serif;font-size:14px;line-height:1.6;color:var(--gl-ink)} body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-contents{border:1px solid var(--gl-hairline);border-radius:0;background:#fff;box-shadow:none} body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-header{display:flex !important;align-items:center !important;justify-content:space-between !important;padding:14px 20px !important;border-bottom:1px solid var(--gl-hairline) !important;background:#fff !important;color:var(--gl-ink) !important;min-height:52px !important;box-sizing:border-box !important} body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-header-title{font-family:var(--gl-font) !important;font-size:16px !important;font-weight:500 !important;line-height:1.4 !important;color:#111 !important;margin:0 !important;padding:0 !important;order:1 !important;flex:1 1 auto !important} body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-header-control{display:none !important} body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-header-minimize{order:2 !important;margin-left:auto !important;width:28px !important;height:28px !important;min-width:28px !important;min-height:28px !important;border:0 !important;background:transparent !important;display:flex !important;align-items:center !important;justify-content:center !important;cursor:pointer !important;padding:0 !important;position:relative !important;color:#111 !important;font-size:0 !important;line-height:0 !important;transition:opacity .2s ease !important} body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-header-minimize:hover{opacity:.6 !important} body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-list{padding:12px 20px;background:#fff;font:400 14px/1.6 Inter,'Goodlight Vietnamese',Arial,sans-serif} body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-list .ftwp-anchor{padding:8px 0;color:#555;background:transparent;text-decoration:none;border:0;box-shadow:none} body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-list .ftwp-anchor:hover,body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-list .ftwp-active{background:transparent;color:#111;font-weight:600} body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-list .ftwp-anchor:before,body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-list .ftwp-anchor:after{display:none} body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-list .ftwp-sub{padding-left:16px} body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-trigger{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #d2d2d2;border-radius:0;background:#fff;color:#111;box-shadow:none;filter:none;opacity:1;transition:border-color .25s ease,color .25s ease} body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-trigger:hover{border-color:#111;background:#fff;color:#111;filter:none} body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-trigger .ftwp-icon{font-size:18px;line-height:1;color:inherit} body.gl-astro-home #ftwp-container.ftwp-wrap button:focus-visible,body.gl-astro-home #ftwp-container.ftwp-wrap a:focus-visible{outline:1px solid #777;outline-offset:3px} @media(min-width:1001px){ .gl-nav-group>.ar-dropdown.gl-mega-menu{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:24px;row-gap:16px;padding:28px 40px} .gl-nav-children a{line-height:20px;padding:5px 0}.gl-nav-column>a{line-height:22px;padding:8px 0;margin-bottom:4px} .gl-header .gl-mega-menu .gl-nav-all{margin-top:0} .gl-nav-group:not(:has(.gl-mega-menu)){position:relative} .gl-nav-group>.ar-dropdown:not(.gl-mega-menu){left:0;right:auto;width:300px;padding:24px;max-height:calc(100dvh - 170px)} } body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-contents:hover #ftwp-header{background:#fff;color:#111} body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-trigger .ftwp-trigger-icon{font-size:18px;line-height:1;color:inherit} body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-list .ftwp-text{font-weight:400;color:inherit} body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-list .ftwp-text:before,body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-list .ftwp-text:after{display:none} body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-list .ftwp-active .ftwp-text{font-weight:600} body.gl-astro-home .ftwp-heading-target:before{display:none} .single-post.gl-astro-home .gl-page-content h2{font-size:30px;line-height:1.35;margin:36px 0 20px}.single-post.gl-astro-home .gl-page-content h3{font-size:24px;line-height:1.4;margin:28px 0 16px} .ar-product-track article{min-width:0}.ar-product-track h3{overflow-wrap:break-word;line-height:26px;padding-right:8px} @media(max-width:760px){.single-post.gl-astro-home .gl-page-content h2{font-size:26px}.single-post.gl-astro-home .gl-page-content h3{font-size:22px}} .gl-astro-home .gl-filter-panel>a,.gl-astro-home .gl-filter-panel>a:hover{border-bottom-color:var(--gl-hairline)} @media(min-width:1001px){.gl-nav-group:has(#gl-submenu-news)>.ar-dropdown{left:auto;right:0}} body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-list.ftwp-strong-first>.ftwp-item>.ftwp-anchor .ftwp-text{font-size:14px;font-weight:400} body.gl-astro-home #ftwp-container.ftwp-wrap #ftwp-list.ftwp-strong-first>.ftwp-item>.ftwp-anchor.ftwp-active .ftwp-text{font-weight:600} /* ======================================================== AUTHENTIC ASTRO LIGHTING DESIGN SYSTEM (ASTROLIGHTING.COM) ======================================================== */ :root { --gl-font: 'Inter', Arial, Helvetica, sans-serif; --gl-ease-astro: cubic-bezier(0.19, 1, 0.22, 1); --gl-color-slate: #8499a5; --gl-color-body: #505050; --gl-color-heading: #000000; --gl-color-muted: #707070; --gl-border-light: #eaeaea; --gl-border-dark: #d2d2d2; --gl-bg-card: #f7f7f8; --gl-section-gap: 90px; } body.gl-astro-home, body.gl-astro-home input, body.gl-astro-home button, body.gl-astro-home select, body.gl-astro-home textarea { font-family: var(--gl-font) !important; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.gl-astro-home strong, body.gl-astro-home b, body.gl-astro-home dt, body.gl-astro-home th, .text--bold { font-weight: 700 !important; } body.gl-astro-home .hero__subtitle, body.gl-astro-home .text--thin { font-weight: 100 !important; } body.gl-astro-home .text--light { font-weight: 200 !important; } /* ======================================================== 1. GLOBAL ASTRO TYPOGRAPHY & HEADING HIERARCHY ======================================================== */ body.gl-astro-home h1, body.gl-astro-home h2, body.gl-astro-home h3, body.gl-astro-home h4, body.gl-astro-home h5, body.gl-astro-home h6, .hero__title, .detail__title, .product-listing-item__title { font-family: var(--gl-font) !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: normal !important; color: var(--gl-color-heading); } /* Base Headings & Hierarchy matching Astro extracted CSS */ h1, .hero__title, .hero__text h1, .gl-catalog-hero h1, .gl-page-hero h1, .gl-single-summary h1, .detail__title { font-size: 52px !important; font-size: 3.25rem !important; line-height: 1.1153846154 !important; font-weight: 400 !important; letter-spacing: normal !important; text-transform: none !important; margin: 0 0 16px !important; } @media screen and (max-width: 63.9375em), (max-width: 1024px) { h1, .hero__title, .hero__text h1, .gl-catalog-hero h1, .gl-page-hero h1, .gl-single-summary h1, .detail__title { font-size: 36px !important; font-size: 2.25rem !important; line-height: 1.1111111111 !important; } } h2, .hero__text h2, .ar-section-heading h2, .ar-category-copy h2, .ar-feature-copy h2, .gl-company-banner h2, .gl-reasons h2, .ar-projects h2, .gl-single-detail h2, .gl-page-content h2, .gl-about-copy h2 { font-size: 38px !important; font-size: 2.375rem !important; line-height: 1.1578947368 !important; font-weight: 400 !important; letter-spacing: normal !important; text-transform: none !important; margin: 0 0 20px !important; } @media screen and (max-width: 63.9375em), (max-width: 1024px) { h2, .hero__text h2, .ar-section-heading h2, .ar-category-copy h2, .ar-feature-copy h2, .gl-company-banner h2, .gl-reasons h2, .ar-projects h2, .gl-single-detail h2, .gl-page-content h2, .gl-about-copy h2 { font-size: 26px !important; font-size: 1.625rem !important; line-height: 1.2307692308 !important; } } h3, .hero__text h3, .gl-contact-article h3, .gl-reasons-grid h3, .gl-project-track figcaption h3, .ar-image-grid h3, .gl-page-content h3 { font-size: 22px !important; font-size: 1.375rem !important; line-height: 1.2727272727 !important; font-weight: 400 !important; letter-spacing: normal !important; text-transform: none !important; margin: 0 0 12px !important; } @media screen and (max-width: 63.9375em), (max-width: 1024px) { h3, .hero__text h3, .gl-contact-article h3, .gl-reasons-grid h3, .gl-project-track figcaption h3, .ar-image-grid h3, .gl-page-content h3 { font-size: 18px !important; font-size: 1.125rem !important; line-height: 1.3333333333 !important; } } h4, .hero__text h4 { font-size: 18px !important; font-size: 1.125rem !important; line-height: 1.3333333333 !important; font-weight: 500 !important; letter-spacing: normal !important; text-transform: none !important; } @media screen and (max-width: 63.9375em), (max-width: 1024px) { h4, .hero__text h4 { font-size: 16px !important; font-size: 1rem !important; line-height: 1.375 !important; } } p, .gl-main p, .gl-page-content p, .gl-editorial-content p, .gl-contact-article p, .gl-single-content p { font-size: 16px !important; line-height: 1.625 !important; font-weight: 400 !important; letter-spacing: normal !important; text-transform: none !important; color: var(--gl-color-body) !important; } strong, b, .gl-main strong, .gl-page-content strong { font-weight: 600 !important; } /* Kickers / Eyebrows */ .ar-kicker, .hero__kicker, .gl-eyebrow, .gl-kicker, .gl-about-kicker { font-size: 13px !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 3px !important; color: var(--gl-color-muted) !important; margin-bottom: 12px !important; display: block !important; } /* ======================================================== 2. HERO BANNER: PURE WHITE TYPOGRAPHY & SENTENCE CASE ======================================================== */ .ar-hero, .ar-slide, .ar-hero-copy, .ar-hero-copy h1, .ar-hero-copy .hero__title, .ar-hero-copy h2, .ar-hero-copy .hero__subtitle, .ar-hero-copy p { color: #ffffff !important; } .ar-hero-copy { max-width: 720px !important; z-index: 2 !important; } .ar-hero-copy h1, .ar-hero-copy .hero__title { font-size: 52px !important; font-size: 3.25rem !important; line-height: 1.1153846154 !important; font-weight: 400 !important; letter-spacing: normal !important; text-transform: none !important; color: #ffffff !important; margin: 0 0 16px !important; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6) !important; } @media screen and (max-width: 63.9375em), (max-width: 1024px) { .ar-hero-copy h1, .ar-hero-copy .hero__title { font-size: 36px !important; font-size: 2.25rem !important; line-height: 1.1111111111 !important; } } .ar-hero-copy .hero__subtitle, .hero__subtitle { font-family: 'Inter', Arial, sans-serif !important; font-size: 18px !important; font-size: 1.125rem !important; line-height: 1.2222222222 !important; font-weight: 100 !important; text-transform: uppercase !important; letter-spacing: 4px !important; color: rgba(255, 255, 255, 0.95) !important; margin: 0 0 25px !important; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5) !important; } @media screen and (max-width: 63.9375em), (max-width: 1024px) { .ar-hero-copy .hero__subtitle, .hero__subtitle { font-size: 14px !important; font-size: 0.875rem !important; line-height: 1.2142857143 !important; letter-spacing: 3px !important; margin-bottom: 20px !important; } } .ar-hero-copy .hero__desc, .ar-hero-copy p:not(.hero__subtitle) { font-size: 16px !important; line-height: 1.625 !important; font-weight: 400 !important; color: rgba(255, 255, 255, 0.95) !important; margin: 0 0 26px !important; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6) !important; } .gl-hero-actions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 28px !important; margin-top: 10px !important; } /* ======================================================== 3. ASTRO BUTTONS & UNDERLINE LINKS (.button--border, .button--border-white, .ar-link) ======================================================== */ /* Standard filled buttons */ .button, .gl-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 48px !important; min-height: 48px !important; padding: 0 24px !important; border-radius: 0 !important; font-family: var(--gl-font) !important; font-size: 16px !important; font-size: 1rem !important; line-height: 1.3125 !important; font-weight: 400 !important; letter-spacing: normal !important; text-transform: none !important; text-decoration: none !important; cursor: pointer !important; box-sizing: border-box !important; white-space: nowrap !important; flex-shrink: 0 !important; transition: all 0.2s ease !important; } .button span, .gl-button span { font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; text-transform: none !important; line-height: inherit !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; pointer-events: none !important; } .button--black, .gl-button-dark, .gl-single-actions .gl-button-dark { background-color: #000000 !important; color: #ffffff !important; border: 1px solid #000000 !important; } .button--black:hover, .button--black:focus-visible, .gl-button-dark:hover, .gl-button-dark:focus-visible, .gl-single-actions .gl-button-dark:hover { background-color: #262626 !important; color: #ffffff !important; border-color: #262626 !important; } .button--white { background-color: #ffffff !important; color: #000000 !important; border: 1px solid var(--gl-border-dark) !important; } .button--white:hover, .button--white:focus-visible { border-color: #000000 !important; } .button--ghost, .gl-button-light, .gl-single-actions .gl-button-light { background-color: transparent !important; color: #000000 !important; border: 1px solid var(--gl-border-dark) !important; } .button--ghost:hover, .button--ghost:focus-visible, .gl-button-light:hover, .gl-button-light:focus-visible, .gl-single-actions .gl-button-light:hover { border-color: #000000 !important; color: #000000 !important; background-color: transparent !important; } /* ======================================================== ASTRO UNDERLINE ANIMATED LINKS (.button--border, .button--border-white, .ar-link) ======================================================== */ body.gl-astro-home a.button.button--border, body.gl-astro-home a.button.button--border-white, body.gl-astro-home a.button--border, body.gl-astro-home a.button--border-white, body.gl-astro-home a.ar-link, .button--border, .button--border-white, .ar-link { position: relative !important; display: inline-flex !important; align-items: center !important; background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; height: auto !important; min-height: 0 !important; text-align: left !important; text-decoration: none !important; text-shadow: none !important; cursor: pointer !important; outline: none !important; white-space: nowrap !important; flex-shrink: 0 !important; } body.gl-astro-home a.button.button--border:hover, body.gl-astro-home a.button.button--border:focus, body.gl-astro-home a.button.button--border-white:hover, body.gl-astro-home a.button.button--border-white:focus, body.gl-astro-home a.ar-link:hover, body.gl-astro-home a.ar-link:focus, .button--border:hover, .button--border-white:hover, .ar-link:hover { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } /* Eliminate ALL pseudo-elements on the outer container itself - prevents duplicate/stacked lines! */ body.gl-astro-home a.button.button--border::before, body.gl-astro-home a.button.button--border::after, body.gl-astro-home a.button.button--border-white::before, body.gl-astro-home a.button.button--border-white::after, body.gl-astro-home a.button--border::before, body.gl-astro-home a.button--border::after, body.gl-astro-home a.button--border-white::before, body.gl-astro-home a.button--border-white::after, body.gl-astro-home a.ar-link:has(span)::before, body.gl-astro-home a.ar-link:has(span)::after, .button--border::before, .button--border::after, .button--border-white::before, .button--border-white::after { display: none !important; content: none !important; } /* Colors */ .button--border, .button--border span, a.button--border, a.button--border span, .ar-link, .ar-link span { color: #000000 !important; } .button--border-white, .button--border-white span, a.button--border-white, a.button--border-white span, .ar-hero .button--border-white, .ar-hero .button--border-white span, .gl-company-banner .button--border-white, .gl-company-banner .button--border-white span { color: #ffffff !important; } /* Typography of inner span */ .button--border span, .button--border-white span, .ar-link span { position: relative !important; display: inline-flex !important; align-items: center !important; padding: 0 0 8px 0 !important; margin: 0 !important; font-family: var(--gl-font) !important; font-size: 18px !important; font-size: 1.125rem !important; line-height: 1 !important; font-weight: 400 !important; letter-spacing: normal !important; text-transform: none !important; white-space: nowrap !important; } @media screen and (max-width: 63.9375em), (max-width: 1024px) { .button--border span, .button--border-white span, .ar-link span { font-size: 16px !important; font-size: 1rem !important; padding-bottom: 6px !important; } } /* Baseline underline (20% opacity) on span */ .button--border span::before, .button--border-white span::before, .ar-link span::before { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: 1px !important; background-color: currentColor !important; opacity: 0.2 !important; pointer-events: none !important; } /* Active animated hover line (0% -> 100% width with 150ms linear transition) on span */ .button--border span::after, .button--border-white span::after, .ar-link span::after { content: "" !important; position: absolute !important; left: 0 !important; bottom: 0 !important; height: 1px !important; background-color: currentColor !important; width: 0 !important; transform: none !important; transition: width 150ms linear !important; pointer-events: none !important; } /* Fallback underline for .ar-link when no span is present */ .ar-link:not(:has(span)) { position: relative !important; padding-bottom: 8px !important; } .ar-link:not(:has(span))::before { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: 1px !important; background-color: currentColor !important; opacity: 0.2 !important; pointer-events: none !important; } .ar-link:not(:has(span))::after { content: "" !important; position: absolute !important; left: 0 !important; bottom: 0 !important; height: 1px !important; background-color: currentColor !important; width: 0 !important; transform: none !important; transition: width 150ms linear !important; pointer-events: none !important; } .ar-link:not(:has(span)):hover::after { width: 100% !important; } /* Hover expand */ .button--border:hover span::after, .button--border:active span::after, .button--border:focus-visible span::after, .button--border-white:hover span::after, .button--border-white:active span::after, .button--border-white:focus-visible span::after, .ar-link:hover span::after, .ar-link:active span::after, .ar-link:focus-visible span::after, a:hover .button--border span::after, a:hover .button--border-white span::after { width: 100% !important; } /* Arrow Icon styling (Astro exact dimensions 7x10) */ .icon-arrow-mid-right, .gl-icon-small-right, .button--border svg, .button--border-white svg, .ar-link svg { width: 7px !important; height: 10px !important; margin-left: 10px !important; fill: currentColor !important; flex: 0 0 7px !important; display: inline-block !important; vertical-align: middle !important; transition: transform 0.2s ease !important; } .button--border:hover svg, .button--border-white:hover svg, .ar-link:hover svg { transform: translateX(3px) !important; } /* ======================================================== 4. PRODUCT CARDS & LISTING ITEMS (CATALOG & HOME TRACK) ======================================================== */ .product-listing-item, .gl-archive-grid .gl-product-card, .ar-product-item { display: flex !important; flex-direction: column !important; text-align: left !important; background: transparent !important; position: relative !important; border: 0 !important; } .product-listing-item__image-wrap, .gl-archive-grid .gl-product-card__image, .ar-product-item .ar-product-image { aspect-ratio: 1 / 1 !important; background-color: var(--gl-bg-card, #f5f5f5) !important; border: 0 !important; border-radius: 0 !important; overflow: hidden !important; position: relative !important; display: block !important; padding: 0 !important; } .product-listing-item__image-wrap img, .gl-archive-grid .gl-product-card__image img, .ar-product-item .ar-product-image img { width: 100% !important; height: 100% !important; object-fit: contain !important; mix-blend-mode: multiply !important; transition: transform 0.6s var(--gl-ease-astro) !important; } .gl-product-card:hover .gl-product-card__image img, .ar-product-item:hover .ar-product-image img, .product-listing-item:hover img { transform: scale(1.05) !important; } .product-listing-item__title, .gl-archive-grid .gl-product-card__body h3, .ar-product-item h3 { font-family: var(--gl-font) !important; font-size: 18px !important; font-size: 1.125rem !important; line-height: 1.4444444444 !important; font-weight: 400 !important; letter-spacing: normal !important; text-transform: none !important; color: #000000 !important; margin: 12px 0 4px !important; transition: color 0.2s ease !important; } .gl-product-card:hover .gl-product-card__body h3 a, .ar-product-item:hover h3 a { color: #000000 !important; } .product-listing-item__text, .ar-product-sku, .gl-product-code { font-size: 14px !important; font-size: 0.875rem !important; line-height: 1.7142857143 !important; font-weight: 400 !important; color: var(--gl-color-muted) !important; letter-spacing: normal !important; text-transform: none !important; } /* Hide price on catalog to maintain clean B2B architectural catalogue aesthetic */ .gl-product-card__price, .gl-archive-grid .price, .product-listing-item__price { display: none !important; } /* ======================================================== 5. PRODUCT DETAIL PAGE (ASTRO STYLE) ======================================================== */ .detail__title, .gl-single-summary h1 { font-size: 38px !important; font-size: 2.375rem !important; line-height: 1.1578947368 !important; font-weight: 400 !important; letter-spacing: normal !important; text-transform: none !important; color: #000000 !important; margin: 0 0 10px !important; } @media screen and (max-width: 63.9375em), (max-width: 1024px) { .detail__title, .gl-single-summary h1 { font-size: 26px !important; font-size: 1.625rem !important; line-height: 1.2307692308 !important; } } /* Variant Choice Buttons */ .gl-product-options .gl-option-group { margin-bottom: 22px !important; } .gl-product-options .gl-option-group legend { font-size: 13px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: normal !important; color: var(--gl-color-muted) !important; margin-bottom: 10px !important; display: block !important; } .gl-product-options .gl-option-button, .gl-option-button, label.gl-option-button, body.gl-astro-home label.gl-option-button { border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; display: inline-flex !important; cursor: pointer !important; position: relative !important; line-height: normal !important; } .gl-product-options .gl-option-button input, .gl-option-button input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 0 !important; height: 0 !important; } .gl-product-options .gl-option-button span, .gl-option-button span, label.gl-option-button > span { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 38px !important; min-height: 38px !important; min-width: 58px !important; padding: 0 18px !important; border: 1px solid var(--gl-border-dark) !important; border-radius: 0 !important; background: #ffffff !important; color: #111111 !important; font-family: var(--gl-font) !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: normal !important; text-transform: none !important; cursor: pointer !important; box-sizing: border-box !important; transition: all 0.15s ease !important; } .gl-product-options .gl-option-button:hover span, .gl-option-button:hover span, label.gl-option-button:hover > span { border-color: #000000 !important; color: #000000 !important; } .gl-product-options .gl-option-button input:checked + span, .gl-option-button input:checked + span, label.gl-option-button input:checked + span { background: #000000 !important; color: #ffffff !important; border-color: #000000 !important; } /* Detail Navigation Tabs (Astro pdp-tabs style) */ .gl-detail-nav { border-bottom: 1px solid var(--gl-border-light) !important; padding: 0 !important; gap: 40px !important; margin-bottom: 40px !important; display: flex !important; align-items: center !important; } .gl-detail-nav a { font-size: 16px !important; font-weight: 400 !important; letter-spacing: normal !important; text-transform: none !important; color: var(--gl-color-muted) !important; position: relative !important; padding: 16px 0 !important; text-decoration: none !important; transition: color 0.2s ease !important; } .gl-detail-nav a:hover, .gl-detail-nav a.is-active, .gl-detail-nav a:first-child { color: #000000 !important; } .gl-detail-nav a::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -1px !important; height: 2px !important; background-color: transparent !important; transition: background-color 0.2s ease !important; } .gl-detail-nav a:first-child::after, .gl-detail-nav a.is-active::after { background-color: #000000 !important; } /* ======================================================== 6. CONTACT PAGE (ASTRO WHERE TO BUY STYLE) ======================================================== */ .gl-contact-grid { display: grid !important; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) !important; gap: 60px !important; align-items: start !important; padding-bottom: 60px !important; } .gl-contact-company h2 { font-size: 24px !important; font-weight: 400 !important; letter-spacing: normal !important; text-transform: none !important; line-height: 1.3 !important; color: #000000 !important; margin-bottom: 8px !important; } .gl-contact-company p { font-size: 14px !important; color: var(--gl-color-muted) !important; letter-spacing: normal !important; margin: 0 !important; } .gl-contact-article { display: grid !important; grid-template-columns: 180px minmax(0, 1fr) !important; gap: 24px !important; padding: 24px 0 !important; border-top: 0 !important; border-bottom: 1px solid var(--gl-border-light) !important; align-items: start !important; } .gl-contact-article h3 { font-family: var(--gl-font) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: normal !important; text-transform: none !important; color: #000000 !important; margin: 0 0 10px !important; padding: 0 !important; } .gl-contact-article div p { font-size: 15px !important; line-height: 1.65 !important; color: #505050 !important; margin-bottom: 10px !important; } .gl-contact-article div p:last-child { margin-bottom: 0 !important; } .gl-contact-article a:not(.ar-link):not(.button) { color: #000000 !important; text-decoration: underline !important; text-decoration-color: var(--gl-border-dark) !important; text-underline-offset: 4px !important; transition: all 0.2s ease !important; } .gl-contact-article a:not(.ar-link):not(.button):hover { text-decoration-color: #000000 !important; color: #000000 !important; } .gl-contact-grid iframe { position: sticky !important; top: 110px !important; height: 520px !important; border: 1px solid var(--gl-border-light) !important; border-radius: 0 !important; } /* ======================================================== 7. FOOTER DESIGN SYSTEM (ASTRO FOOTER) ======================================================== */ .gl-footer { background-color: #000000 !important; color: #ffffff !important; width: 100% !important; padding: 0 !important; margin: 0 !important; display: block !important; border: none !important; } .gl-footer__inner { max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; padding: 60px 0 30px !important; box-sizing: border-box !important; } @media (max-width: 1550px) { .gl-footer__inner.ar-container { margin-left: 40px !important; margin-right: 40px !important; padding-left: 0 !important; padding-right: 0 !important; } } @media (max-width: 760px) { .gl-footer__inner.ar-container { margin-left: 20px !important; margin-right: 20px !important; padding: 40px 0 20px !important; } } .gl-footer__grid { display: grid !important; grid-template-columns: 1.5fr 1fr 1fr !important; gap: 40px !important; } /* Fallback if .gl-footer doesn't have .gl-footer__inner */ .gl-footer:not(:has(.gl-footer__inner)) { max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; padding: 60px 40px 30px !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: 1.5fr 1fr 1fr !important; gap: 40px !important; } .gl-footer img, .gl-footer__brand img { background: transparent !important; background-color: transparent !important; border: 0 !important; padding: 0 !important; max-width: 120px !important; max-height: 70px !important; object-fit: contain !important; margin: 0 0 20px !important; filter: none !important; } .gl-footer h3, .gl-footer__brand h3, .gl-footer__col h3 { font-family: var(--gl-font) !important; font-size: 16px !important; font-weight: 500 !important; letter-spacing: normal !important; text-transform: none !important; color: #ffffff !important; margin: 0 0 16px !important; } .gl-footer p, .gl-footer__brand p { color: rgba(255, 255, 255, 0.72) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.7 !important; margin: 0 0 8px !important; } .gl-footer a, .gl-footer span, .gl-footer-contact { color: rgba(255, 255, 255, 0.72) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.85 !important; text-decoration: none !important; transition: color 0.2s ease !important; } .gl-footer a:hover, .gl-footer a:focus-visible, .gl-footer-contact:hover { color: #ffffff !important; text-decoration: underline !important; text-underline-position: under !important; text-underline-offset: 4px !important; } .gl-footer-contact { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 12px !important; } .gl-footer-contact svg { width: 18px !important; height: 18px !important; stroke: currentColor !important; } .gl-footer-socials { display: flex !important; gap: 14px !important; margin-top: 16px !important; } .gl-footer-socials a { display: inline-flex !important; align-items: center !important; justify-content: center !important; color: rgba(255, 255, 255, 0.72) !important; transition: color 0.2s ease !important; } .gl-footer-socials a:hover { color: #ffffff !important; text-decoration: none !important; } .gl-footer-socials svg { width: 18px !important; height: 18px !important; fill: currentColor !important; } .gl-footer__bottom, .gl-footer__bottom p, .gl-footer__bottom div, .gl-footer__bottom span { grid-column: 1 / -1 !important; color: rgba(255, 255, 255, 0.45) !important; border-top: 1px solid rgba(255, 255, 255, 0.12) !important; padding-top: 20px !important; margin-top: 36px !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; display: flex !important; justify-content: space-between !important; align-items: center !important; } @media screen and (max-width: 900px) { .gl-footer__inner, .gl-footer:not(:has(.gl-footer__inner)) { padding: 50px 24px 25px !important; } .gl-footer__grid, .gl-footer:not(:has(.gl-footer__inner)) { grid-template-columns: 1fr 1fr !important; gap: 30px !important; } .gl-footer__brand { grid-column: 1 / -1 !important; } } @media screen and (max-width: 600px) { .gl-footer__inner, .gl-footer:not(:has(.gl-footer__inner)) { padding: 40px 20px 20px !important; } .gl-footer__grid, .gl-footer:not(:has(.gl-footer__inner)) { grid-template-columns: 1fr !important; gap: 25px !important; } } /* ======================================================== 8. COMPANY BANNER OVERLAY TEXT ======================================================== */ .gl-company-banner, .gl-company-banner h2, .gl-company-banner p, .gl-company-banner .ar-kicker, .gl-company-banner .ar-link { color: #ffffff !important; } .gl-company-banner h2 { font-size: 38px !important; font-size: 2.375rem !important; line-height: 1.1578947368 !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: normal !important; margin-bottom: 16px !important; } @media screen and (max-width: 63.9375em), (max-width: 1024px) { .gl-company-banner h2 { font-size: 26px !important; font-size: 1.625rem !important; line-height: 1.2307692308 !important; } } .gl-company-banner p { font-size: 16px !important; line-height: 1.625 !important; color: rgba(255, 255, 255, 0.9) !important; } .gl-company-banner .ar-kicker { font-size: 13px !important; font-weight: 400 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.8) !important; margin-bottom: 12px !important; } /* ======================================================== 9. NAVIGATION & HEADER STANDARDS ======================================================== */ .gl-nav a, .ar-nav-products > a, .gl-nav-trigger { font-size: 15px !important; font-weight: 400 !important; letter-spacing: normal !important; text-transform: none !important; color: inherit !important; } .gl-nav-column > a { font-size: 15px !important; font-weight: 500 !important; letter-spacing: normal !important; text-transform: none !important; color: #000000 !important; } .gl-nav-children a { font-size: 14px !important; font-weight: 400 !important; color: #666666 !important; } /* Page editorial banners (e.g. policy and warranty) */ .gl-page-banner { margin: 0 0 36px !important; width: 100% !important; overflow: hidden !important; background: #f7f7f8; } .gl-page-banner img { width: 100% !important; height: auto !important; display: block !important; } /* Ensure header logo and footer logo display at crisp optimal scale */ .gl-logo { display: flex !important; align-items: center !important; line-height: 1 !important; text-decoration: none !important; } .gl-logo:after, .gl-header .gl-logo:after, .gl-reference-home .gl-header .gl-logo:after { display: none !important; content: none !important; } .gl-logo img { height: 38px !important; max-height: 38px !important; width: auto !important; display: block !important; object-fit: contain !important; filter: none !important; } .gl-logo .gl-logo-white { display: none !important; } .gl-logo .gl-logo-dark { display: block !important; } .gl-reference-home .gl-header:not(.is-scrolled):not(.gl-menu-active):not(.header--active):not(.gl-search-open) .gl-logo .gl-logo-white { display: block !important; } .gl-reference-home .gl-header:not(.is-scrolled):not(.gl-menu-active):not(.header--active):not(.gl-search-open) .gl-logo .gl-logo-dark { display: none !important; } @media (max-width: 760px) { .gl-logo img { height: 30px !important; max-height: 30px !important; } } /* Header gradient overlay on reference home */ .gl-reference-home .gl-header { position: absolute !important; inset: 0 0 auto !important; background: linear-gradient(180deg, rgba(5,10,18,0.75) 0%, rgba(5,10,18,0.25) 75%, transparent 100%) !important; color: #fff !important; border-bottom: none !important; box-shadow: none !important; transition: background-color .25s ease, color .25s ease !important; z-index: 50 !important; } .gl-reference-home .gl-header.is-scrolled, .gl-reference-home .gl-header.header--active, .gl-reference-home .gl-header.gl-search-open, .gl-reference-home .gl-header.gl-menu-active, .gl-header.gl-menu-active { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; background: #ffffff !important; background-color: #ffffff !important; color: #111111 !important; border-bottom: 1px solid #eaeaea !important; box-shadow: none !important; } .gl-reference-home .gl-header.gl-menu-active .ar-utility, .gl-header.gl-menu-active .ar-utility, .gl-reference-home .gl-header.gl-menu-active .gl-header__bar, .gl-header.gl-menu-active .gl-header__bar { background: #ffffff !important; background-color: #ffffff !important; color: #111111 !important; } .gl-reference-home .gl-header.gl-menu-active .ar-utility, .gl-header.gl-menu-active .ar-utility { border-bottom: 1px solid #eaeaea !important; } .gl-reference-home .gl-header.gl-menu-active .gl-logo .gl-logo-white, .gl-header.gl-menu-active .gl-logo .gl-logo-white { display: none !important; } .gl-reference-home .gl-header.gl-menu-active .gl-logo .gl-logo-dark, .gl-header.gl-menu-active .gl-logo .gl-logo-dark { display: block !important; } .gl-header.gl-menu-active .gl-nav, .gl-header.gl-menu-active .gl-nav > a, .gl-header.gl-menu-active .gl-nav-trigger, .gl-header.gl-menu-active .ar-utility a, .gl-header.gl-menu-active .gl-top-search button { color: #111111 !important; } .gl-header.gl-menu-active .gl-top-search input { color: #111111 !important; } .gl-header.gl-menu-active .gl-top-search input::placeholder { color: #666666 !important; } .gl-header.gl-menu-active .gl-nav-trigger:after { background-color: #111111 !important; } /* Hero carousel & artwork presentation */ .ar-hero { height: clamp(650px, 45vw, 850px) !important; position: relative !important; color: white !important; background: #0b1522 !important; overflow: hidden !important; } .ar-slide > img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; padding-top: 40px !important; background-color: #0b1522 !important; } .ar-slide:after { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(180deg, rgba(5,10,18,0.25) 0%, transparent 35%, rgba(0,0,0,0.4) 100%) !important; pointer-events: none !important; } .ar-hero-actions { position: absolute !important; left: 80px !important; bottom: 45px !important; top: auto !important; transform: none !important; display: flex !important; flex-wrap: wrap !important; gap: 16px !important; z-index: 10 !important; } .ar-hero-copy { position: static !important; transform: none !important; } .ar-hero-copy .hero__titles-outer { display: none !important; } .ar-dots { position: absolute !important; right: 80px !important; bottom: 45px !important; display: flex !important; gap: 10px !important; z-index: 10 !important; } @media (max-width: 760px) { .ar-hero { height: 480px !important; } .ar-slide > img { padding-top: 25px !important; } .ar-hero-actions { left: 16px !important; right: 16px !important; bottom: 46px !important; gap: 8px !important; justify-content: flex-start !important; } .ar-hero-actions .button { padding: 7px 12px !important; font-size: 12px !important; white-space: nowrap !important; } .ar-dots { right: auto !important; left: 50% !important; bottom: 14px !important; transform: translateX(-50%) !important; } } /* Footer brand logo presentation */ .gl-footer__brand img { max-width: 170px !important; max-height: 44px !important; width: auto !important; height: auto !important; object-fit: contain !important; margin-bottom: 24px !important; filter: none !important; background: none !important; } /* ======================================================== 10. ASTRO POLISH & REGRESSION PREVENTION ======================================================== */ /* Buttons & Underline links no-wrap enforcement */ .button, .button span, .button--border, .button--border span, .button--border-white, .button--border-white span, .ar-link, .ar-link span, .gl-button, .gl-button span { white-space: nowrap !important; flex-shrink: 0 !important; } .ar-section-heading .button, .ar-section-heading .ar-link, .ar-section-heading a, .ar-category-copy .button, .ar-category-copy .ar-link, .ar-feature-copy .button, .ar-feature-copy .ar-link, .gl-company-banner .button, .gl-company-banner .ar-link { flex: 0 0 auto !important; width: max-content !important; max-width: none !important; white-space: nowrap !important; } .button--border svg, .button--border-white svg, .ar-link svg, .gl-icon-small-right, .icon-arrow-mid-right { flex-shrink: 0 !important; display: inline-block !important; vertical-align: middle !important; } /* Spaces Card Headings (Astro Style: Crisp White on Photography, dark on awaiting-photo placeholder) */ @media (min-width: 761px) { .ar-image-grid>a:not(:has(img[src*="woocommerce-placeholder"])) .gl-feature-heading h3, .ar-image-grid>a:not(:has(img[src*="woocommerce-placeholder"])) h3, .gl-spaces .ar-image-grid>a:not(:has(img[src*="woocommerce-placeholder"])) h3 { color: #ffffff !important; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45) !important; } .ar-image-grid>a:not(:has(img[src*="woocommerce-placeholder"])) .gl-feature-arrow { color: #ffffff !important; } .ar-image-grid>a:not(:has(img[src*="woocommerce-placeholder"])) h3:after { background: #ffffff !important; } .ar-image-grid>a:not(:has(img[src*="woocommerce-placeholder"])):after { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.65) 100%) !important; z-index: 1 !important; pointer-events: none !important; } /* For placeholder cards awaiting photography */ .ar-image-grid>a:has(img[src*="woocommerce-placeholder"]) { background: #f0efeb !important; } .ar-image-grid>a:has(img[src*="woocommerce-placeholder"]) .gl-feature-heading h3, .ar-image-grid>a:has(img[src*="woocommerce-placeholder"]) h3 { color: #111111 !important; text-shadow: none !important; } .ar-image-grid>a:has(img[src*="woocommerce-placeholder"]) .gl-feature-arrow { color: #111111 !important; } .ar-image-grid>a:has(img[src*="woocommerce-placeholder"]) h3:after { background: #111111 !important; } .gl-feature-heading { z-index: 2 !important; } } /* Ensure Unified Astro Pagination across both Shop, Blog, Spaces and Search */ .woocommerce-pagination, nav.woocommerce-pagination, .gl-pagination, .product-listing__pagination { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 10px !important; width: 100% !important; margin: 50px auto 40px !important; padding: 0 !important; box-sizing: border-box !important; border: none !important; background: transparent !important; box-shadow: none !important; list-style: none !important; } .gl-pagination:has(.viewing-summary), .product-listing__pagination { flex-direction: column !important; gap: 0 !important; } .gl-pagination .pagination__links, .woocommerce-pagination .pagination__links, .pagination__links { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .woocommerce-pagination ul, .woocommerce-pagination ul.page-numbers, .gl-pagination ul, .gl-pagination ul.page-numbers, ul.page-numbers { display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; gap: 10px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; border: none !important; } .woocommerce-pagination li, .gl-pagination li, ul.page-numbers li { display: inline-flex !important; margin: 0 !important; padding: 0 !important; list-style: none !important; border: none !important; background: transparent !important; } /* Individual page number items (Authentic Astro: Hairline bottom-only border 1px solid #d2d2d2, no box) */ .woocommerce-pagination li > a, .woocommerce-pagination li > span, .gl-pagination > a, .gl-pagination > span, .gl-pagination li > a, .gl-pagination li > span, .gl-pagination .page-numbers, .pagination__link, .pagination__next, .pagination__prev, ul.page-numbers li > a, ul.page-numbers li > span, a.page-number, span.page-number, a.page-numbers:not(ul), span.page-numbers:not(ul) { font-family: Inter, Arial, Helvetica, sans-serif !important; font-size: 18px !important; font-size: 1.125rem !important; line-height: 1 !important; font-weight: 200 !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; display: grid !important; place-items: center !important; box-sizing: border-box !important; padding: 0 !important; border: none !important; border-bottom: 1px solid #d2d2d2 !important; border-radius: 0 !important; background: transparent !important; color: #000000 !important; text-decoration: none !important; box-shadow: none !important; transition: border-color 150ms ease-in, color 150ms ease-in !important; } .woocommerce-pagination li > a:hover, .gl-pagination > a:hover, .gl-pagination li > a:hover, .gl-pagination a.page-numbers:hover, .pagination__link:hover, .pagination__next:hover, .pagination__prev:hover, ul.page-numbers li > a:hover, a.page-numbers:hover { border-bottom-color: #000000 !important; color: #000000 !important; background: transparent !important; } /* Active Page Item */ .woocommerce-pagination li > span.current, .woocommerce-pagination li > a.current, .gl-pagination > span.current, .gl-pagination > a.current, .gl-pagination li > span.current, .gl-pagination span.page-numbers.current, .gl-pagination a.page-numbers[aria-current="page"], .pagination__link--active, ul.page-numbers li > span.current, span.page-numbers.current, span.page-number.current { border: none !important; border-bottom: 1px solid #000000 !important; background: transparent !important; color: #000000 !important; font-weight: 400 !important; cursor: default !important; } /* Dots ellipsis */ .woocommerce-pagination li > span.dots, .gl-pagination > span.dots, .gl-pagination li > span.dots, .gl-pagination .page-numbers.dots, .pagination__gap, ul.page-numbers li > span.dots, ul.page-numbers span.dots, span.page-numbers.dots { border: none !important; border-bottom: none !important; background: transparent !important; color: #707070 !important; width: 30px !important; min-width: 30px !important; padding: 0 !important; cursor: default !important; display: grid !important; place-items: center !important; } /* Prev / Next SVG icons inside pagination */ .gl-pagination a.page-numbers.prev svg, .gl-pagination a.page-numbers.next svg, .pagination__prev svg, .pagination__next svg { width: 7px !important; height: 10px !important; display: block !important; } /* Fixed TOC Minimalist Header & Expand/Collapse Chevron */ #ftwp-container.ftwp-wrap #ftwp-header, #ftwp-container #ftwp-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 20px !important; background: #ffffff !important; border-bottom: 1px solid var(--gl-border-light, #eaeaea) !important; min-height: 52px !important; box-sizing: border-box !important; } #ftwp-container.ftwp-wrap #ftwp-header-title, #ftwp-container #ftwp-header-title { font-family: var(--gl-font) !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.4 !important; color: #111111 !important; margin: 0 !important; padding: 0 !important; order: 1 !important; flex: 1 1 auto !important; } #ftwp-container.ftwp-wrap #ftwp-header-control, #ftwp-container #ftwp-header-control { display: none !important; } #ftwp-container.ftwp-wrap #ftwp-header-minimize, #ftwp-container #ftwp-header-minimize { order: 2 !important; margin-left: auto !important; width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; border: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; padding: 0 !important; position: relative !important; color: #111111 !important; font-size: 0 !important; line-height: 0 !important; transition: opacity 0.2s ease !important; } #ftwp-container.ftwp-wrap #ftwp-header-minimize:hover, #ftwp-container #ftwp-header-minimize:hover { opacity: 0.6 !important; } #ftwp-container.ftwp-wrap #ftwp-header-minimize::before, #ftwp-container #ftwp-header-minimize::before { display: none !important; content: none !important; } #ftwp-container.ftwp-wrap #ftwp-header-minimize::after, #ftwp-container #ftwp-header-minimize::after { content: "" !important; display: block !important; width: 10px !important; height: 6px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23111111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='m1 1 4 4 4-4'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; transition: transform 0.25s cubic-bezier(0.19, 1, 0.22, 1) !important; } /* Collapsed: Chevron points DOWN */ #ftwp-container.ftwp-wrap #ftwp-header-minimize.ftwp-icon-collapse::after, #ftwp-container #ftwp-header-minimize.ftwp-icon-collapse::after, #ftwp-contents[data-colexp="collapse"] #ftwp-header-minimize::after { transform: none !important; } /* Expanded: Chevron rotates 180deg to point UP */ #ftwp-container.ftwp-wrap #ftwp-header-minimize.ftwp-icon-expand::after, #ftwp-container #ftwp-header-minimize.ftwp-icon-expand::after, #ftwp-contents[data-colexp="expand"] #ftwp-header-minimize::after { transform: rotate(180deg) !important; } /* ======================================================== ASTRO REFERENCE - COMPLETE CATALOG REDESIGN (ASTROLIGHTING.COM) ======================================================== */ /* 1. SIDEBAR & ACCORDION (MENU CẤP 3) */ body.gl-catalog-page aside.filters h2, body.gl-catalog-page .gl-filter-panel h2, body.gl-astro-home .gl-filter-panel h2, body.gl-astro-home .filters h2, .gl-filter-panel h2, .filters h2 { font-family: Inter, Arial, Helvetica, sans-serif !important; font-size: 18px !important; font-size: 1.125rem !important; font-weight: 200 !important; /* Mỏng nhẹ chuẩn Astro */ line-height: 1.3333333333 !important; color: #000 !important; letter-spacing: normal !important; text-transform: none !important; margin: 0 0 20px 0 !important; padding: 0 !important; } .gl-filter-panel .gl-catalog-nav-categories { display: flex !important; flex-direction: column !important; margin: 0 0 24px 0 !important; padding: 0 !important; } .gl-filter-panel .gl-filter-category-item { border-bottom: 1px solid var(--gl-hairline, #eaeaea) !important; margin: 0 !important; padding: 0 !important; } .gl-filter-panel .gl-filter-category-header { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; min-height: 46px !important; } .gl-filter-panel a.gl-filter-category-link { display: flex !important; align-items: center !important; justify-content: flex-start !important; flex: 1 1 auto !important; padding: 13px 0 !important; border-bottom: none !important; background: transparent !important; color: #555 !important; font-family: Inter, Arial, Helvetica, sans-serif !important; font-size: 15px !important; line-height: 1.4 !important; font-weight: 200 !important; /* Mỏng nhẹ chuẩn Astro */ text-decoration: none !important; box-shadow: none !important; transition: color 0.2s ease !important; } .gl-filter-panel a.gl-filter-category-link span { text-decoration: none !important; font-weight: inherit !important; } .gl-filter-panel a.gl-filter-category-link:hover { color: #000 !important; } .gl-filter-panel a.gl-filter-category-link[aria-current="page"], .gl-filter-panel .gl-filter-category-item.is-active > .gl-filter-category-header a.gl-filter-category-link { font-weight: 400 !important; /* Regular thay vì bold 600 */ color: #000 !important; } .gl-filter-panel .gl-filter-category-toggle { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; width: 36px !important; height: 44px !important; min-width: 36px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; cursor: pointer !important; color: #707070 !important; border-radius: 0 !important; transition: color 0.2s ease !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; } .gl-filter-panel .gl-filter-category-toggle:hover { color: #000 !important; } .gl-filter-panel .gl-filter-category-toggle:focus-visible { outline: 1px solid #111 !important; outline-offset: 1px !important; } /* Dấu + và - mỏng nhẹ chuẩn icon-plus hairline của Astro */ .gl-filter-panel .gl-accordion-plus, .filters .gl-accordion-plus { width: 10px !important; height: 10px !important; display: block !important; stroke: currentColor !important; stroke-width: 0.75 !important; fill: none !important; overflow: visible !important; pointer-events: none !important; } .gl-filter-panel .gl-accordion-plus line, .filters .gl-accordion-plus line { transform-origin: 5.5px 5.5px !important; transition: transform 0.25s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.2s ease !important; } .gl-filter-panel .gl-filter-category-toggle[aria-expanded="true"] .gl-accordion-plus .gl-icon-v, .gl-filter-panel .gl-filter-category-item.is-open > .gl-filter-category-header .gl-accordion-plus .gl-icon-v, .filters .gl-filter-category-toggle[aria-expanded="true"] .gl-accordion-plus .gl-icon-v, .filters .gl-filter-category-item.is-open > .gl-filter-category-header .gl-accordion-plus .gl-icon-v { transform: rotate(90deg) scaleY(0) !important; opacity: 0 !important; } /* Level 3 Subcategories List */ .gl-filter-panel .gl-filter-subcategory-list { list-style: none !important; margin: 0 !important; padding: 0 0 14px 16px !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } .gl-filter-panel .gl-filter-subcategory-list[hidden] { display: none !important; } .gl-filter-panel li.gl-filter-subcategory-item { list-style: none !important; margin: 0 !important; padding: 0 !important; } .gl-filter-panel a.gl-filter-subcategory-link { display: block !important; width: 100% !important; padding: 6px 0 !important; border-bottom: none !important; background: transparent !important; font-family: Inter, Arial, Helvetica, sans-serif !important; font-size: 13.5px !important; line-height: 1.45 !important; color: #666 !important; font-weight: 200 !important; /* Mỏng nhẹ chuẩn Astro */ text-decoration: none !important; box-shadow: none !important; transition: color 0.15s ease, transform 0.15s ease !important; } .gl-filter-panel a.gl-filter-subcategory-link span { text-decoration: none !important; font-weight: inherit !important; } .gl-filter-panel a.gl-filter-subcategory-link:hover { color: #000 !important; transform: translateX(2px) !important; } .gl-filter-panel a.gl-filter-subcategory-link[aria-current="page"] { color: #000 !important; font-weight: 400 !important; } /* Form attribute filters (Công suất, Nhiệt độ màu) */ .gl-filter-panel .gl-attribute-filters label { font-family: Inter, Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 200 !important; color: #333 !important; margin: 16px 0 6px !important; display: block !important; } .gl-filter-panel .gl-attribute-filters select { font-family: Inter, Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 200 !important; border: 1px solid #d2d2d2 !important; border-radius: 0 !important; padding: 8px 12px !important; background-color: #fff !important; color: #111 !important; width: 100% !important; } .gl-filter-panel .gl-attribute-filters button[type="submit"] { margin-top: 18px !important; background: #000 !important; color: #fff !important; font-family: Inter, Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; height: 44px !important; border: none !important; border-radius: 0 !important; cursor: pointer !important; width: 100% !important; transition: background-color 0.2s ease !important; } .gl-filter-panel .gl-attribute-filters button[type="submit"]:hover { background: #222 !important; } .gl-filter-panel a.gl-clear-filter { display: block !important; font-family: Inter, Arial, Helvetica, sans-serif !important; font-size: 13px !important; font-weight: 200 !important; color: #666 !important; text-decoration: underline !important; margin-top: 12px !important; padding: 0 !important; border-bottom: none !important; text-align: left !important; } .gl-filter-panel a.gl-clear-filter:hover { color: #000 !important; } /* 2. TOOLBAR / RESULT BAR (product-listing__result-bar) */ .gl-catalog-toolbar, .product-listing__result-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 0 0 15px 0 !important; /* Spacing chính xác 15px giữa toolbar và product grid */ padding: 0 !important; width: 100% !important; } .gl-catalog-toolbar p, .gl-catalog-toolbar .woocommerce-result-count, .product-listing__result-bar p, .product-listing__result-bar [data-live="pagination_summary"] { font-family: Inter, Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-size: .75rem !important; line-height: 1.6666666667 !important; font-weight: 200 !important; /* Mỏng 200 chuẩn Astro */ color: #333 !important; margin: 0 !important; padding: 0 !important; letter-spacing: normal !important; } .gl-view-filter, .product-listing__view-filter { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-family: Inter, Arial, Helvetica, sans-serif !important; } .gl-view-filter #gl-ordering-label, .product-listing__view-filter label { font-size: 12px !important; font-weight: 200 !important; color: #555 !important; margin: 0 !important; } .gl-view-filter select.orderby, .product-listing__view-filter select { font-family: Inter, Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; color: #000 !important; border: none !important; border-bottom: 1px solid #d2d2d2 !important; border-radius: 0 !important; background-color: transparent !important; padding: 2px 18px 2px 2px !important; cursor: pointer !important; outline: none !important; } .gl-view-filter select.orderby:hover, .product-listing__view-filter select:hover { border-bottom-color: #000 !important; } /* 3. PRODUCT GRID & ITEMS (product-listing__items js-styles__listing-items) */ .gl-product-grid.gl-archive-grid, .product-listing__items { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 30px !important; column-gap: 20px !important; margin: 0 !important; background: transparent !important; border: none !important; } .gl-product-card.product-listing-item { background: #fff !important; border: none !important; display: flex !important; flex-direction: column !important; position: relative !important; } .gl-product-card__image.product-listing-item__image-wrap { display: block !important; aspect-ratio: 1/1 !important; background: #f7f7f8 !important; padding: 32px !important; position: relative !important; overflow: hidden !important; } .gl-product-card__image img { width: 100% !important; height: 100% !important; object-fit: contain !important; mix-blend-mode: multiply !important; transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1) !important; } .gl-product-card__image:hover img { transform: scale(1.04) !important; } .gl-product-card__body.product-listing-item__info { padding: 16px 0 8px 0 !important; min-height: auto !important; display: flex !important; flex-direction: column !important; } .gl-product-card__body h3.product-listing-item__title, .product-listing-item__title { font-family: Inter, Arial, Helvetica, sans-serif !important; font-size: 16px !important; font-size: 1rem !important; line-height: 1.4 !important; font-weight: 400 !important; letter-spacing: normal !important; margin: 0 0 6px 0 !important; color: #000 !important; } .product-listing-item__title a { color: inherit !important; text-decoration: none !important; } .gl-product-card__price.product-listing-item__price { font-family: Inter, Arial, Helvetica, sans-serif !important; font-size: 15px !important; line-height: 1.2 !important; font-weight: 400 !important; color: #8499a5 !important; margin: 0 !important; } /* 4. PAGINATION (.pagination & viewing-summary) */ .gl-pagination, .product-listing__pagination { padding: 56px 0 20px !important; margin: 0 !important; border: none !important; background: transparent !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } .gl-pagination .woocommerce-pagination, .product-listing__pagination .woocommerce-pagination, .pagination { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; border: none !important; } .pagination__links { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .woocommerce-result-count .screen-reader-text { display: none !important; } .gl-pagination ul.page-numbers, .product-listing__pagination ul.page-numbers { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; border: none !important; } .gl-pagination ul.page-numbers li, .product-listing__pagination ul.page-numbers li { list-style: none !important; margin: 0 !important; padding: 0 !important; border: none !important; } /* Pagination Number Items & Arrows (Astro Style: Chỉ viền dưới mỏng, không viền xung quanh) */ .gl-pagination .page-numbers, .gl-pagination a.page-numbers, .gl-pagination span.page-numbers, .pagination__link, .pagination__next, .pagination__prev { font-family: Inter, Arial, Helvetica, sans-serif !important; font-size: 18px !important; font-size: 1.125rem !important; line-height: 1 !important; font-weight: 200 !important; /* Mỏng 200 */ width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; display: grid !important; place-items: center !important; border: none !important; border-bottom: 1px solid #d2d2d2 !important; /* Chỉ viền dưới */ border-radius: 0 !important; background: transparent !important; color: #000 !important; box-shadow: none !important; text-decoration: none !important; transition: border-color 150ms ease-in, color 150ms ease-in !important; } .gl-pagination a.page-numbers:hover, .pagination__link:hover, .pagination__next:hover, .pagination__prev:hover { border-bottom-color: #000 !important; color: #000 !important; } /* Active Page Number */ .gl-pagination span.page-numbers.current, .gl-pagination a.page-numbers[aria-current="page"], .pagination__link--active { border-bottom: 1px solid #000 !important; font-weight: 400 !important; color: #000 !important; background: transparent !important; } /* Dots */ .gl-pagination .page-numbers.dots { border-bottom: none !important; width: 40px !important; color: #707070 !important; } /* Prev / Next SVG icons inside pagination */ .gl-pagination a.page-numbers.prev svg, .gl-pagination a.page-numbers.next svg { width: 7px !important; height: 10px !important; } /* Viewing Summary (dưới phân trang giống Astro: Displaying 1 - 30 of 155 results) */ .viewing-summary, .viewing-summary p, .viewing-summary .woocommerce-result-count { font-family: Inter, Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-size: .875rem !important; line-height: 1.2142857143 !important; font-weight: 200 !important; margin: 30px 0 0 0 !important; padding: 0 !important; text-align: center !important; color: #505050 !important; letter-spacing: normal !important; } /* 5. RESPONSIVE BREAKPOINTS (ASTRO MATCH) */ @media (max-width: 1099px) { .gl-catalog-page .gl-catalog-layout { display: flex !important; flex-direction: column !important; margin: 0 20px !important; padding: 20px 0 50px !important; gap: 15px !important; } .gl-catalog-page .gl-catalog-toolbar.product-listing__result-bar { position: relative !important; padding-top: 13px !important; margin-bottom: 15px !important; } .gl-catalog-page .gl-catalog-toolbar.product-listing__result-bar::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; height: 1px !important; background-color: #eaeaea !important; } .gl-product-grid.gl-archive-grid, .product-listing__items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 20px !important; column-gap: 15px !important; } } @media (max-width: 639px) { .gl-catalog-page .gl-catalog-layout { margin: 0 16px !important; } .gl-product-grid.gl-archive-grid, .product-listing__items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 18px !important; column-gap: 10px !important; } .gl-product-card__image.product-listing-item__image-wrap { padding: 16px !important; } .gl-product-card__body h3.product-listing-item__title { font-size: 14px !important; } .gl-product-card__price.product-listing-item__price { font-size: 13px !important; } .gl-pagination .page-numbers, .gl-pagination a.page-numbers, .gl-pagination span.page-numbers { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; font-size: 16px !important; } } @media (prefers-reduced-motion: reduce) { .gl-filter-panel .gl-accordion-plus path, .gl-filter-panel a.gl-filter-subcategory-link, .gl-product-card__image img { transition: none !important; transform: none !important; } } /* ======================================================== 6. ASTRO MOBILE HAMBURGER MORPHING TO X & MENU DRAWER ======================================================== */ .header__toggle { display: none; background: transparent; border: none; padding: 0; cursor: pointer; color: inherit; } @media screen and (max-width: 1024px) { .header__toggle, .gl-header .ar-menu-toggle.header__toggle, .gl-header .ar-menu-toggle { display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; cursor: pointer !important; color: currentColor !important; z-index: 1001 !important; } } .header__toggle .nav-icon { width: 22px !important; height: 16px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; position: relative !important; } .header__toggle .nav-icon div, .header__toggle .nav-icon::before, .header__toggle .nav-icon::after { content: "" !important; display: block !important; width: 22px !important; height: 1.5px !important; background-color: currentColor !important; transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.25s ease !important; transform-origin: center !important; } /* Morph to X when aria-expanded="true" or header is active */ .header__toggle[aria-expanded="true"] .nav-icon::before, .header--active .header__toggle .nav-icon::before { transform: translateY(7.25px) rotate(45deg) !important; } .header__toggle[aria-expanded="true"] .nav-icon div, .header--active .header__toggle .nav-icon div { opacity: 0 !important; transform: scaleX(0) !important; } .header__toggle[aria-expanded="true"] .nav-icon::after, .header--active .header__toggle .nav-icon::after { transform: translateY(-7.25px) rotate(-45deg) !important; } /* Mobile Drawer Full Screen Overlay */ @media (max-width: 1024px) { body.gl-nav-open { overflow: hidden !important; } body.gl-nav-open .gl-header, .gl-header.header--active { background: #ffffff !important; color: #111111 !important; } body.gl-nav-open .gl-header .ar-utility, .gl-header.header--active .ar-utility { display: none !important; } body.gl-nav-open .gl-logo-white, .gl-header.header--active .gl-logo-white { display: none !important; } body.gl-nav-open .gl-logo-dark, .gl-header.header--active .gl-logo-dark { display: block !important; } body.gl-nav-open .gl-support { display: none !important; } .gl-header .gl-nav { display: none; position: fixed !important; left: 0 !important; right: 0 !important; top: 65px !important; bottom: 0 !important; width: 100vw !important; height: auto !important; min-height: calc(100vh - 65px) !important; background: #ffffff !important; color: #111111 !important; padding: 0 24px 80px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; box-shadow: none !important; border-top: 1px solid #eaeaea !important; z-index: 9999 !important; } .gl-header .gl-nav.is-open { display: flex !important; flex-direction: column !important; align-items: stretch !important; } .gl-header .gl-nav-group { width: 100% !important; border-bottom: 1px solid #eaeaea !important; } .gl-header .gl-nav-trigger { font-family: Inter, Arial, Helvetica, sans-serif !important; font-size: 18px !important; font-weight: 400 !important; letter-spacing: normal !important; height: 56px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; color: #111111 !important; padding: 0 !important; text-align: left !important; } .gl-header .gl-nav > a { font-family: Inter, Arial, Helvetica, sans-serif !important; font-size: 18px !important; font-weight: 400 !important; letter-spacing: normal !important; height: 56px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; border-bottom: 1px solid #eaeaea !important; color: #111111 !important; text-decoration: none !important; text-align: left !important; padding: 0 !important; width: 100% !important; } .gl-header .gl-nav > a:after { display: none !important; } .gl-header .ar-dropdown { padding: 10px 0 20px 10px !important; } .gl-header .gl-nav-column > a { font-size: 16px !important; font-weight: 400 !important; color: #333333 !important; padding: 8px 0 !important; } .gl-header .gl-nav-children a { font-size: 14px !important; font-weight: 300 !important; color: #666666 !important; padding: 6px 0 !important; } } /* Source collection: Astro get-the-look geometry, customer Home!A4 content. */ .gl-astro-home #sources.gl-source-collection{--source-gutter:max(80px,calc((100cqw - 1440px)/2));container-type:inline-size;display:block;margin:0 0 80px;padding:0;background:transparent;overflow:hidden;border:0} #sources.gl-source-collection .block__content{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-width:0;padding:60px 40px 100px 0;background:#133041;color:#fff} #sources .block__subtitle{font-size:18px;font-weight:300;line-height:1.2222;letter-spacing:4px;margin:0 0 5px;color:#9cb1c2} #sources .block__title{font-size:38px;font-weight:400;line-height:1.158;margin:0 0 20px;max-width:100%;color:#fff} #sources.gl-source-collection .block__image{position:relative;min-width:0;margin:0;aspect-ratio:5/3;width:calc(100% + var(--source-gutter));background:#133041;overflow:hidden} #sources .gl-source-collection-image{display:block;width:100%;height:100%;object-fit:cover} #sources .block__carousel-container{grid-column:1/-1;min-width:0;margin:0;padding:0;border:0;background:transparent} #sources .block__carousel{position:relative;z-index:2;margin-top:-80px} #sources .gl-collection-products-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*16px)/4);gap:16px;padding:0 var(--source-gutter);margin:0;scroll-padding-inline:var(--source-gutter);box-sizing:content-box;width:calc(100% - 2*var(--source-gutter));overflow-x:auto;overflow-y:hidden} #sources .block__carousel>.ar-arrows{position:absolute;right:var(--source-gutter);top:-56px;display:flex;gap:10px;height:36px;padding:0;margin:0;z-index:3} #sources .block__carousel>.ar-arrows button{margin:0;background:transparent;color:#111;border-color:#777} #sources .block__carousel>.ar-arrows button:disabled{opacity:.3} #sources .block__carousel>.ar-arrows button:not(:disabled):hover{background:#111;color:#fff;border-color:#111} #sources .ar-product-item{min-width:0;margin:0;padding:0} #sources .ar-product-image{aspect-ratio:1;height:auto} #sources .ar-product-image img{width:100%;height:100%;object-fit:cover} #sources+.gl-spaces{padding-top:0} @media(max-width:1023px){ .gl-astro-home #sources.gl-source-collection{--source-gutter:15px;grid-template-columns:minmax(0,1fr);margin-bottom:40px} #sources.gl-source-collection .block__image{grid-row:1} #sources.gl-source-collection .block__content{grid-row:2;padding:35px 15px 96px} #sources .block__subtitle{font-size:14px;line-height:1.2143;letter-spacing:3px;margin-bottom:10px} #sources .block__title{font-size:26px;line-height:1.2308;margin-bottom:15px} #sources .block__carousel{margin-top:-40px} #sources .gl-collection-products-track{grid-auto-columns:calc((100% - 15px)/2);gap:15px} #sources .block__carousel>.ar-arrows{top:-51px} } #sources .ar-product-item h3{font-size:16px!important;font-weight:400;line-height:1.25!important;margin:15px 0 8px} #sources .ar-product-sku{font-size:14px;line-height:1.4;margin:0;color:#666} #sources .ar-arrows:has(button:first-child:disabled):has(button:last-child:disabled){visibility:hidden} @media(max-width:1023px){#sources .ar-product-item h3{font-size:14px!important;line-height:1.4!important;margin-top:12px}#sources .ar-product-sku{font-size:12px}} #sources .gl-source-wrap{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,calc((100% - 40px)/3)) minmax(0,1fr);max-width:1600px;margin-inline:auto;padding-inline:80px;background:#133041} #sources .gl-source-wrap{box-shadow:0 0 0 100vmax #133041;clip-path:inset(0 -100vmax)} #sources .block__subtitle{font-size:18px!important;line-height:22px!important;font-weight:200!important;letter-spacing:4px!important;margin-bottom:5px!important} @media(max-width:1023px){ #sources .gl-source-wrap{display:grid;grid-template-columns:minmax(0,1fr);padding-inline:0} #sources.gl-source-collection .block__image{width:100%;grid-row:1} #sources.gl-source-collection .block__content{grid-row:2;padding:35px 15px 96px} } @media(max-width:1023px){#sources .block__subtitle{font-size:14px!important;line-height:17px!important;letter-spacing:3px!important;margin-bottom:10px!important}} /* Mobile scale measured against Astro at 390px. */ .gl-mobile-tools,.gl-mobile-search{display:none} @media(max-width:1024px){ body .gl-header .ar-utility{display:none!important} body .gl-header .gl-header__bar{height:70px!important;min-height:70px!important;padding:0 15px!important;gap:20px!important;flex-wrap:nowrap!important} body .gl-header .gl-logo{margin-right:auto;flex:0 1 auto} body .gl-header .gl-logo img{max-width:110px!important;height:32px!important;object-fit:contain} body .gl-header .gl-mobile-tools{display:flex;gap:24px;align-items:center;margin-left:auto;color:inherit} .gl-mobile-tools button,.gl-mobile-tools a{display:flex!important;align-items:center;justify-content:center;width:20px!important;height:24px!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;background:none!important;color:inherit!important;line-height:1!important} .gl-mobile-tools svg{width:20px;height:20px} body .gl-header .ar-menu-toggle{width:20px!important;height:24px!important;min-height:0!important;margin:0!important;padding:0!important;flex:0 0 20px} body .gl-header .gl-nav{top:70px!important;min-height:0!important;height:calc(100dvh - 70px)!important;width:100%!important;padding:0 0 30px!important;gap:0!important;justify-content:flex-start!important;align-content:start!important} body .gl-header .gl-nav.is-open{justify-content:flex-start!important} body .gl-header .gl-nav>a,body .gl-header .gl-nav-trigger{height:59px!important;min-height:59px!important;flex:0 0 auto!important;padding:20px 15px!important;margin:0!important;font-size:18px!important;line-height:18px!important;border-bottom:1px solid #eaeaea!important;box-sizing:border-box;display:flex!important;align-items:center!important} body .gl-header .ar-nav-products{flex:0 0 auto!important;width:100%!important;margin:0!important} body .gl-header .ar-dropdown{padding:10px 15px 20px!important} body .gl-header.gl-search-open{background:#fff!important;color:#111!important} body .gl-header .gl-mobile-search:not([hidden]){position:absolute;display:flex;top:70px;left:0;right:0;padding:20px 15px;background:#fff;color:#111;gap:12px;border-top:1px solid #eaeaea;box-shadow:none} .gl-mobile-search input{min-width:0;flex:1;margin:0!important;box-shadow:none!important;border:0!important;border-bottom:1px solid #ccc!important;background:transparent!important;height:40px} .gl-mobile-search button{margin:0;padding:0 12px;background:#111;color:white;border:0;font-size:14px;white-space:nowrap} .gl-astro-home .ar-arrows{display:none!important} .gl-astro-home .ar-container{width:calc(100% - 30px)!important;margin-inline:auto!important} .gl-astro-home .ar-categories{display:flex!important;flex-direction:column!important;padding:40px 0!important;gap:24px!important} .gl-astro-home .ar-category-rail{order:0;width:100%;min-width:0} .gl-astro-home .ar-category-copy{order:1;padding:0 15px!important;align-self:stretch!important} .gl-astro-home #gl-category-track{padding:0 15px!important;gap:16px!important;scroll-padding-inline:15px;grid-auto-columns:136px!important} .gl-astro-home #gl-category-track>a{flex:0 0 136px!important;width:136px!important} .gl-astro-home #gl-category-track img{height:auto!important;aspect-ratio:525/625;object-fit:cover} .gl-astro-home #gl-category-track .category-preview__title,.gl-astro-home #gl-category-track span{font-size:16px!important;line-height:22px!important;margin-top:15px!important} .gl-astro-home main h2{font-size:26px!important;line-height:32px!important;font-weight:400!important} .gl-astro-home .ar-section-heading{gap:15px!important;flex-wrap:wrap!important;margin-bottom:25px!important} .gl-astro-home .ar-section-heading h2{min-width:0;white-space:normal!important} .gl-astro-home .gl-spaces,.gl-astro-home .gl-reasons,.gl-astro-home .ar-projects{padding-top:0!important;padding-bottom:40px!important;margin-top:40px!important;margin-bottom:40px!important} .gl-astro-home .gl-spaces .ar-image-grid{gap:15px!important} .gl-astro-home .gl-company-banner>div{padding:35px 15px!important} .gl-astro-home .gl-company-banner p{font-size:14px!important;line-height:22px!important} .gl-astro-home .gl-reasons-grid{gap:25px 15px!important} .gl-astro-home .gl-reasons-grid h3{font-size:18px!important;line-height:24px!important} .gl-astro-home .gl-reasons-grid p,.gl-astro-home .gl-project-track p{font-size:14px!important;line-height:22px!important} #sources.gl-source-collection .block__content{padding-bottom:70px!important} .gl-astro-home .gl-project-track{grid-auto-columns:calc((100% - 15px)/1.15)!important;gap:15px!important} } @media(max-width:1024px){ body .gl-header.gl-search-open .gl-logo-white{display:none!important} body .gl-header.gl-search-open .gl-logo-dark{display:block!important} body .gl-header .gl-mobile-search input:focus{outline:none!important;box-shadow:none!important;border:0!important;border-bottom:1px solid #ccc!important} .gl-astro-home .ar-hero .button--border-white,.gl-astro-home .ar-hero .button--border-white span{color:#fff!important;text-shadow:0 1px 8px #0006} .gl-astro-home .ar-hero .button--border-white svg{color:#fff!important;stroke:currentColor} .gl-astro-home .ar-hero{height:430px!important;min-height:0!important} .gl-astro-home .gl-spaces .ar-image-grid h3,.gl-astro-home .gl-spaces .gl-feature-heading h3{color:#111!important;text-shadow:none!important;font-size:18px!important;line-height:24px!important} .gl-astro-home .gl-spaces .ar-image-grid h3:after{background:#111!important} .gl-astro-home .gl-spaces .gl-feature-arrow{color:#111!important} } @media(max-width:1024px){ .gl-astro-home .gl-spaces .ar-image-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:auto!important;align-items:start!important} .gl-astro-home .gl-spaces .ar-image-grid>a{grid-column:auto!important;grid-row:auto!important;width:auto!important;min-width:0!important;height:auto!important;margin:0!important} .gl-astro-home .gl-spaces .ar-image-grid>a img{width:100%!important;height:auto!important;aspect-ratio:4/5;object-fit:cover} } /* Shared audit corrections: titles, pagination and footer. */ .ar-product-item h3,.gl-product-card h3,.product-listing-item__title,#gl-category-track .category-preview__title,#gl-category-track span{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-width:0!important;max-width:100%!important} .gl-footer__bottom p,.gl-footer__bottom>div{margin:0;color:#777;font-size:12px;line-height:18px;font-weight:400;text-transform:uppercase;letter-spacing:1px} .viewing-summary{display:block!important;text-align:center;font-size:14px!important;line-height:20px;margin:20px 0 0!important;color:#111} .pagination__prev--disabled,.pagination__next--disabled{opacity:.3;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px} .gl-filter-close,.gl-filter-done{display:none} .gl-filter-modal-heading h2{margin-bottom:24px} @media(max-width:1099px){ body.gl-filter-modal-open{overflow:hidden} body.gl-filter-modal-open .gl-header,body.gl-filter-modal-open .gl-support{visibility:hidden} body .gl-filter-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:20px 15px!important;background:#fff!important;border:0!important;border-bottom:1px solid #eaeaea!important;color:#111!important;font-size:18px!important;font-weight:400!important;text-transform:none!important;margin:0!important} body #gl-catalog-filters.is-open{display:block!important;position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;max-height:none!important;overflow-y:auto!important;padding:70px 15px 85px!important;background:#fff!important;z-index:100000!important;box-sizing:border-box} #gl-catalog-filters .gl-filter-modal-heading{position:sticky;top:-70px;height:70px;background:#fff;display:flex;justify-content:center;align-items:center;border-bottom:1px solid #eaeaea;margin:-70px -15px 20px;z-index:2} #gl-catalog-filters .gl-filter-modal-heading h2{font-size:22px!important;line-height:28px!important;margin:0!important} #gl-catalog-filters .gl-filter-close{position:absolute;right:15px;top:15px;display:block;border:0;background:none;color:#111;font-size:32px;font-weight:300;line-height:40px;width:40px;height:40px;margin:0;padding:0} #gl-catalog-filters .gl-filter-done{display:block;position:fixed;bottom:15px;left:15px;width:calc(100% - 30px);height:40px;margin:0;padding:0 15px;border:1px solid #111;background:#fff;color:#111;font-size:16px;text-transform:none;box-shadow:0 0 0 15px #fff;z-index:3} } @media(max-width:1024px){ body.gl-nav-open .gl-header,body .gl-header:has(.gl-mobile-search:not([hidden])){transform:none!important;filter:none!important;backdrop-filter:none!important;contain:none!important} body.gl-nav-open .gl-header__bar{transform:none!important;filter:none!important;contain:none!important} body .gl-header .gl-nav.is-open{position:fixed!important;top:70px!important;bottom:0!important;height:calc(100dvh - 70px)!important;max-height:none!important;min-height:calc(100dvh - 70px)!important;padding-bottom:env(safe-area-inset-bottom)!important} body .gl-header .gl-header__bar{padding-inline:15px!important} body .gl-header .gl-mobile-search:not([hidden]){position:fixed!important;inset:70px 0 auto!important;width:100%!important;max-width:none!important;margin:0!important;box-sizing:border-box!important;padding:20px 15px!important} body .gl-header .gl-mobile-search input{font-size:18px!important;line-height:24px!important;border:0!important;border-bottom:1px solid #eaeaea!important;border-radius:0!important;padding:8px 0!important} body .gl-header .gl-mobile-search button{background:none!important;color:#111!important;width:30px!important;padding:0!important;border:0!important} .gl-mobile-search button svg{width:20px;height:20px} body .gl-header .gl-nav-trigger[aria-expanded=true]{justify-content:center!important;gap:10px!important} .gl-nav-trigger[aria-expanded=true]:after{content:'';width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);margin-top:-4px} .header__toggle[aria-expanded=true] .nav-icon:before{transform:translateY(7.25px) rotate(-45deg)!important} .header__toggle[aria-expanded=true] .nav-icon:after{transform:translateY(-7.25px) rotate(45deg)!important} .gl-astro-home .ar-hero{height:auto!important;min-height:0!important;aspect-ratio:16/9} .gl-astro-home .ar-slide>img{object-fit:contain!important} .gl-astro-home .ar-hero-copy{bottom:24px!important;top:auto!important;transform:none!important} .gl-astro-home .ar-dots{bottom:8px!important} .gl-astro-home .ar-hero .button{font-size:12px!important} .gl-astro-home .gl-spaces .ar-image-grid{display:flex!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;scrollbar-width:none;gap:15px!important;padding-bottom:8px;touch-action:pan-x pan-y pinch-zoom} .gl-astro-home .gl-spaces .ar-image-grid>a{flex:0 0 80%!important;width:80%!important;scroll-snap-align:start} .gl-astro-home .gl-spaces .ar-image-grid>a img{aspect-ratio:5/4} } @media(max-width:1099px){#gl-catalog-filters .gl-filter-modal-heading h2{width:auto!important;text-align:center!important;padding:0!important;flex:0 0 auto!important}#gl-catalog-filters .gl-filter-category-link{font-size:18px!important;color:#111!important}} @media(max-width:1024px){body .gl-header .gl-nav-trigger[aria-expanded=true]:after{display:block!important;content:''!important;position:static!important;inset:auto!important;width:7px!important;height:7px!important;opacity:1!important;background:none!important;border-right:1px solid currentColor!important;border-bottom:1px solid currentColor!important;transform:rotate(45deg)!important;flex:0 0 7px!important}} /* Editorial and product mobile corrections found during template audit. */ @media(max-width:1024px){ body.gl-astro-home{--gl-header-offset:70px} body.gl-astro-home .gl-contact-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:30px!important;padding-bottom:40px!important} body.gl-astro-home .gl-contact-directory{width:100%!important;min-width:0} body.gl-astro-home .gl-contact-article{display:block!important;padding:30px 0!important} body.gl-astro-home .gl-contact-article h3{font-size:18px!important;line-height:26px!important;margin:0 0 10px!important} body.gl-astro-home .gl-contact-article div{width:100%!important;min-width:0} body.gl-astro-home .gl-contact-article p{font-size:16px!important;line-height:26px!important;overflow-wrap:anywhere} body.gl-astro-home .gl-contact-company h2{font-size:26px!important;line-height:32px!important} body.gl-astro-home .gl-contact-grid iframe{position:static!important;width:100%!important;height:300px!important;min-height:0!important} body.gl-astro-home .gl-detail-nav{display:flex!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;gap:24px!important;padding:0 0 12px!important;max-height:none!important;white-space:nowrap;touch-action:pan-x pan-y pinch-zoom} .gl-detail-nav::-webkit-scrollbar{display:none} body.gl-astro-home .gl-detail-nav a{flex:0 0 auto;white-space:nowrap;padding:10px 0!important} .gl-news-grid h2{font-size:22px!important;line-height:28px!important} .gl-news-grid article{min-width:0} body.gl-astro-home .gl-page-hero h1{font-size:32px!important;line-height:40px!important} } /* Obsolete mobile hero rules removed to prevent conflicts with modern Astro layout. */ /* Component refinement, measured against Astro mobile catalogue and navigation. */ .gl-page-content table,.gl-single-content table,.gl-spec-section table{width:100%!important;max-width:100%!important;height:auto!important;table-layout:auto} .gl-page-content table td,.gl-single-content table td{height:auto!important;overflow-wrap:anywhere} .gl-single-detail{background:#f5f5f5!important;padding-top:45px!important} .gl-single-detail .gl-spec-section,.gl-single-detail .gl-single-content{border-bottom:0!important} .gl-single-detail .gl-related{border-top:0!important} .gl-reasons-grid article{align-items:center;text-align:center} .gl-reasons-grid img{margin-inline:auto;object-position:center} .gl-mobile-view-heading{display:none} @media(min-width:1025px){.gl-header .gl-header__bar{max-width:1600px!important;width:100%!important;margin-inline:auto!important;padding-inline:40px!important;box-sizing:border-box!important}} @media(max-width:1024px){ body .gl-header .gl-header__bar{max-width:none!important;width:100%!important;margin:0!important;padding-inline:15px!important;box-sizing:border-box!important} body .gl-header .gl-mobile-search input{color:#000!important;border-bottom:1px solid #b2b2b2!important;font-size:18px!important;font-weight:300!important} body .gl-header .gl-mobile-search input::placeholder{color:#777!important;opacity:1!important} body .gl-header .gl-mobile-search button svg{width:20px!important;height:20px!important;stroke-width:1.5} body .gl-header .gl-nav.gl-nav-drilled>*,body .gl-header .gl-nav.gl-nav-drilled .gl-nav-trigger{visibility:hidden!important} body .gl-header .gl-nav .gl-mobile-view{display:block!important;visibility:visible!important;position:fixed!important;inset:70px 0 0!important;width:100%!important;height:calc(100dvh - 70px)!important;max-height:none!important;background:#fff!important;overflow:auto!important;z-index:5!important;margin:0!important;padding:60px 15px 30px!important;box-sizing:border-box!important;border:0!important;transform:none!important} body .gl-header .gl-nav .gl-mobile-view>*{visibility:visible} body .gl-header .gl-nav .gl-mobile-view .gl-mobile-view{z-index:6!important} body .gl-header .gl-mobile-view>.gl-mobile-view-heading{display:flex!important;position:sticky;top:-60px;height:60px;margin:-60px -15px 15px;padding:0 45px;align-items:center;justify-content:center;border-bottom:1px solid #eee;background:#fff;z-index:3;font-size:18px;font-weight:400;text-align:center} body .gl-header .gl-nav-back{position:absolute;left:0;top:0;width:44px;height:60px;margin:0;padding:0;border:0;background:none;color:#000;display:flex;align-items:center;justify-content:center;box-shadow:none} body .gl-header .gl-nav-back svg{width:7px;height:10px} body .gl-header .gl-mobile-view>.gl-nav-column{grid-template-columns:minmax(0,1fr) 30px;border-bottom:1px solid #eee;padding:10px 0} body .gl-header .gl-mobile-view>.gl-nav-column>a{white-space:normal!important;padding-right:10px!important} body .gl-header .gl-nav-trigger[aria-expanded=true]:after{display:none!important} body .gl-header .gl-nav-children.gl-mobile-view>a{padding:15px 0!important;font-size:16px!important;line-height:24px!important} body .gl-single-gallery{display:flex!important;flex-direction:column!important;width:100%!important;min-width:0!important;padding:0!important;gap:15px!important} body .gl-single-gallery .gl-gallery-open{display:block!important;flex:none!important;width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;grid-column:auto!important} body .gl-single-gallery .gl-single-main-img{width:100%!important;height:auto!important;aspect-ratio:1!important;max-height:none!important;object-fit:contain!important} body .gl-single-gallery .gl-thumb-rail{order:2!important;display:block!important;width:calc(100% + 15px)!important;max-width:none!important;padding:0!important;margin-right:-15px!important;overflow:hidden!important} body .gl-single-gallery .gl-single-thumbs{display:flex!important;width:100%!important;max-height:none!important;height:auto!important;padding:0 15px 0 0!important;gap:10px!important;overflow-x:auto!important;scrollbar-width:none!important} body .gl-single-gallery .gl-single-thumbs button{flex:0 0 80px!important;width:80px!important;height:80px!important;margin:0!important} body .gl-single-gallery .gl-thumb-arrow{display:none!important} body .gl-single-detail{padding:30px 15px!important} body #gl-related-track{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:calc((100% - 20px)/2.2)!important;gap:15px!important;overflow-x:auto!important;padding-bottom:15px!important} body #gl-related-track>.ar-product-item{width:auto!important;min-width:0!important;flex:none!important} body #gl-related-track .ar-product-image{height:auto!important;aspect-ratio:1!important} body #gl-related-track h3{font-size:14px!important;line-height:20px!important} } @media(max-width:1099px){ body.gl-astro-home .gl-filter-toggle{height:38px!important;min-height:38px!important;padding:10px 15px!important;border:1px solid #000!important;font-size:16px!important;line-height:16px!important;font-weight:400!important;color:#000!important;background:transparent!important} body.gl-astro-home .gl-filter-toggle svg{width:7px!important;height:10px!important;flex:0 0 7px!important} } .woocommerce form.login,.woocommerce form.register,.woocommerce-form-login,.woocommerce-form-register{border:0!important;box-shadow:none!important;border-radius:0!important;background:transparent!important;padding:0!important} .woocommerce form.login input.input-text,.woocommerce form.register input.input-text{height:44px!important;padding:10px 12px!important;border:1px solid #b2b2b2!important;box-shadow:none!important;border-radius:0!important;font-size:16px!important;background:#fff!important} .woocommerce form.login label,.woocommerce form.register label{font-weight:400!important;font-size:14px!important;margin-bottom:8px!important} .woocommerce form.login .button,.woocommerce form.register .button{border-radius:0!important;min-height:40px!important;font-weight:400!important;text-transform:none!important;letter-spacing:0!important} /* Astro Style Pagination: centered numbers, flex-nowrap, proper SVG arrows */ .pagination { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; gap: 10px !important; margin: 0 auto !important; padding: 0 !important; list-style: none !important; } .pagination__links { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; } .pagination .gl-page-mobile { display: none !important; } .pagination__link, .pagination__link--active, .pagination__prev, .pagination__next, .pagination__gap, .gl-pagination .page-numbers, .gl-page-desktop, .gl-page-mobile { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1 !important; box-sizing: border-box !important; } .pagination__prev svg, .pagination__next svg, .gl-pagination a.page-numbers.prev svg, .gl-pagination a.page-numbers.next svg { width: 7px !important; height: 10px !important; display: block !important; margin: auto !important; flex: 0 0 7px !important; } .pagination__prev--disabled, .pagination__next--disabled { opacity: .25 !important; pointer-events: none !important; cursor: default !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-bottom: 1px solid #e0e0e0 !important; color: #aaa !important; } @media(max-width:600px){ .pagination{gap:8px!important;width:100%!important;justify-content:center!important} .pagination__links{gap:8px!important;width:auto!important} .pagination .gl-page-desktop{display:none!important} .pagination .gl-page-mobile{display:inline-flex!important;align-items:center!important;justify-content:center!important;text-align:center!important} .pagination__links>a,.pagination__links>span,.pagination>a,.pagination>span{ width:36px!important; height:36px!important; min-width:36px!important; flex:0 0 36px!important; padding:0!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; } } @media(max-width:1024px){body .gl-header .gl-mobile-view .gl-submenu-toggle svg{transform:rotate(0deg)!important}} .gl-single-detail{background:#f1f1f1!important} @media(max-width:1024px){ body .gl-header .gl-nav-children.gl-mobile-view>a{color:#111!important;text-decoration:none!important;border-bottom:0!important} body .gl-header .gl-nav-children.gl-mobile-view>a:after{display:none!important} body .gl-single-gallery{width:calc(100% + 30px)!important;margin-inline:-15px!important} body .gl-single-gallery .gl-thumb-rail{width:100%!important;margin:0!important} body .gl-single-gallery .gl-single-thumbs{box-sizing:border-box!important;padding-inline:15px!important} body .gl-single-gallery .gl-single-thumbs button{flex:0 0 50px!important;width:50px!important;min-width:50px!important;height:50px!important;min-height:50px!important;padding:2px!important} } @media(max-width:1024px){body .gl-single-layout .gl-single-gallery{max-width:none!important}} .woocommerce form.login input.input-text,.woocommerce form.register input.input-text{margin-bottom:0!important} @media(max-width:1024px){ body .gl-header .gl-mobile-search:not([hidden]){height:90px!important;padding:20px 15px!important;display:block!important;background:#fff!important} body .gl-header .gl-mobile-search input,body .gl-header.gl-search-open .gl-mobile-search input:focus{width:100%!important;max-width:none!important;height:50px!important;padding:0 30px 18px 0!important;margin:0!important;font-size:24px!important;line-height:29px!important;font-weight:200!important;color:#000!important;border-bottom:1px solid #505050!important} body .gl-header .gl-mobile-search input::placeholder{color:#000!important;opacity:1!important} body .gl-header .gl-mobile-search button{position:absolute!important;top:26px!important;right:15px!important;width:20px!important;height:20px!important;min-width:20px!important;margin:0!important} #customer_login>.col{padding-inline:0!important} } @media(max-width:360px){ .pagination,.pagination__links{gap:4px!important} .pagination__links>a,.pagination__links>span,.pagination>a,.pagination>span{width:30px!important;height:34px!important;min-width:30px!important;flex-basis:30px!important} } /* ======================================================== ASTRO DESIGN CONSISTENCY & REFINED MOBILE/PDP CONTROLS ======================================================== */ /* 1. SINGLE PRODUCT DETAIL - FULL-BLEED GRAY BACKGROUND WITHOUT WIDTH LIMIT OR EXCESS MARGIN */ body.gl-astro-home .gl-single-main, body .gl-single-main { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } body.gl-astro-home .gl-single-layout { margin-bottom: 0 !important; padding-bottom: 60px !important; } body.gl-astro-home .gl-single-detail, body .gl-single-detail, .gl-single-detail { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; box-sizing: border-box !important; } /* 1. FULL-BLEED GRAY SPEC BAND (#f1f1f1) ONLY FOR GL-DETAIL-NAV AND GL-SPEC-SECTION */ .gl-spec-band { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: #f1f1f1 !important; box-sizing: border-box !important; } /* Detail Navigation: NO border-bottom on container; border-bottom placed on tags */ body.gl-astro-home .gl-detail-nav, body .gl-detail-nav { max-width: 1440px !important; margin: 0 auto !important; padding: 30px max(40px, calc((100% - 1440px) / 2)) 0 !important; display: flex !important; align-items: center !important; gap: 36px !important; border: none !important; border-bottom: none !important; box-shadow: none !important; box-sizing: border-box !important; background: transparent !important; } .gl-detail-nav a, body .gl-detail-nav a, body.gl-astro-home .gl-detail-nav a { display: inline-block !important; color: #666666 !important; font-size: 15px !important; font-weight: 400 !important; text-decoration: none !important; padding: 12px 0 !important; margin: 0 !important; border: none !important; border-bottom: 2px solid #cccccc !important; box-shadow: none !important; position: relative !important; transition: color 0.2s ease, border-color 0.2s ease !important; } .gl-detail-nav a:not(.is-active):not(:hover), body .gl-detail-nav a:not(.is-active):not(:hover), body.gl-astro-home .gl-detail-nav a:not(.is-active):not(:hover) { border-bottom: 2px solid #cccccc !important; border-bottom-color: #cccccc !important; color: #666666 !important; } .gl-detail-nav a:hover, .gl-detail-nav a.is-active, body .gl-detail-nav a:hover, body .gl-detail-nav a.is-active, body.gl-astro-home .gl-detail-nav a:hover, body.gl-astro-home .gl-detail-nav a.is-active { color: #111111 !important; border-bottom: 2px solid #111111 !important; border-bottom-color: #111111 !important; } .gl-detail-nav a::after, .gl-detail-nav a::before, body .gl-detail-nav a::after, body .gl-detail-nav a::before, body.gl-astro-home .gl-detail-nav a::after, body.gl-astro-home .gl-detail-nav a::before { display: none !important; content: none !important; } /* Specification Section */ body.gl-astro-home .gl-spec-section, body .gl-spec-section { max-width: 1440px !important; margin: 0 auto !important; padding: 35px max(40px, calc((100% - 1440px) / 2)) 50px !important; box-sizing: border-box !important; background: transparent !important; } body.gl-astro-home .gl-spec-section h2, body.gl-astro-home .gl-single-content h2, body.gl-astro-home .gl-related h2 { font-size: 22px !important; font-weight: 400 !important; line-height: 1.3 !important; margin: 0 0 20px !important; color: #111 !important; } /* Astro Product Attributes Table: - Cột 1 màu đậm hơn (#111), Cột 2 màu nhạt hơn (#666) - Font-size nhỏ hơn (13px) - KHÔNG có border-bottom cho tr */ body.gl-astro-home table.woocommerce-product-attributes, body table.woocommerce-product-attributes, body.gl-astro-home .shop_attributes, body .shop_attributes, body.gl-astro-home .gl-spec-section table { width: 100% !important; max-width: 100% !important; border-collapse: collapse !important; border: none !important; box-shadow: none !important; background: transparent !important; margin: 16px 0 !important; } body.gl-astro-home table.woocommerce-product-attributes tr, body.gl-astro-home .shop_attributes tr, body.gl-astro-home .gl-spec-section tr { border: none !important; border-bottom: none !important; background: transparent !important; box-shadow: none !important; } body.gl-astro-home table.woocommerce-product-attributes th, body.gl-astro-home .shop_attributes th, body.gl-astro-home .gl-spec-section th, body.gl-astro-home .woocommerce-product-attributes-item__label { width: 240px !important; color: #111 !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.6 !important; padding: 7px 20px 7px 0 !important; border: none !important; border-bottom: none !important; background: transparent !important; box-shadow: none !important; text-align: left !important; vertical-align: top !important; } body.gl-astro-home table.woocommerce-product-attributes td, body.gl-astro-home .shop_attributes td, body.gl-astro-home .gl-spec-section td, body.gl-astro-home .woocommerce-product-attributes-item__value { color: #666 !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.6 !important; padding: 7px 0 !important; border: none !important; border-bottom: none !important; background: transparent !important; box-shadow: none !important; text-align: left !important; vertical-align: top !important; } body.gl-astro-home .gl-spec-section td p, body.gl-astro-home .woocommerce-product-attributes-item__value p { margin: 0 !important; padding: 0 !important; color: inherit !important; font-size: inherit !important; line-height: inherit !important; } body.gl-astro-home .gl-spec-section td a, body.gl-astro-home .woocommerce-product-attributes-item__value a { color: #666 !important; text-decoration: none !important; } body.gl-astro-home .gl-spec-section td a:hover, body.gl-astro-home .woocommerce-product-attributes-item__value a:hover { color: #111 !important; text-decoration: underline !important; } /* Sections below gl-spec-band: WHITE background (#ffffff) */ body.gl-astro-home .gl-single-content, body .gl-single-content { max-width: 1440px !important; margin: 0 auto !important; padding: 50px max(40px, calc((100% - 1440px) / 2)) 60px !important; border-top: none !important; box-sizing: border-box !important; background: #ffffff !important; } body.gl-astro-home .gl-related, body .gl-related { max-width: 1440px !important; margin: 0 auto !important; padding: 50px max(40px, calc((100% - 1440px) / 2)) 70px !important; border-top: none !important; box-sizing: border-box !important; background: #ffffff !important; } @media (min-width: 1025px) { body #gl-related-track { grid-auto-columns: calc((100% - 64px) / 5) !important; gap: 16px !important; } body #gl-related-track > .ar-product-item { min-width: 0 !important; width: auto !important; } } /* 2. PRODUCT HERO SUMMARY POLISH */ body .gl-single-summary .gl-breadcrumb { padding: 0 !important; margin: 0 0 16px !important; font-size: 13px !important; color: #777 !important; letter-spacing: normal !important; text-transform: none !important; display: flex !important; align-items: center !important; gap: 8px !important; } body .gl-single-summary .gl-breadcrumb a { color: #777 !important; text-decoration: none !important; } body .gl-single-summary .gl-breadcrumb a:hover { color: #111 !important; } body .gl-single-summary .gl-breadcrumb span { color: #444 !important; } body .gl-single-summary .gl-eyebrow { font-size: 13px !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; color: #777 !important; margin: 0 0 10px !important; font-weight: 400 !important; } body .gl-single-summary h1.detail__title { font-size: clamp(28px, 3.2vw, 42px) !important; font-weight: 400 !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; margin: 0 0 12px !important; color: #111 !important; } body .gl-single-summary .gl-product-code { font-size: 13px !important; color: #777 !important; margin: 0 0 24px !important; } body .gl-single-actions { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin: 28px 0 0 !important; } body .gl-single-actions .button, body .gl-single-actions a.button { height: 48px !important; line-height: 46px !important; font-size: 15px !important; padding: 0 26px !important; border-radius: 0 !important; letter-spacing: 0.02em !important; text-transform: none !important; font-weight: 400 !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body .gl-assurances { border-top: 1px solid #e0e0e0 !important; border-bottom: 1px solid #e0e0e0 !important; padding: 20px 0 !important; margin-top: 28px !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; } body .gl-assurances > div { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 13px !important; color: #333 !important; } body .gl-assurances svg { width: 24px !important; height: 24px !important; min-width: 24px !important; stroke: #222 !important; stroke-width: 1.25 !important; } /* 3. MOBILE & TABLET RESPONSIVE RULES (<= 1024px) */ @media (max-width: 1024px) { /* Viewport-stable mobile header on nav open */ body.gl-nav-open .gl-header, body.gl-reference-home.gl-nav-open .gl-header { position: fixed !important; inset: 0 0 auto !important; transform: none !important; visibility: visible !important; opacity: 1 !important; z-index: 100001 !important; background: #fff !important; color: #111 !important; } /* Single product layout */ body.gl-astro-home .gl-single-layout { padding-top: 0 !important; margin-top: 0 !important; padding-bottom: 35px !important; margin-bottom: 0 !important; } body #gl-product-gallery { padding-left: 15px !important; scroll-padding-left: 15px !important; } /* Spec band on mobile: full-bleed gray background */ .gl-spec-band { width: 100% !important; background: #f1f1f1 !important; } body.gl-astro-home .gl-detail-nav, body .gl-detail-nav { padding: 18px 15px 0 !important; gap: 20px !important; overflow-x: auto !important; white-space: nowrap !important; scrollbar-width: none !important; border: none !important; } body.gl-astro-home .gl-spec-section, body .gl-spec-section { padding: 25px 15px 35px !important; } body.gl-astro-home table.woocommerce-product-attributes th, body.gl-astro-home .shop_attributes th, body.gl-astro-home .gl-spec-section th, body.gl-astro-home .woocommerce-product-attributes-item__label { width: 120px !important; padding-right: 12px !important; } body.gl-astro-home .gl-single-content, body .gl-single-content { padding: 35px 15px 40px !important; background: #ffffff !important; } body.gl-astro-home .gl-related, body .gl-related { padding: 35px 15px 50px !important; background: #ffffff !important; } /* Single action buttons on mobile */ body .gl-single-actions { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; } body .gl-single-actions .button, body .gl-single-actions a.button { width: 100% !important; height: 44px !important; line-height: 42px !important; } /* Assurance items on mobile */ body .gl-assurances { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; padding: 16px 0 !important; } body .gl-assurances > div { flex-direction: column !important; text-align: center !important; font-size: 11px !important; gap: 6px !important; } body .gl-assurances svg { width: 22px !important; height: 22px !important; } /* Homepage Transparent Header & Scrolled / Search Open / Active Header */ body.gl-reference-home .gl-header { position: absolute !important; top: 0 !important; background: transparent !important; color: #ffffff !important; border: none !important; border-bottom: none !important; box-shadow: none !important; } body.gl-reference-home .gl-header .ar-utility, body.gl-reference-home .ar-utility, body.gl-reference-home .gl-header .gl-header__bar, body.gl-reference-home .gl-header__bar { border: none !important; border-bottom: none !important; border-color: transparent !important; } body.gl-reference-home:not(.gl-nav-open) .gl-header:not(.is-scrolled):not(.gl-search-open):not(.header--active):not(.gl-menu-active) .gl-header__bar { background: transparent !important; } /* Ensure header, sub-bars, and all state variants are ALWAYS 100% full width */ .gl-header, .gl-header__bar, .ar-utility { width: 100% !important; max-width: 100% !important; left: 0 !important; right: 0 !important; box-sizing: border-box !important; } body:not(.gl-reference-home) .gl-header { position: sticky !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 100 !important; } body.gl-reference-home .gl-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 100 !important; } /* Scrolled / Search Open / Menu Open states: White background & full width */ body.gl-reference-home .gl-header.is-scrolled, body.gl-reference-home .gl-header.gl-search-open, body.gl-reference-home .gl-header.header--active, body.gl-reference-home .gl-header.gl-menu-active, body.gl-reference-home.gl-nav-open .gl-header, body.gl-nav-open .gl-header, .gl-header.header--active, .gl-header.gl-search-open, .gl-header.gl-menu-active, .gl-header.is-scrolled { background: #ffffff !important; background-color: #ffffff !important; color: #111111 !important; border-bottom: 1px solid #eaeaea !important; box-shadow: none !important; width: 100% !important; max-width: 100% !important; left: 0 !important; right: 0 !important; } body.gl-reference-home .gl-header.is-scrolled, body.gl-reference-home .gl-header.gl-search-open, body.gl-reference-home .gl-header.header--active, body.gl-reference-home .gl-header.gl-menu-active, body.gl-reference-home.gl-nav-open .gl-header, body.gl-nav-open .gl-header, .gl-header.header--active, .gl-header.gl-search-open, .gl-header.gl-menu-active { position: fixed !important; top: 0 !important; } body.gl-reference-home .gl-header.is-scrolled .gl-header__bar, body.gl-reference-home .gl-header.gl-search-open .gl-header__bar, body.gl-reference-home .gl-header.header--active .gl-header__bar, body.gl-reference-home .gl-header.gl-menu-active .gl-header__bar, body.gl-reference-home.gl-nav-open .gl-header .gl-header__bar, body.gl-nav-open .gl-header__bar, .gl-header.header--active .gl-header__bar, .gl-header.gl-search-open .gl-header__bar, .gl-header.gl-menu-active .gl-header__bar, .gl-header.is-scrolled .gl-header__bar { background: #ffffff !important; background-color: #ffffff !important; width: 100% !important; max-width: 100% !important; } /* Default state on reference home: white logo, hide dark logo */ body.gl-reference-home .gl-header .gl-logo .gl-logo-white { display: block !important; } body.gl-reference-home .gl-header .gl-logo .gl-logo-dark { display: none !important; } /* Dark logo & dark controls when search open, menu open, or scrolled */ body.gl-reference-home .gl-header.gl-search-open .gl-logo .gl-logo-white, body.gl-reference-home .gl-header.is-scrolled .gl-logo .gl-logo-white, body.gl-reference-home .gl-header.header--active .gl-logo .gl-logo-white, body.gl-reference-home .gl-header.gl-menu-active .gl-logo .gl-logo-white, body.gl-reference-home.gl-nav-open .gl-header .gl-logo .gl-logo-white, body.gl-nav-open .gl-header .gl-logo .gl-logo-white, .gl-header.header--active .gl-logo .gl-logo-white, .gl-header.gl-search-open .gl-logo .gl-logo-white, .gl-header.gl-menu-active .gl-logo .gl-logo-white, .gl-header.is-scrolled .gl-logo .gl-logo-white { display: none !important; } body.gl-reference-home .gl-header.gl-search-open .gl-logo .gl-logo-dark, body.gl-reference-home .gl-header.is-scrolled .gl-logo .gl-logo-dark, body.gl-reference-home .gl-header.header--active .gl-logo .gl-logo-dark, body.gl-reference-home .gl-header.gl-menu-active .gl-logo .gl-logo-dark, body.gl-reference-home.gl-nav-open .gl-header .gl-logo .gl-logo-dark, body.gl-nav-open .gl-header .gl-logo .gl-logo-dark, .gl-header.header--active .gl-logo .gl-logo-dark, .gl-header.gl-search-open .gl-logo .gl-logo-dark, .gl-header.gl-menu-active .gl-logo .gl-logo-dark, .gl-header.is-scrolled .gl-logo .gl-logo-dark { display: block !important; } body.gl-reference-home .gl-header.gl-search-open .gl-mobile-tools, body.gl-reference-home .gl-header.gl-search-open .gl-mobile-tools button, body.gl-reference-home .gl-header.gl-search-open .gl-mobile-tools a, body.gl-reference-home .gl-header.gl-search-open .header__toggle, body.gl-reference-home .gl-header.header--active .gl-mobile-tools, body.gl-reference-home .gl-header.header--active .gl-mobile-tools button, body.gl-reference-home .gl-header.header--active .gl-mobile-tools a, body.gl-reference-home .gl-header.header--active .header__toggle, body.gl-reference-home.gl-nav-open .gl-header .gl-mobile-tools, body.gl-reference-home.gl-nav-open .gl-header .gl-mobile-tools button, body.gl-reference-home.gl-nav-open .gl-header .gl-mobile-tools a, body.gl-reference-home.gl-nav-open .gl-header .header__toggle, body.gl-nav-open .gl-header .gl-mobile-tools, body.gl-nav-open .gl-header .gl-mobile-tools button, body.gl-nav-open .gl-header .gl-mobile-tools a, body.gl-nav-open .gl-header .header__toggle, .gl-header.header--active .gl-mobile-tools, .gl-header.header--active .gl-mobile-tools button, .gl-header.header--active .gl-mobile-tools a, .gl-header.header--active .header__toggle { color: #111111 !important; } body.gl-reference-home .gl-header.gl-search-open .gl-mobile-tools svg, body.gl-reference-home .gl-header.header--active .gl-mobile-tools svg, body.gl-reference-home.gl-nav-open .gl-header .gl-mobile-tools svg, body.gl-nav-open .gl-header .gl-mobile-tools svg, .gl-header.header--active .gl-mobile-tools svg { stroke: #111111 !important; } body.gl-reference-home .gl-header.gl-search-open .header__toggle .nav-icon div, body.gl-reference-home .gl-header.gl-search-open .header__toggle .nav-icon::before, body.gl-reference-home .gl-header.gl-search-open .header__toggle .nav-icon::after, body.gl-reference-home .gl-header.header--active .header__toggle .nav-icon div, body.gl-reference-home .gl-header.header--active .header__toggle .nav-icon::before, body.gl-reference-home .gl-header.header--active .header__toggle .nav-icon::after, body.gl-reference-home.gl-nav-open .gl-header .header__toggle .nav-icon div, body.gl-reference-home.gl-nav-open .gl-header .header__toggle .nav-icon::before, body.gl-reference-home.gl-nav-open .gl-header .header__toggle .nav-icon::after, body.gl-nav-open .gl-header .header__toggle .nav-icon div, body.gl-nav-open .gl-header .header__toggle .nav-icon::before, body.gl-nav-open .gl-header .header__toggle .nav-icon::after, .gl-header.header--active .header__toggle .nav-icon div, .gl-header.header--active .header__toggle .nav-icon::before, .gl-header.header--active .header__toggle .nav-icon::after { background-color: #111111 !important; } /* HERO BANNER ON MOBILE: 450px height */ body.gl-reference-home .ar-hero, body.gl-astro-home .ar-hero, .ar-hero { height: 450px !important; min-height: 450px !important; aspect-ratio: auto !important; position: relative !important; overflow: hidden !important; } /* HERO IMAGE FOCUS: DỒN TẦM 3/4 (75% center) */ body.gl-reference-home .ar-slide > img, body.gl-astro-home .ar-hero .ar-slide > img, .ar-hero .ar-slide > img { height: 100% !important; width: 100% !important; object-fit: cover !important; object-position: 75% center !important; padding: 0 !important; top: 0 !important; } /* HERO BUTTONS: RAISED HIGHER (bottom: 110px), KEEPING AUTHENTIC ASTRO LINK DESIGN (NO BORDER BOX) */ body.gl-reference-home .ar-hero .hero__buttons, body.gl-astro-home .ar-hero .hero__buttons, .ar-hero .hero__buttons, .hero__buttons.gl-hero-actions.ar-hero-actions, .ar-hero-actions { position: absolute !important; bottom: 110px !important; left: 20px !important; right: 20px !important; z-index: 5 !important; display: flex !important; flex-wrap: wrap !important; gap: 16px !important; justify-content: flex-start !important; margin: 0 !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } body.gl-reference-home .ar-slide.is-active .hero__buttons { opacity: 1 !important; transform: none !important; visibility: visible !important; } body.gl-reference-home .ar-slide.is-active .hero__buttons a, body.gl-reference-home .ar-slide.is-active .hero__buttons span { color: #fff !important; opacity: 1 !important; } /* CAROUSEL DOTS: SHIFTED TO THE RIGHT, 18px ASTRONOMIC SCALE */ body.gl-reference-home .ar-hero .ar-dots, body.gl-astro-home .ar-hero .ar-dots, .ar-hero .ar-dots, .ar-dots { position: absolute !important; left: auto !important; right: 20px !important; bottom: 24px !important; transform: none !important; display: flex !important; gap: 10px !important; z-index: 10 !important; width: auto !important; height: auto !important; align-items: center !important; } body.gl-reference-home .ar-hero .ar-dots button, body.gl-astro-home .ar-hero .ar-dots button, .ar-hero .ar-dots button, .ar-dots button { flex: 0 0 18px !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 18px !important; max-height: 18px !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; border: 1px solid rgba(255, 255, 255, 0.85) !important; background: transparent !important; display: grid !important; place-items: center !important; box-sizing: border-box !important; cursor: pointer !important; position: relative !important; } body.gl-reference-home .ar-hero .ar-dots button[aria-pressed=true]:after, body.gl-astro-home .ar-hero .ar-dots button[aria-pressed=true]:after, .ar-hero .ar-dots button[aria-pressed=true]:after, .ar-dots button[aria-pressed=true]:after { content: '' !important; display: block !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #ffffff !important; inset: auto !important; position: static !important; } } /* ======================================================== NAVBAR BORDER-BOTTOM IN ALL WHITE BACKGROUND STATES (Menu open, search open, scrolled, and standard white pages) ======================================================== */ body:not(.gl-reference-home) .gl-header, body.gl-reference-home .gl-header.is-scrolled, body.gl-reference-home .gl-header.gl-search-open, body.gl-reference-home .gl-header.header--active, body.gl-reference-home .gl-header.gl-menu-active, body.gl-reference-home.gl-nav-open .gl-header, body.gl-nav-open .gl-header, .gl-header.is-scrolled, .gl-header.gl-search-open, .gl-header.header--active, .gl-header.gl-menu-active { border-bottom: 1px solid #eaeaea !important; } /* On transparent hero header, strictly NO border and NO box-shadow */ body.gl-reference-home .gl-header { border-bottom: none !important; } body.gl-reference-home:not(.gl-nav-open) .gl-header:not(.is-scrolled):not(.gl-search-open):not(.header--active):not(.gl-menu-active) { border-bottom: none !important; box-shadow: none !important; } /* When mobile search is open, divider line between header bar and search dropdown, and border-bottom on dropdown */ body .gl-header.gl-search-open .gl-header__bar, .gl-header.gl-search-open .gl-header__bar { border-bottom: 1px solid #eaeaea !important; } body .gl-header .gl-mobile-search:not([hidden]) { border-top: 1px solid #eaeaea !important; border-bottom: 1px solid #eaeaea !important; } /* ======================================================== ASTRO CATALOG LAYOUT: INNER CONTAINER WIDTH (MAX-WIDTH 1440PX) OUTER GUTTERS; INTERNAL SIDEBAR & CONTENT PADDING ======================================================== */ .gl-catalog-page .gl-catalog-main, body .gl-catalog-main, .gl-catalog-main { width: 100% !important; max-width: 1440px !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; } @media (min-width: 1100px) { .gl-catalog-page .gl-catalog-main, body .gl-catalog-main, .gl-catalog-main { width: calc(100% - 80px) !important; } .gl-catalog-page .gl-catalog-layout, body .gl-catalog-layout, .gl-catalog-layout { width: 100% !important; max-width: 1440px !important; margin: 0 auto !important; padding: 0 !important; display: grid !important; grid-template-columns: 290px minmax(0, 1fr) !important; column-gap: 0 !important; row-gap: 0 !important; position: relative !important; box-sizing: border-box !important; } /* Padding của gl-filter-panel filters & border-right */ .gl-catalog-page .gl-filter-panel, body .gl-filter-panel.filters, .gl-filter-panel.filters, aside.filters, aside#gl-catalog-filters { grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; padding: 35px 30px 60px 0 !important; border-right: 1px solid #eaeaea !important; border-top: none !important; border-left: none !important; border-bottom: none !important; box-sizing: border-box !important; background: #ffffff !important; } /* Padding của gl-filter-modal-heading */ .gl-filter-modal-heading, #gl-catalog-filters .gl-filter-modal-heading { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 0 24px 0 !important; margin: 0 !important; border-bottom: none !important; box-sizing: border-box !important; } .gl-filter-modal-heading h2, #gl-catalog-filters .gl-filter-modal-heading h2, #gl-filter-title { margin: 0 !important; padding: 0 !important; font-family: Inter, Arial, Helvetica, sans-serif !important; font-size: 18px !important; font-weight: 200 !important; line-height: 1.33 !important; color: #000000 !important; letter-spacing: normal !important; text-transform: none !important; } /* Padding của gl-catalog-content */ .gl-catalog-page .gl-catalog-content, body .gl-catalog-content, .gl-catalog-content { grid-column: 2 !important; grid-row: 1 !important; padding: 35px 0 80px 40px !important; box-sizing: border-box !important; min-width: 0 !important; } /* gl-filters-collapse: Ở BÊN PHẢI gl-filter-panel filters, THẤP XUỐNG CÙNG CAO ĐỘ VỚI TOOLBAR VÀ TIÊU ĐỀ */ body.gl-astro-home .gl-filters-collapse, .gl-catalog-page .gl-filters-collapse, .gl-filters-collapse { display: grid !important; place-items: center !important; position: sticky !important; top: 140px !important; grid-column: 2 !important; grid-row: 1 !important; align-self: start !important; justify-self: start !important; width: 32px !important; min-width: 32px !important; height: 38px !important; padding: 0 !important; margin: 35px 0 -73px 0 !important; border: 1px solid #eaeaea !important; border-left: none !important; border-radius: 0 3px 3px 0 !important; background: #ffffff !important; color: #505050 !important; z-index: 10 !important; cursor: pointer !important; box-sizing: border-box !important; } .gl-filters-collapse svg { width: 7px !important; height: 10px !important; transition: transform 0.2s ease !important; } .gl-filters-collapse:hover { border-color: #999999 !important; color: #111111 !important; } .gl-filters-collapse[aria-expanded="false"] svg { transform: rotate(180deg) !important; } /* Khi ẩn bộ lọc (collapsed) */ .gl-catalog-page .gl-catalog-layout.gl-filters-hidden { grid-template-columns: 0 minmax(0, 1fr) !important; column-gap: 0 !important; } .gl-filters-hidden .gl-filter-panel { display: none !important; } .gl-filters-hidden .gl-archive-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } body.gl-astro-home .gl-filters-hidden .gl-filters-collapse, .gl-filters-hidden .gl-filters-collapse { margin: 35px 0 -73px 0 !important; border-left: 1px solid #eaeaea !important; border-radius: 0 3px 3px 0 !important; } } @media (max-width: 1099px) { .gl-filter-panel, .gl-filter-panel.filters, aside.filters, aside#gl-catalog-filters { border-right: none !important; padding-right: 0 !important; } } /* The thumbnail rail must not expand the gallery before its first measurement. */ @media(min-width:1025px){.gl-astro-home .gl-thumb-rail{contain:size;align-self:stretch;height:100%}} /* Collection slides preserve the existing collection layout and product rails. */ #sources .gl-collection-slide[hidden]{display:none!important} #sources:has(.gl-collection-controls) .gl-source-wrap{touch-action:pan-y} #sources .block__content .gl-collection-controls{position:static;display:flex!important;justify-content:flex-start;height:auto;gap:10px;margin:28px 0 0;padding:0} #sources .block__content .gl-collection-controls button{background:transparent;color:#111;border-color:#aaa} #sources .block__content .gl-collection-controls button:hover{background:#111;color:#fff;border-color:#111} #sources .block__carousel>.ar-arrows button{background:#fff;color:#111;border-color:#bbb;box-shadow:0 1px 5px #0002} #sources .block__carousel>.ar-arrows button:disabled{background:#fff;color:#aaa;border-color:#ddd;opacity:1} #sources .block__carousel>.ar-arrows button:not(:disabled):hover{background:#111;color:#fff;border-color:#111} .gl-editorial-content{min-width:0} .gl-editorial-content .gl-landing-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 20px;width:100%;min-width:0;max-width:100%} .gl-landing-products>.ar-product-item,.gl-landing-products>.ar-product-item>a{width:100%;min-width:0;max-width:100%} .gl-landing-products .ar-product-image{width:100%;min-width:0} @media(max-width:1100px){.gl-editorial-content .gl-landing-products{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:760px){.gl-editorial-content .gl-landing-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 15px}.gl-landing-products h3{font-size:15px!important}} /* Editorial cards use a smaller heading than page and section titles. */ body.gl-astro-home .gl-news-grid article h2{font-size:20px!important;line-height:1.4!important;font-weight:400;margin:16px 0 10px;letter-spacing:0} @media(max-width:760px){body.gl-astro-home .gl-news-grid article h2{font-size:18px!important;line-height:1.4!important}} .gl-space-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0 0 45px} .gl-space-gallery img{width:100%;height:auto;display:block} @media(max-width:760px){.gl-space-gallery{grid-template-columns:1fr;gap:15px;margin-bottom:30px}} /* Editorial cards: explicit image-to-copy rhythm, independent of heading resets. */ body.gl-astro-home .gl-news-grid{column-gap:30px;row-gap:48px;align-items:start} body.gl-astro-home .gl-news-grid article{min-width:0} body.gl-astro-home .gl-news-grid article>a{display:flex;flex-direction:column;gap:25px;min-width:0} body.gl-astro-home .gl-news-grid article>a img{display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;margin:0} body.gl-astro-home .gl-news-grid article h2{margin:0!important;padding:0!important;font-size:20px!important;line-height:1.4!important;font-weight:400;white-space:normal;overflow-wrap:anywhere} body.gl-astro-home .gl-news-grid article time{display:block;margin-top:10px;font-size:13px;line-height:1.5;color:#666} body.gl-astro-home .gl-news-grid article>p{margin:12px 0 0!important;font-size:15px;line-height:1.6;color:#505050} body.gl-astro-home .gl-news-grid article>a:hover h2{color:#505050} body.gl-astro-home .gl-news-grid article>a:focus-visible{outline:1px solid #111;outline-offset:6px} @media(max-width:1023px){body.gl-astro-home .gl-news-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:36px}} @media(max-width:760px){body.gl-astro-home .gl-news-grid{grid-template-columns:minmax(0,1fr);row-gap:32px}body.gl-astro-home .gl-news-grid article>a{gap:20px}body.gl-astro-home .gl-news-grid article h2{font-size:18px!important}body.gl-astro-home .gl-news-grid article time{margin-top:8px}body.gl-astro-home .gl-news-grid article>p{margin-top:10px!important}} /* ======================================================== OPTION 3 (DE XUAT MOI): EDITORIAL SLIDE 1 & RESPONSIVE RULES ======================================================== */ .ar-slide:first-child .ar-hero-copy { display: block !important; position: absolute !important; } /* DESKTOP STYLES (> 1024px) */ @media (min-width: 1025px) { .gl-reference-home .ar-slide:first-child .ar-hero-copy { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; left: 80px !important; max-width: 580px !important; z-index: 10 !important; display: block !important; } .gl-reference-home .ar-slide:first-child .gl-eyebrow { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: #c0c8d6 !important; margin-bottom: 12px !important; line-height: 1.2 !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8) !important; } .gl-reference-home .ar-slide:first-child .gl-title { font-size: 38px !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; color: #ffffff !important; margin: 0 0 20px 0 !important; text-transform: uppercase !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85) !important; } .gl-reference-home .ar-slide:first-child .gl-features { list-style: none !important; padding: 0 !important; margin: 0 0 24px 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; } .gl-reference-home .ar-slide:first-child .gl-features li { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 15px !important; color: #ffffff !important; line-height: 1.3 !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8) !important; } .gl-reference-home .ar-slide:first-child .gl-features svg { width: 18px !important; height: 18px !important; color: #ffffff !important; flex-shrink: 0 !important; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7)) !important; } .gl-reference-home .ar-slide:first-child .hero__buttons.ar-hero-actions { position: static !important; margin-top: 24px !important; bottom: auto !important; left: auto !important; display: flex !important; flex-direction: row !important; gap: 24px !important; align-items: center !important; padding: 0 !important; } .gl-reference-home .ar-slide:first-child .hero__buttons .button { color: #ffffff !important; text-decoration: none !important; border: none !important; padding: 0 !important; background: transparent !important; display: inline-flex !important; align-items: center !important; white-space: nowrap !important; border-radius: 0 !important; } .gl-reference-home .ar-slide:first-child .hero__buttons .button span { color: #ffffff !important; font-size: 14px !important; line-height: 1.3 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.85) !important; padding-bottom: 3px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important; } } /* MOBILE & TABLET STYLES (<= 1024px) */ @media (max-width: 1024px) { html body.gl-reference-home .ar-hero, html body.gl-astro-home .ar-hero, html body .ar-hero { height: 320px !important; min-height: 320px !important; position: relative !important; overflow: hidden !important; background: #03070d !important; } html body .ar-hero .ar-slide:first-child > img { height: 100% !important; width: 100% !important; object-fit: cover !important; object-position: 95% center !important; } /* Overlay hạ nhẹ độ trong */ .ar-slide:first-child:after { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, rgba(3, 7, 13, 0.64) 0%, rgba(3, 7, 13, 0.34) 44%, rgba(3, 7, 13, 0.04) 70%, transparent 100%), linear-gradient(180deg, rgba(3, 7, 13, 0.26) 0%, transparent 28%, rgba(3, 7, 13, 0.34) 100%) !important; pointer-events: none !important; z-index: 2 !important; } .gl-reference-home .ar-slide:first-child .ar-hero-copy { position: absolute !important; top: 80px !important; left: 18px !important; width: auto !important; max-width: 280px !important; right: auto !important; bottom: auto !important; z-index: 10 !important; color: #fff !important; display: block !important; transform: none !important; margin: 0 !important; padding: 0 !important; } .gl-reference-home .ar-slide:first-child .gl-eyebrow { font-size: 10px !important; font-weight: 500 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: #d2d8e2 !important; margin-bottom: 5px !important; line-height: 1.2 !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.85) !important; } .gl-reference-home .ar-slide:first-child .gl-title { font-size: 18.5px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: -0.01em !important; color: #ffffff !important; margin-bottom: 8px !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.9) !important; } .gl-reference-home .ar-slide:first-child .gl-features { list-style: none !important; padding: 0 !important; margin: 0 0 10px 0 !important; display: flex !important; flex-direction: column !important; gap: 3.5px !important; line-height: 1.25 !important; } .gl-reference-home .ar-slide:first-child .gl-features li { display: flex !important; align-items: center !important; gap: 6.5px !important; font-size: 11px !important; line-height: 1.25 !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 2px 6px rgba(0, 0, 0, 0.85) !important; } .gl-reference-home .ar-slide:first-child .gl-features svg { width: 12.5px !important; height: 12.5px !important; color: #fff !important; flex-shrink: 0 !important; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8)) !important; } .gl-reference-home .ar-slide:first-child .hero__buttons { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important; gap: 14px !important; width: max-content !important; max-width: 100% !important; position: static !important; margin: 0 !important; padding: 0 !important; transform: none !important; opacity: 1 !important; visibility: visible !important; } .gl-reference-home .ar-slide:first-child .hero__buttons .button { color: #ffffff !important; text-decoration: none !important; border: none !important; padding: 0 !important; background: transparent !important; display: inline-flex !important; align-items: center !important; white-space: nowrap !important; flex: 0 0 auto !important; border-radius: 0 !important; } .gl-reference-home .ar-slide:first-child .hero__buttons .button span { color: #ffffff !important; font-size: 12px !important; line-height: 1.2 !important; padding: 0 0 2px 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.85) !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; white-space: nowrap !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 2px 6px rgba(0, 0, 0, 0.85) !important; } .gl-reference-home .ar-slide:first-child .hero__buttons .button svg { width: 7px !important; height: 10px !important; margin-left: 2px !important; } .ar-dots { bottom: 16px !important; right: 18px !important; z-index: 20 !important; } } /* ======================================================== GL-SOURCE-WRAP: LUXURY MIDNIGHT NAVY & RICHTEXT DESCRIPTION ======================================================== */ #sources.gl-source-collection .gl-source-wrap { background: #133041 !important; box-shadow: 0 0 0 100vmax #133041 !important; clip-path: inset(0 -100vmax) !important; } #sources.gl-source-collection .block__content { background: #133041 !important; color: #ffffff !important; } #sources.gl-source-collection .block__image { background: #133041 !important; } #sources.gl-source-collection .block__subtitle { color: #9cb1c2 !important; font-size: 18px !important; line-height: 22px !important; font-weight: 300 !important; letter-spacing: 4px !important; margin-bottom: 8px !important; } #sources.gl-source-collection .block__title { color: #ffffff !important; margin: 0 0 16px !important; } #sources.gl-source-collection .block__text { color: rgba(255, 255, 255, 0.88) !important; font-size: 15px !important; line-height: 1.65 !important; margin: 0 0 24px 0 !important; max-width: 480px !important; } #sources.gl-source-collection .block__text p { color: inherit !important; font-size: inherit !important; line-height: inherit !important; margin: 0 !important; } #sources.gl-source-collection .block__content .button--border-white, #sources.gl-source-collection .block__content .button { display: inline-flex !important; align-items: center !important; background: transparent !important; border: none !important; padding: 0 !important; color: #ffffff !important; text-decoration: none !important; font-size: 14px !important; line-height: 1.4 !important; cursor: pointer !important; } #sources.gl-source-collection .block__content .button span { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding-bottom: 2px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.75) !important; color: #ffffff !important; transition: border-color .2s ease, opacity .2s ease !important; } #sources.gl-source-collection .block__content .button:hover span { border-bottom-color: #ffffff !important; opacity: 0.9 !important; } #sources.gl-source-collection .block__content .button svg { fill: currentColor !important; stroke: currentColor !important; } #sources.gl-source-collection .block__content .gl-collection-controls { margin-top: 32px !important; } #sources.gl-source-collection .block__content .gl-collection-controls button { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; transition: all .2s ease !important; } #sources.gl-source-collection .block__content .gl-collection-controls button:hover { background: #ffffff !important; color: #133041 !important; border-color: #ffffff !important; } @media (max-width: 1023px) { #sources.gl-source-collection .block__subtitle { font-size: 14px !important; line-height: 18px !important; letter-spacing: 3px !important; margin-bottom: 8px !important; } #sources.gl-source-collection .block__content { padding: 32px 16px 85px !important; } #sources.gl-source-collection .block__text { font-size: 13.5px !important; line-height: 1.6 !important; margin-bottom: 20px !important; max-width: 100% !important; } #sources.gl-source-collection .block__content .gl-collection-controls { margin-top: 24px !important; } } /* ======================================================== GL-SUPPORT: HIGH-PROMINENCE ANIMATED CTA ======================================================== */ .gl-support { position: fixed !important; right: 24px !important; bottom: 28px !important; z-index: 9999 !important; display: flex !important; flex-direction: column !important; gap: 24px !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } .gl-support-btn { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 56px !important; height: 56px !important; border-radius: 50% !important; text-decoration: none !important; box-sizing: border-box !important; border: 2px solid #ffffff !important; cursor: pointer !important; transition: transform .28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .28s ease !important; } /* Zalo CTA */ .gl-support-zalo { background: linear-gradient(135deg, #0084ff 0%, #005ce6 100%) !important; color: #ffffff !important; box-shadow: 0 4px 16px rgba(0, 100, 240, 0.45), 0 2px 6px rgba(0, 0, 0, 0.15) !important; animation: gl-cta-shake-zalo 6s infinite ease-in-out !important; } .gl-support-zalo .gl-support-text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-weight: 700 !important; font-size: 13.5px !important; line-height: 1 !important; letter-spacing: 0.2px !important; color: #ffffff !important; } /* Hotline 24/7 CTA */ .gl-support-phone { background: linear-gradient(135deg, #133041 0%, #0a1c27 100%) !important; color: #ffffff !important; box-shadow: 0 4px 16px rgba(19, 48, 65, 0.45), 0 2px 6px rgba(0, 0, 0, 0.15) !important; animation: gl-cta-shake-phone 6s infinite ease-in-out 3s !important; } .gl-support-phone svg { width: 20px !important; height: 20px !important; stroke: #ffffff !important; stroke-width: 1.8 !important; margin-bottom: 2px !important; } .gl-support-phone span:not(.gl-support-pulse) { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; line-height: 1 !important; color: #ffffff !important; } /* Radar Pulse Ripple Waves */ .gl-support-pulse { position: absolute !important; inset: -5px !important; border-radius: 50% !important; pointer-events: none !important; z-index: -1 !important; } .gl-support-zalo .gl-support-pulse { border: 2px solid #0084ff !important; animation: gl-radar-pulse-zalo 2.4s infinite cubic-bezier(0.215, 0.61, 0.355, 1) !important; } .gl-support-phone .gl-support-pulse { border: 2px solid #133041 !important; animation: gl-radar-pulse-phone 2.4s infinite cubic-bezier(0.215, 0.61, 0.355, 1) 1.2s !important; } @keyframes gl-radar-pulse-zalo { 0% { transform: scale(0.95); opacity: 0.85; } 50% { opacity: 0.4; } 100% { transform: scale(1.42); opacity: 0; } } @keyframes gl-radar-pulse-phone { 0% { transform: scale(0.95); opacity: 0.85; } 50% { opacity: 0.4; } 100% { transform: scale(1.42); opacity: 0; } } /* Eye-Catching Rhythmic Attention Shake */ @keyframes gl-cta-shake-zalo { 0%, 75%, 100% { transform: rotate(0deg) scale(1); } 77% { transform: rotate(-10deg) scale(1.07); } 80% { transform: rotate(10deg) scale(1.07); } 83% { transform: rotate(-8deg) scale(1.07); } 86% { transform: rotate(6deg) scale(1.07); } 89% { transform: rotate(-3deg) scale(1.03); } 92% { transform: rotate(0deg) scale(1); } } @keyframes gl-cta-shake-phone { 0%, 75%, 100% { transform: rotate(0deg) scale(1); } 77% { transform: rotate(-10deg) scale(1.07); } 80% { transform: rotate(10deg) scale(1.07); } 83% { transform: rotate(-8deg) scale(1.07); } 86% { transform: rotate(6deg) scale(1.07); } 89% { transform: rotate(-3deg) scale(1.03); } 92% { transform: rotate(0deg) scale(1); } } /* Interactive Hover Feedback */ .gl-support-btn:hover { animation-play-state: paused !important; transform: scale(1.14) translateY(-3px) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important; } .gl-support-zalo:hover { background: linear-gradient(135deg, #1a8eff 0%, #0050cc 100%) !important; } .gl-support-phone:hover { background: linear-gradient(135deg, #1a425a 0%, #0f2735 100%) !important; } /* Mobile responsive adjustments */ @media (max-width: 760px) { .gl-support { right: 14px !important; bottom: 20px !important; gap: 18px !important; } .gl-support-btn { width: 48px !important; height: 48px !important; } .gl-support-zalo .gl-support-text { font-size: 12px !important; } .gl-support-phone svg { width: 17px !important; height: 17px !important; margin-bottom: 1px !important; } .gl-support-phone span:not(.gl-support-pulse) { font-size: 8px !important; } } /* Project image and title share one destination and a visible keyboard focus. */ .gl-project-link{display:block;overflow:hidden} .gl-project-track figcaption h3 a{color:inherit;text-decoration:none} .gl-project-track figcaption h3 a:hover{text-decoration:underline;text-underline-offset:4px} .gl-project-track a:focus-visible{outline:2px solid currentColor;outline-offset:3px} /* Editorial lists use a compact dash, without affecting menus or numbered lists. */ .gl-astro-home :is(.gl-page-content,.gl-single-content) ul:not([class]){list-style:none;padding-left:0} .gl-astro-home :is(.gl-page-content,.gl-single-content) ul:not([class])>li{position:relative;padding-left:18px;margin-left:0} .gl-astro-home :is(.gl-page-content,.gl-single-content) ul:not([class])>li::before{content:"-";position:absolute;left:0;top:0;color:inherit;font-weight:400} /* Contact social links: equal icon boxes and a shared text baseline. */ .gl-contact-article .gl-social-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px;margin:20px 0 0} .gl-contact-article .gl-social-links>a{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 0;font-size:14px;line-height:20px;color:#333;text-decoration:none!important;border:0} .gl-contact-article .gl-social-links>a>svg{display:block;flex:0 0 20px;width:20px;height:20px;fill:currentColor} .gl-contact-article .gl-social-links>a>span{text-decoration:underline;text-decoration-color:#bbb;text-underline-offset:4px;text-decoration-thickness:1px} .gl-contact-article .gl-social-links>a:hover{color:#000} .gl-contact-article .gl-social-links>a:hover>span{text-decoration-color:currentColor} .gl-contact-article .gl-social-links>a:focus-visible{outline:1px solid currentColor;outline-offset:3px} .gl-content-image{cursor:zoom-in} .gl-lightbox{border:0;padding:0;background:transparent;max-width:min(92vw,1200px);max-height:92vh} .gl-lightbox::backdrop{background:rgba(0,0,0,.82)} .gl-lightbox img{display:block;max-width:92vw;max-height:86vh;width:auto;height:auto;object-fit:contain} .gl-lightbox>button{position:absolute;top:8px;right:10px;width:36px;height:36px;border:0;background:#fff;color:#111;font-size:28px;line-height:1;cursor:pointer} .gl-lightbox[open]{display:flex;align-items:center;justify-content:center;margin:auto;box-sizing:border-box;inset:0} .gl-lightbox[open]>img{width:auto!important;max-width:92vw;max-height:86vh;margin:0 auto;object-fit:contain}