/** Shopify CDN: Minification failed
Line 1764:0 Unexpected "}"
**/
/* Website fonts */
/* Body Font "Space Grotesk" */
@font-face {
font-family: 'Space Grotesk';
src: url('/cdn/shop/files/SpaceGrotesk-Medium.woff2?v=1772518413') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Space Grotesk';
src: url('/cdn/shop/files/SpaceGrotesk-SemiBold.woff2?v=1772518413') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Space Grotesk';
src: url('/cdn/shop/files/SpaceGrotesk-Regular.woff2?v=1772518413') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Space Grotesk';
src: url('/cdn/shop/files/SpaceGrotesk-Bold.woff2?v=1772518413') format('woff2');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Space Grotesk';
src: url('/cdn/shop/files/SpaceGrotesk-Light.woff2?v=1772518412') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
/* Heading Font 'Inter Tight' */
@font-face {
font-family: 'Inter Tight';
src: url('/cdn/shop/files/InterTight-Light.woff2?v=1772521040') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter Tight';
src: url('/cdn/shop/files/InterTight-Bold.woff2?v=1772521040') format('woff2');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter Tight';
src: url('/cdn/shop/files/InterTight-Regular.woff2?v=1772521040') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter Tight';
src: url('/cdn/shop/files/InterTight-Medium.woff2?v=1772521040') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter Tight';
src: url('/cdn/shop/files/InterTight-SemiBold.woff2?v=1772521175') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
p{
font-family: 'Inter Tight';
font-weight: 400;
letter-spacing:0px !important;
}
.announcement {
border-radius: 0 0 10px 10px;
}
.announcement p {
font-size: 14px;
line-height:20px;
font-family: 'Space Grotesk';
letter-spacing: 0px;
font-weight: 400;
}
.navtext {
font-size: 14px;
line-height: 18px;
font-weight: bold;
}
.navlink {
padding: 0;
}
.header__menu__inner {
gap: 20px;
}
.header__inner .wrapper--full {
padding-top: 20px;
padding-bottom: 20px;
}
/* Hide Weglot entirely — translation is disabled on this theme. We'll run our own
translation pipeline later. The and carry `wg-notranslate` + `translate="no"`
so Weglot's JS skips the whole page, but we also hide any switcher UI it tries to inject. */
.weglot-container,
#weglot-switcher-1,
.weglot_switcher,
[class^="weglot-"],
[id^="weglot-"],
[class*=" weglot-"],
.language-option.active-language {
display: none !important;
}
/* Native language switcher alignment */
.header__desktop__bar__r {
gap: 10px;
align-items: center;
}
.header__desktop__bar__r .toolbar__elements {
display: flex;
align-items: center;
align-self: center;
margin: 0;
padding: 0;
}
.header__desktop__bar__r .toolbar__elements .popout__toggle {
display: flex;
align-items: center;
padding-top: 0;
padding-bottom: 0;
line-height: 1;
}
.header__desktop__bar__r .toolbar__elements .popout__toggle img,
.header__desktop__bar__r .toolbar__elements .popout__toggle svg {
vertical-align: middle;
}
.header__desktop__bar__r .header__desktop__buttons {
display: flex;
align-items: center;
}
.header__desktop__bar__r .toolbar__elements,
.header__desktop__bar__r .header__desktop__buttons {
margin-top: auto;
margin-bottom: auto;
}
.theme__header {
border: none ;
}
.tri-hero-banner .wrapper .section__inner {
border-radius: 20px;
overflow: hidden ;
}
/* Fix duplicate logo: pointer:coarse in theme.css shows both mobile+desktop headers.
Let the JS class js__show__mobile control the toggle instead. */
@media (pointer: coarse) and (min-width: 480px) {
.header__mobile {
display: none;
}
.header__desktop {
display: flex;
}
/* When JS determines mobile is needed, restore it */
.js__show__mobile .header__mobile {
display: grid;
}
.js__show__mobile .header__desktop {
display: none;
}
}
.btn.btn--large, .btn.btn--long {
font-size: 18px;
line-height: 22px;
padding: 14px 25px;
font-family: Inter Tight;
letter-spacing: 0px !important;
font-weight: 600;
margin: 24px 12px 0 0;
}
.btn.btn--long{
padding: 11px 25px !important;
min-width:fit-content;
}
.hover__bar {
bottom: 27px;
background-color: rgb(34 34 34);
}
.hero__title p {
font-size: 50px;
line-height: 56px;
letter-spacing: -1px !important;
color: #fff;
}
.header__desktop__buttons {
display: flex;
gap: 10px;
}
/* A mirror, reimagined. */
.tri-a-mirror .brick__section {
background: #222222;
padding: 75px;
border-radius: 20px;
}
.tri-a-mirror ul {
margin: 30px 0px !important;
padding: 10px;
list-style: none !important;
border-left: 2px solid #fff;
font-size: 16px;
letter-spacing: 0;
font-style: normal;
line-height: 20px;
}
.tri-a-mirror .btn.btn--long{
margin:0px;
}
.tri-a-mirror .standard__heading {
background: linear-gradient(90deg, #fff, #999);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-size: 40px;
line-height: 51px;
letter-spacing: -.75px;
margin-bottom: 20px;
font-family: 'Space Grotesk';
}
.tri-a-mirror p {
font-size: 20px;
line-height: 28px;
}
.tri-a-mirror .image__hero__frame {
border-radius: 10px;
}
/* Collection Grid Css */
.tri-collection-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 220px 210px 220px;
gap: 20px;
max-width: 100% !important;
margin: 0 auto;
}
.tri-collection-grid .grid__item {
background: #eee;
border-radius: 8px;
overflow: hidden;
}
.tri-collection-grid .grid__item:nth-child(1) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.tri-collection-grid .grid__item:nth-child(1) .image__hero__frame, .tri-collection-grid .grid__item:nth-child(2) .image__hero__frame, .tri-collection-grid .grid__item:nth-child(3) .image__hero__frame, .tri-collection-grid .grid__item:nth-child(4) .image__hero__frame {
aspect-ratio: 690 / 450;
padding: 0px;
height: 100% !important;
width:100% ;
}
.tri-collection-grid .grid__item:nth-child(2) {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
.tri-collection-grid .grid__item:nth-child(3) {
grid-column: 4 / 5;
grid-row: 1 / 2;
}
.tri-collection-grid .grid__item:nth-child(4) {
grid-column: 3 / 5;
grid-row: 2 / 4;
}
.tri-collection-grid .grid__item:nth-child(5) {
grid-column: 1 / 3;
grid-row: 3 / 4;
}
.tri-collection-grid .grid__item:nth-child(5) .collection-grid-item__title {
max-width: 400px;
padding-top :24px;
}
.tri-collection-grid .grid__item:nth-child(5) .collection-grid-item__subtitle {
background: #fff;
position: relative;
top: 0;
right: 0;
}
.tri-collection-grid .collection-grid-item__subtitle {
right: inherit;
}
.tri-collection-grid .grid__item:nth-child(5) .hero__content__wrapper {
justify-content: center !important;
}
.tri-collection-grid .grid__item:nth-child(5) .collection-grid-item__btn {
background: #222;
color: #fff;
}
.tri-collection-grid .grid__item:nth-child(5) .text-btn-arrow-right:after {
background-image: url(/cdn/shop/files/arrow-wht.svg?v=1772537386);
}
.tri-collection-grid .grid__item {
width: 100% !important;
margin: 0 !important;
padding: 0px !important;
}
.tri-collection-grid .collection-grid-item {
height: 100%;
}
.tri-collection-grid .collection-grid-item__title {
font-weight: 600 !important;
font-size: 24px;
line-height: 30px;
letter-spacing: -.75px !important;
font-family: Space Grotesk;
text-transform: uppercase;
text-align: left;
padding-bottom:15px;
}
.tri-collection-grid .hero__content__wrapper {
justify-content: flex-end !important;
}
.tri-collection-grid .collection-grid-item__btn {
width: fit-content;
padding: 9px 48px 9px 20px;
background: #fff;
color: #222222;
border-radius: 50px;
font-size: 16px;
font-family: 'Inter Tight';
line-height: 19px;
text-transform: capitalize;
}
.tri-collection-grid .text-btn-arrow-right:after {
width: 18px;
height: 18px;
background-image: url(/cdn/shop/files/btn-arrow.svg?v=1772536285);
right: 20px;
}
.tri-designed-for .column__image > div {
aspect-ratio: 40 / 25;
border-radius: 10px;
}
.tri-designed-for .index__column {
padding-bottom: 0px !important;
position: relative;
}
.tri-designed-for .column__content {
position: absolute;
bottom: 20px;
left: 25px;
width: calc(100% - 35px);
text-align: left;
color: #fff;
}
.tri-designed-for .column__content .accent-title-large {
font-size: 24px;
line-height: 30px;
letter-spacing: -.75px;
font-family: 'Space Grotesk';
text-transform: uppercase;
margin-bottom: 8px;
}
.tri-designed-for .column__content p {
font-size: 14px;
line-height: 20px;
letter-spacing: 0;
font-family: 'Inter Tight';
}
.tri-designed-for .column__image{
margin:0px !important;
}
.tri-designed-for .column-wrapper {
padding: 100px 83px;
background: #F4F4F4;
border-radius: 20px;
}
/* ============================================================
Image gradient overlays (per-block setting on Text columns
with images). Used when text is overlaid on a photo and the
bright sky / high-key image kills contrast — see the
.tri-designed-for "Awareness / Confidence / Freedom" cards.
============================================================ */
.column__image .has-gradient-soft,
.column__image .has-gradient-dark {
position: relative;
}
.column__image .has-gradient-soft::after,
.column__image .has-gradient-dark::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
}
.column__image .has-gradient-soft::after {
background: linear-gradient(to top, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0) 55%);
}
.column__image .has-gradient-dark::after {
background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 65%);
}
/* Keep the overlaid title above the gradient layer */
.tri-designed-for .index__column .column__content { z-index: 2; }
/* Section-logos title — bigger, heavier than the default tiny kicker
so the heading carries equal visual weight to the logos below it
(otherwise an awards strip with a small italic title looks bottom-heavy). */
.section-logos h2.kicker-flourished {
font-size: 28px;
line-height: 1.15;
letter-spacing: -0.5px;
font-weight: 700;
text-transform: uppercase;
font-family: 'Space Grotesk', sans-serif;
font-style: normal;
color: #222;
text-align: center;
margin-bottom: 28px;
}
.section-logos h2.kicker-flourished::after {
display: none;
}
/* Hero image: prevent the "loads small first, then expands" effect.
The Pipeline image element has `transition: all` (default — touches
width/height/opacity etc.). When the responsive `srcset` resolves
from a smaller candidate to a larger one as the browser figures out
the layout width, the transition animates the size change — looking
like the image grows on load. Killing the transition on hero images
makes the load feel instant.
Also locks the image to fill its scale container at 100% from the
first paint so any pre-layout width settling doesn't cascade into
a visible scale change. Scoped to `.tri-hero-banner` so it doesn't
affect other heroes that might rely on the transition (e.g. for
intentional fade-in effects). */
.tri-hero-banner .image__hero__frame,
.tri-hero-banner .image__hero__pane,
.tri-hero-banner .image__hero__scale {
min-height: 100%;
transition: none !important;
}
/* The Pipeline `singles()` function in theme.js (line ~210) runs after
content loads and sets `min-height: calc({tallest+padding}px + var(--menu-height))`
inline on the section and image frame. On desktop this resolves to
~661px (vs the height-class's 66vh = ~600px), so the frame appears
to "expand" by ~60px when JS runs.
Strategy: pre-seed the expected post-JS height in CSS so the INITIAL
paint already matches. JS-set min-height then either matches or comes
in slightly smaller (no-op) — no visible expansion either way.
IMPORTANT: scope this to desktop. On mobile, the content stack is
shorter (text wraps differently, awards image is capped at 220px) so
the JS-computed min-height is much smaller (~470px). If we apply the
desktop pre-seed on mobile, the hero loads taller than it should and
then SHRINKS when JS runs — the same CLS, mirrored. */
@media (min-width: 768px) {
.tri-hero-banner.js-overflow-container,
.tri-hero-banner [data-overflow-background] {
min-height: calc(540px + var(--menu-height, 78px));
}
}
/* When the hero uses a fixed-height utility (use_screen_*, use_pixels_*),
force `aspect-ratio: auto` so the height class wins immediately on first
paint. Otherwise Tailwind's `aspect-[--wh-ratio]` competes with the height
class — whichever loses gets *animated* into the winner because the
theme's default `transition: all` is on these elements. That animation
IS the "loads smaller first then expands" desktop CLS. */
.tri-hero-banner .image__hero__frame[class*="use_screen_"],
.tri-hero-banner .image__hero__frame[class*="use_pixels_"] {
aspect-ratio: auto !important;
}
/* The `image` snippet adds an extra inner wrapper around the IMG with
classes `relative block w-full h-full overflow-hidden aspect-[--wh-ratio]`.
Pipeline's default `transition: all` on this wrapper means a late-loading
sibling (e.g. the awards img inside the hero) reflowing the hero text
stack triggers a frame-size animation on the hero image wrapper. Kill
transitions on EVERY descendant of the scale element to prevent this. */
.tri-hero-banner .image__hero__scale,
.tri-hero-banner .image__hero__scale * {
transition: none !important;
}
/* Also kill transition on the inner aspect-ratio wrapper around the IMG
so the hero image's effective box doesn't animate when the awards img
below loads (which can trigger a layout pass on the hero text stack). */
.tri-hero-banner .image__hero__scale > [class*="aspect-["] {
aspect-ratio: auto !important;
}
.tri-hero-banner .image__hero__scale img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
transition: none !important;
}
/* Awards image inside hero blocks: same load-time animation issue.
The image snippet sets HTML width/height attrs to a default 600×200
while the actual asset is 320×106 — the browser allocates the larger
box first, then the CSS width:320px wrapper + object-fit kicks in,
and `transition: all` animates the box collapse. Lock it. */
.tri-text-banner .standard__image,
.tri-text-banner .standard__image *,
.tri-text-banner .standard__image img {
transition: none !important;
}
/* Hide Judge.me's medals/badges row site-wide.
The medals strip (Verified Reviews, Monthly Record, Bronze
Authenticity, etc.) was visually noisy: 6 laurel-wreath badges
with mixed micro-typography, two of them with oversized count
numbers (870, 57) that dropped out of the wreath at 3-4× the
badge text. Trust signal job is already covered by the hero
rating chip (★4.79 · 1,002 reviews) + customer photo grid +
per-review widget below. The medals were a third repetition
without adding meaning. */
.jdgm-medals-wrapper,
.jdgm-medals {
display: none !important;
}
/* Hero-embedded awards strip — mobile sizing tweak.
The Liquid image block uses `image_max_limit: 320` which is the
right size for a desktop hero (`.standard__image` style="width:
320px"). On a phone viewport the content area is ~334px wide, so
320px = essentially full-bleed and the awards read as a banner
image rather than a small credential badge. Capping to 220px on
narrow viewports gives the badge breathing room above the CTAs.
Targeting `.tri-text-banner .standard__image` so this only
applies to the cycling/homepage-style hero, not other heroes. */
@media (max-width: 680px) {
.tri-text-banner .standard__image {
max-width: 220px !important;
margin-top: 10px !important;
}
}
/* Logo-bar block image inversion — used when a white-on-transparent
logo (e.g. the existing Awards strip designed for the dark footer)
needs to be rendered on a light section background.
The `!important` on opacity overrides the theme's lazy-load
`.transition-opacity` initial state, which never resolves to opacity
1 for images that render with a CSS filter (the filter changes the
compositor path and the load handler that flips opacity doesn't
fire). Without this override the logos render as a flat gray block.
GPU layer promotion (`transform: translateZ(0)` + `will-change: filter`)
isolates the filter into its own composite layer so it's rasterized
once instead of on every scroll paint — without it, the filter re-runs
on every frame during scroll and causes scroll jank on long pages. */
/* Hero rating chip — clickable link to the reviews section. We
don't want the harsh default underline (heavy on a hero), so we
use a subtle dotted underline that sharpens on hover. */
.section-hero a[href="#reviews"],
[data-section-type*="hero"] a[href="#reviews"] {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
padding-bottom: 1px;
transition: border-color 0.15s ease;
cursor: pointer;
}
.section-hero a[href="#reviews"]:hover,
[data-section-type*="hero"] a[href="#reviews"]:hover {
border-bottom-color: rgba(255, 255, 255, 1);
}
.logo-bar__item--invert img {
filter: invert(1) brightness(0.85) contrast(1.1);
opacity: 1 !important;
transform: translateZ(0);
will-change: filter;
backface-visibility: hidden;
/* Hint to the browser to use a sharper interpolation when scaling
the image down on mobile (the awards strip is laid out at native
600px and resamples down to viewport width on phones). */
image-rendering: -webkit-optimize-contrast;
}
/* Section-logos subtitle — small caption line under the logo strip. */
.section-logos__subtitle {
text-align: center;
font-size: 12px;
letter-spacing: 0.4px;
color: #666;
margin: 18px auto 0;
max-width: 720px;
line-height: 1.5;
padding: 0 16px;
}
/* Mobile sizing for the awards strip: the block.width setting clamps the
max width on desktop, but mobile viewports are narrower than that
value — let the image scale down to viewport width with margin. */
@media (max-width: 640px) {
.logo-bar__item--invert {
--width: 100% !important;
width: 100% !important;
max-width: 100%;
padding: 0 16px;
box-sizing: border-box;
}
.logo-bar__item--invert img {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
max-height: none !important;
}
/* Center the single logo block on mobile (default flex layout in the
theme can left-align unless we tell it otherwise) */
.section-logos .logo-bar {
justify-content: center;
}
.section-logos h2.kicker-flourished {
font-size: 22px;
margin-bottom: 18px;
padding: 0 16px;
}
.section-logos__subtitle {
font-size: 11px;
margin-top: 14px;
}
}
.tri-three-collection .collection-grid-item .image__hero__frame {
padding-top: 110%;
aspect-ratio: 454 / 500;
border-radius: 10px;
}
.collection-grid-item {
border-radius: 10px;
}
.tri-three-collection p.collection-grid-item__title {
max-width: 420px;
font-weight: 600;
font-size: 40px;
line-height: 51px;
letter-spacing: -.75px !important;
font-family: Space Grotesk;
text-transform: uppercase;
text-align: left;
padding-top: 52px;
}
.collection-grid-item__btn {
font-weight: 600;
font-size: 18px;
line-height: 24px;
letter-spacing: -.75px !important;
font-family: Space Grotesk;
text-transform: uppercase;
text-align: left;
width: 100%;
padding-right: 20px;
transform: translateY(0);
opacity: 1;
}
.collection-grid-item__subtitle {
text-transform: uppercase;
font-family: 'Inter Tight' !important;
font-weight: 500 !important;
font-size: 14px;
line-height: 17px;
padding: 4px 10px;
border-radius: 50px;
background: rgb(34 34 34 / 80%);
width: fit-content;
position: absolute;
top: 20px;
right: 20px;
transform: translateY(0);
opacity: 1;
}
.align-space-between-vertical {
align-items: flex-start;
}
.text-btn-arrow-right:after {
content: "";
width: 19px;
height: 19px;
border-width: 0px !important;
background-image: url(/cdn/shop/files/Vector.svg?v=1772533228);
}
.section-heading .kicker-flourished, .try-tech-section .standard__heading p, .image-with-txt-collection h2 {
font-size: 40px;
line-height: 51px;
letter-spacing: -1px !important;
color: #222;
text-transform: uppercase;
font-weight: 700;
font-family: 'Space Grotesk';
margin: 0px;
padding-bottom: 10px;
}
.section-heading .kicker-flourished:after {
display:none;
}
.subheading, .try-tech-section .rte p{
text-align: center;
font-size: 18px;
line-height: 25px;
font-weight: 400;
}
.section-heading {
margin-bottom: 40px;
}
.tri-wherever-you-go .align-space-between-vertical {
justify-content: flex-end;
}
.tri-wherever-you-go .image__hero__frame {
aspect-ratio: 335 / 400;
}
/* -------- */
.section-icons .icon__column__icon{
width:50px;
height:50px;
}
.section-icons .icon__column__heading {
font-weight: 700 !important;
font-size: 18px;
line-height: 24px;
letter-spacing: -.75px !important;
font-family: Space Grotesk;
text-transform: uppercase;
}
.section-icons .icon__column__text .rte p {
font-size: 14px;
line-height: 18px;
font-weight: 400;
color: #222 !important;
}
.section-icons .grid__item.medium-up--one-third {
max-width: 345px;
width: 100% !important;
}
.section-icons .float-grid {
max-width: 1252px;
width: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.section-icons .float-grid:after{
display:none;
}
/* --- */
footer.footer {
border-radius: 20px 20px 0 0;
}
.footer__container {
max-width: 1252px;
margin: 0 auto;
}
.shopify-section-group-group-footer .section-padding.wrapper {
max-width: 1252px;
margin: 0 auto;
border-top: 1px solid rgb(255 255 255 / 20%);
}
.footer__newsletter__body {
padding: 0px !important;
}
.footer__newsletter h3, .footer__title {
font-size: 18px;
line-height: 24px;
font-family: 'Space Grotesk';
letter-spacing: 0px;
color: #fff;
text-transform: uppercase;
}
.footer__column .rte p {
font-size: 14px;
line-height: 18px;
}
.footer__column .rte {
margin: 30px 0;
}
.footer__newsletter h3 {
margin: 0px;
}
.footer__newsletter .rte {
margin: 20px 0;
}
.footer__aside {
display: flex;
flex: 0 0 360px !important;
max-width: 360px !important;
margin-left: 80px !important;
padding: 80px 0 !important;
align-items: flex-start;
}
.newsletter-block .input-group--inner-button {
background: #ffffff1a;
border-radius: 50px;
border: none !important;
padding: 7px 7px 7px 20px;
}
.input-group-button button {
background: #fff;
color: #222 !important;
padding: 11px 25px !important;
border-radius: 50px;
font-size: 16px;
line-height: 20px;
font-weight: 500;
letter-spacing: 0px;
}
.footer__content__inner .float-grid {
display: grid !important;
grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(120px, 1fr));
align-items: start;
row-gap: 40px;
column-gap: 32px;
width: 100%;
}
.footer__content__inner .medium-up--one-half {
width: 100%;
padding: 0px !important;
}
.footer__quicklinks a {
font-size: 14px;
line-height: 17px;
font-family: 'Inter Tight';
font-weight: 300;
}
span.subfooter__copyright {
font-size: 14px;
line-height: 17px;
font-family: Inter Tight;
font-weight: 300;
}
.footer__icon--social {
margin: 0px !important;
}
/* Specification Css */
.specifations-wrapper .lens-grid {
display: flex;
gap: 50px;
align-items: flex-start;
}
.try-specifications-section .column-wrapper {
padding: 100px 74px;
background: #2222220d;
border-radius: 20px;
}
.specifations-wrapper .lens-grid > div {
flex: 1;
}
@media (max-width: 768px) {
.float-grid {
grid-template-columns: 1fr;
text-align: center;
}
}
/* Product Page Css */
.product-single .product__inner {
max-width: 100% !important;
}
.product__icon-item {
display: flex;
align-items: center;
gap: 7px;
padding: 10px;
border-radius: 5px;
background: rgb(0 0 0 / 5%);
flex:1;
}
.product__icon-item p {
font-size: 12px;
line-height: 16px;
letter-spacing: 0px;
}
.product__icon-item .icon-holder {
max-width: 16px;
}
/* Reserve 16x16 for icon-list icons to prevent CLS lower down on the
product page when lazy-loaded images resolve during scroll. The
image.liquid snippet only reserves aspect-ratio when wh_ratio is
passed, and the icon_list block at sections/product.liquid:449
doesn't pass it. Without reserved space, each icon wrapper is 0x0
until the ![]()
loads, then jumps to 16px — shifting everything
below. Diagnosed via Playwright WebKit run showing height change
59->75 on .product__icon-list during scroll phases. */
.product__icon-item .icon-holder,
.product__icon-item .icon-holder > *,
.product__icon-item .icon-holder img,
.product__icon-item .icon-holder svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.product__icon-list {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.product__block__description button.accordion__title {
font-size: 14px !important;
line-height: 18px !important;
letter-spacing: 0px;
font-family: Space Grotesk;
text-transform: uppercase;
}
.product__inner .shopify-product-form {
max-width: 100% !important;
}
a#more-payment-options-link {
display: none;
}
.btn--add-to-cart {
border-radius: 10px;
font-size: 18px;
line-height: 20px;
font-family: 'Inter Tight';
margin-bottom:12px;
}
input.quantity__input {
border-radius: 10px;
font-weight: 700 !important;
}
.product__block__quantity {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
}
.product__submit__quick .shopify-payment-button, .product__submit__quick .shopify-payment-button shopify-accelerated-checkout {
border-radius: 10px;
overflow: hidden;
margin: 0px !important;
}
.media__thumb:after {
display:none;
}
.media__thumb img {
border-radius: 5px;
}
.media__thumb.is-activated img {
border: 1px solid #222;
}
.product__grid.product__grid--slides {
border-radius:10px;
overflow:hidden;
}
h1.product__title {
font-size: 30px;
line-height: 38px;
letter-spacing: -1px !important;
color: #222;
text-transform: uppercase;
font-family: Space Grotesk;
}
.title-price-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
.tri-text-banner .hero__title p {
font-size: 40px;
line-height: 51px;
letter-spacing: -1px !important;
}
.tri-text-banner .hero__description p {
font-size: 20px;
line-height: 28px;
font-weight: 300;
max-width: 512px;
}
.tri-text-banner .section__inner:after {
content: '';
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(32, 32, 32, 1) 0%, rgba(32, 32, 32, 0.1) 40%);
}
.tri-text-banner .hero__content {
padding: 50px 83px;
margin: 0px !important;
}
.tri-text-banner .hero__description {
margin-top: 20px !important;
}
.tri-text-banner .standard__image {
margin: 0px;
}
.tech-features {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
margin-top: 40px;
}
.tech-feature {
max-width: calc(100% / 4 - 15px);
width: 100%;
border-radius: 5px;
background: #fff;
display: flex;
align-items: center;
gap: 10px;
padding: 15px;
border: 1px solid rgb(34 34 34 / 10%);
}
img.tech-feature-icon {
width: 30px;
height: 30px;
}
.tech-feature-text {
font-size: 18px;
line-height: 24px;
letter-spacing: -1px !important;
color: #222;
text-transform: uppercase;
font-family: Space Grotesk;
font-weight: 700;
}
.innovation-card {
aspect-ratio: 40 / 45;
width: 100%;
height: 100%;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.innovation-content {
position: absolute;
bottom: 0;
left: 0px;
padding: 20px;
color: #fff;
}
.innovation-content h3 {
font-size: 24px;
line-height: 31px;
letter-spacing: -1px !important;
text-transform: uppercase;
font-weight: 700;
font-family: Space Grotesk;
margin-bottom: 15px;
}
.innovation-content p {
font-size: 18px;
line-height: 26px;
}
.innovation-overlay {
background: linear-gradient(0deg, #222222, #22222200 100%);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.try-innovation-section .column-wrapper {
padding: 100px 74px;
background: rgb(34 34 34 / 5%);
border-radius: 20px 20px 0 0;
}
.try-tech-section .container-layout{
padding: 0 74px 100px 74px;
background: rgb(34 34 34 / 5%);
border-radius: 0 0 20px 20px;
}
/* } */
/* Weglot switcher list styles removed */
/* Lense Slider CSS Start */
#sync1 .item {
padding: 40px 0 0 0;
margin: 0;
color: #fff;
border-radius: 0;
text-align: center;
}
#sync2 .item {
padding: 0px;
margin: 0;
color: #fff;
text-align: center;
cursor: pointer;
width: 45px;
height: 45px;
border-radius: 50px;
position: relative;
}
#sync2 .item h1 {
font-size: 18px;
}
#sync2 .current .item {
background: #0c83e7;
}
/* Owl Nav Reset */
.owl-theme .owl-nav [class*='owl-'] {
transition: all .3s ease;
}
.owl-theme .owl-nav [class*='owl-'].disabled:hover {
background-color: #D6D6D6;
}
/* Arrows for first carousel */
#sync1.owl-theme {
position: relative;
}
#sync1.owl-theme .owl-next, .innovation-cards .owl-next,
#sync1.owl-theme .owl-prev, .innovation-cards .owl-prev {
width: 22px;
height: 40px;
margin-top: -20px;
position: absolute;
top: 50%;
}
#sync1.owl-theme .owl-prev {
left: -75px;
}
#sync1.owl-theme .owl-next {
right: -75px;
}
.innovation-cards .owl-prev {
left: -60px;
}
.innovation-cards .owl-next {
right: -60px;
}
.tri-leans-slider .lens-grid {
display: flex;
gap: 15px;
align-items: flex-start;
}
.tri-leans-slider .lens-content {
max-width: 33%;
width: 100%;
}
.lens-image img {
width: 100%;
height: 100% !important;
object-fit: cover !important;
}
.image-tags span>span, .lens-badge {
font-size: 12px;
background: #222c;
padding: 5px 15px;
border-radius: 30px;
display: inline-block;
line-height: 16px;
color: #fff;
font-family: Inter Tight;
text-transform: uppercase;
letter-spacing: 0.25px;
}
.card-content {
text-align: left;
padding: 20px;
}
.image-tags {
display: flex;
position: absolute;
bottom: 32px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
z-index: 2;
}
.lens-image {
border-radius : 10px;
overflow: hidden;
flex: 1;
position: relative;
}
.image-tags > span {
flex: 1;
}
.tri-leans-slider .lens-image:after {
content: '';
width: 50%;
background: rgb(34 34 34 / 20%);
height: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
.lens-content img {
aspect-ratio: 400 / 230;
border-radius: 10px;
overflow: hidden;
object-fit: cover;
}
.lens-content h3 {
font-size: 24px;
line-height: 31px;
letter-spacing: -1px !important;
color: #222;
text-transform: uppercase;
font-weight: 700;
font-family: Space Grotesk;
margin: 0;
text-align: left;
padding:15px 0 ;
}
.lens-content p {
font-size: 18px;
line-height: 25px;
font-weight: 400;
color: #222;
text-align: left;
}
.lens-thumb, .lens-dot {
height: 100%;
width: 100%;
display: block;
border-radius: 50px;
}
.tri-leans-thumbnail .owl-item {
width: 45px !important;
cursor:pointer;
}
.tri-leans-thumbnail .owl-item:after {
content: '';
position: absolute;
width: 55px;
height: 55px;
border: 2px solid transparent;
top: -5px;
left: -5px;
border-radius: 50px;
opacity: 1;
/* No transition — Owl Carousel's transform on .owl-item fights with
pseudo-element transitions and keeps border-color stuck at the start
state. Snap-change is fine here. (2026-05-01) */
}
.tri-leans-thumbnail .owl-item.current:after{
border-color: #ff5000;
}
.tri-leans-thumbnail .owl-stage {
margin: 0 auto;
display: flex;
align-items: center;
gap: 20px;
justify-content: center;
padding: 10px 0;
}
/* Gap between Full Sun lenses and the Variable (photochromic) group.
The first Variable item that FOLLOWS a non-Variable item gets the
margin — this correctly creates a single visual break regardless of
how many Variable lenses exist. Falls back to nothing in browsers
without :has() support (Chromium <105, Safari <15.4, Firefox <121). */
.tri-leans-thumbnail .owl-stage .owl-item:not(:has(.lens-item--variable)) + .owl-item:has(.lens-item--variable) {
margin-left: 30px;
}
/* Fallback for older browsers: at least the final item gets the gap */
.tri-leans-thumbnail .owl-stage .owl-item:last-child {
margin-left: 30px;
}
/* When :has() IS supported and triggers the gap above, reset the
last-child margin so we don't double it on the final Variable item. */
.tri-leans-thumbnail .owl-stage:has(.lens-item--variable) .owl-item:last-child {
margin-left: 0;
}
.tri-leans-thumbnail .owl-stage:has(.lens-item--variable) .owl-item:not(:has(.lens-item--variable)) + .owl-item:has(.lens-item--variable) {
margin-left: 30px;
}
.thumbnail-spactrum span {
font-size: 14px;
line-height: 18px;
letter-spacing: -1px !important;
color: #222;
text-transform: uppercase;
font-weight: 700;
font-family: Space Grotesk;
}
.thumbnail-spactrum {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 400px;
margin: 0 auto;
gap:40px;
}
.left-sp {
display: flex;
align-items: center;
gap: 10px;
flex:1;
}
span.sp-line {
height: 1px;
background: #222222;
display: inline-block;
flex: 1;
}
.try-leans-section .column-wrapper {
max-width: 1236px;
margin: 0 auto;
}
.try-innovation-section div[data-grid] {
position: relative;
width: 100% !important;
margin: 0px;
}
.try-leans-section .tri-leans-wrapper .owl-nav button, .innovation-cards .owl-nav button {
width: 45px !important;
height: 45px !important;
background: #fff !important;
border: 1px solid rgb(34 34 34 / 20%) !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 100px !important;
box-shadow: 0 4px 6px #20202014;
margin: 0px !important;
}
.try-leans-section .section-heading {
margin-bottom: 15px;
}
.try-leans-section .owl-carousel .owl-stage:after{
display:none;
}
/* Leans Slder CSS End */
.lens-card img {
width: 18px;
height: 18px;
}
.lens-card h5 {
font-size: 14px;
line-height: 17px;
font-family: Inter Tight;
font-weight: 700;
color: #222;
margin: 0;
text-transform: capitalize;
}
.lens-card p, .lens-card span {
font-size: 12px;
line-height: 14px;
letter-spacing: 0;
}
.lens-specs .leans-row {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px solid rgb(34 34 34 / 15%);
}
.lens-specs .icon-title-row {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
}
.lens-specs .lens-card {
padding: 15px;
background: #fff;
border-radius: 5px;
overflow: hidden;
}
.lens-specs {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.lens-specs > div {
max-width:calc(100% / 2 - 5px);
width:100%;
}
.spectrum span {
width: 6px;
height: 6px;
background: rgb(34 34 34 / 15%);
display: inline-block;
border-radius: 10px;
}
.spectrum span.active{
background: rgb(34 34 34 / 100%);
}
.lens-col li.icon-item {
display: flex;
align-items: center;
gap: 12px;
max-width: 210px;
width: 100%;
}
.lens-col .icon-list {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 15px 35px;
margin-top: 24px;
}
.specifations-wrapper h4 {
margin: 20px 0 ;
padding: 0;
font-size: 24px;
line-height: 31px;
}
.specifations-wrapper .lens-text p {
margin: 16px 0;
font-size: 18px;
line-height: 25px;
}
.lens-text ul {
display: flex;
gap: 6px;
}
.lens-text ul li:not(:first-child) {
font-size: 14px;
line-height: 18px;
padding: 4px 12px;
border-radius: 20px;
text-transform: uppercase;
font-family: 'Space Grotesk';
color: #fff;
background: #222;
margin:0px;
}
.lens-text ul li:first-child {
font-size: 18px;
line-height: 20px;
font-weight: 600;
font-family: 'Space Grotesk';
margin: 0 6px 0 0 ;
}
.lens-col li.icon-item span {
font-size: 14px;
font-family: 'Inter Tight';
font-weight: 600;
margin: 0;
}
.size-specs {
display: flex;
align-items: flex-start;
gap: 20px;
}
.size-card {
padding: 25px;
border-radius: 16px;
background: #fff;
flex: 1;
}
.size-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 10px;
border-bottom: 1px solid rgb(34 34 34 / 70%);
gap:10px;
}
.size-header h3 {
font-size: 16px;
line-height: 20px;
font-weight: 500 !important;
font-family: 'Space Grotesk';
margin: 0px;
flex:1;
}
.size-header > div{
flex:1;
}
button.unit {
font-size: 12px;
line-height: 15px;
padding: 2px 12px;
border-radius: 20px;
text-transform: uppercase;
font-family: Space Grotesk;
color: #222;
background: transparent;
margin: 0;
}
button.unit.active {
color: #fff;
background: #222;
}
.size-toggle {
width: fit-content;
border: 1px solid rgb(34 34 34 / 20%);
padding: 2px;
border-radius: 30px;
display: flex;
align-items: center;
gap: 0;
}
.spec-list li {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid rgb(34 34 34 / 15%);
}
.spec-list li > span {
flex: 1;
font-size: 14px;
line-height: 20px;
font-family: 'Inter Tight';
color: rgb(34 34 34 / 70%);
}
.spec-list li > span:nth-child(2) {
font-weight: 500;
color: #222;
}
.btn--add-to-cart {
border-radius: 10px;
font-size: 18px;
line-height: 20px;
font-family: 'Inter Tight';
}
}
p.size-desc {
font-size: 12px;
line-height: 17px;
color: #222222;
font-weight: 500;
}
.product__block__title, .product__block__price {
padding: 0px !important;
}
.size-image img {
width: 100%;
flex: 1;
max-width: 200px;
margin: 0 auto;
}
.size-image {
margin-bottom: 20px;
}
.size-image {
margin-bottom: 20px;
display: flex;
gap: 10px;
}
.size-image span {
flex: 1;
}
.why-cards {
display: flex;
gap: 15px;
width: 100%;
}
.why-cards img.innovation-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.try-innovation-section.why-section .column-wrapper {
padding: 0px 74px;
background: #fff;
border-radius: 0;
}
/* .section-icons.how-it-works-icon .float-grid {
max-width: 100%;
width: 100%;
display: flex;
justify-content: space-between;
background: rgb(34 34 34 / 5%);
padding: 100px 74px;
border-radius: 20px;
} */
.section-icons.how-it-works-icon .float-grid {
max-width: 100%;
width: 100%;
gap: 20px;
}
.section-icons.how-it-works-icon .icon-wrapper{
max-width: 100%;
width: 100%;
background: rgb(34 34 34 / 5%);
padding: 100px 74px;
border-radius: 20px;
}
.section-icons.how-it-works-icon .icon__column__icon {
width: 45px;
height: 45px;
margin: 0px;
}
.section-icons.how-it-works-icon .icon__column__heading {
font-size: 24px;
line-height: 31px;
color: #222222;
padding: 8px 0 10px 0;
}
.how-it-works-icon .grid__item {
padding: 20px;
border-radius: 5px;
background: #fff;
border: 1px solid rgb(34 34 34 / 10%);
}
.section-icons.how-it-works-icon .icon__column__text .rte p {
font-size: 18px;
line-height: 24px;
}
.image-with-txt-collection .brick__section {
padding: 0 74px;
}
.image-with-txt-collection .brick__block__image {
border-radius: 10px;
overflow: hidden;
}
.image-with-txt-collection .brick__block__text {
padding-right: 56px;
}
.image-with-txt-collection a.standard__cta {
padding: 12px 55px 12px 25px !important;
color: #fff;
font-size: 16px;
line-height: 19px;
}
.image-with-txt-collection .text-btn-arrow-right:after {
right: 25px;
}
.image-with-txt-collection h2 {
max-width: 420px;
}
.image-with-txt-collection .rte {
max-width: 550px;
}
.image-with-txt-collection.img-left .brick__block__text {
padding-right: 0;
padding-left: 56px;
}
.classic-pdp .thumbnail-spactrum {
max-width: 330px;
}
.faq-section .text__standard {
max-width: 897px;
margin: 0 auto;
}
.faq-section .accordion__wrapper {
border: none !important;
border-radius: 20px;
background: rgb(34 34 34 / 5%);
padding: 0 30px 0 30px;
margin-bottom: 20px;
}
.faq-section .accordion__title {
font-size: 24px;
padding:30px 0 25px 0 ;
line-height: 100%;
letter-spacing: -1px !important;
color: #222;
text-transform: uppercase;
font-weight: 700;
font-family: Space Grotesk;
}
.faq-section .accordion__body {
padding: 0 0 30px 0;
}
.faq-section .accordion__body p {
font-size: 18px;
line-height: 26px;
color: #222222;
}
.short-container {
background: #222;
padding: 100px 74px;
border-radius: 20px;
}
.image-with-faq-wrapper {
display: flex;
align-items: stretch;
justify-content: space-between;
}
.image-with-faq-wrapper > div{
flex: 1;
}
.image-wth-faq .section-heading h2, .image-wth-faq .section-heading p {
color: #fff;
}
.faq-image img {
border-radius: 10px;
width:100%;
height:100%;
object-fit:cover;
}
.faq-image {
padding-right: 58px;
}
.faq-section.image-wth-faq .accordion__wrapper {
background: rgb(255 255 255 / 10%);
}
.faq-section.image-wth-faq .accordion__title {
color: #fff;
}
.faq-section.image-wth-faq .accordion__body p {
color: #ffffff;
}
.image-wth-faq .accordion__title:after {
border-color: #ffffff;
}
.collection-tabs .product-grid-item__images {
aspect-ratio: 400 / 250;
}
.collection-tabs .product-grid-item__images img.product-grid-item__image {
width: 100%;
margin: 0 auto;
object-fit: contain;
}
.collection-tabs .product-grid-item__images .aspect-\[--wh-ratio\] {
aspect-ratio: 400 / 250;
background: rgb(0 0 0 / 5%);
border-radius: 10px;
overflow: hidden;
}
.product__badge {
font-size: 10px;
line-height: 12px;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 50px;
border: 1px solid rgb(34 34 34 / 10%);
}
.collection-tabs .product__grid__title {
font-size: 18px;
line-height: 24px;
letter-spacing: -1px !important;
color: #222;
text-align: left;
width: 100%;
text-transform: uppercase;
font-weight: 700;
font-family: Space Grotesk;
margin: 0;
padding: 10px 0;
}
.collection-tabs .product__grid__title__wrapper {
display: flex;
align-items: center;
flex-direction: row !important;
justify-content: space-between !important;
}
.collection-tabs .product__grid__price {
justify-content: center;
font-size: 18px;
line-height: 24px;
letter-spacing: -1px !important;
color: #222;
width: 100%;
text-transform: uppercase;
font-weight: 700;
font-family: Space Grotesk;
margin: 0;
justify-content: flex-end;
max-width: 120px;
}
.collection-tabs .tab-content {
padding: 0 74px !important;
}
.collection-tabs button.flickity-button {
margin: 0px !important;
}
.collection-tabs .flickity-prev-next-button.next {
right: -60px !important;
}
.collection-tabs .flickity-prev-next-button.previous {
left: -60px !important;
}
.flickity-force-arrows-top [data-carousel] .flickity-button, .wrapper--full [data-carousel] .flickity-button {
top: 50% !important;
transform:translateY(-50%);
}
.collection-tabs .flickity-prev-next-button {
width: 45px !important;
height: 45px !important;
background: #fff !important;
border: 1px solid rgb(34 34 34 / 20%) !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 100px !important;
box-shadow: 0 4px 6px #20202014;
margin: 0 !important;
}
nav.breadcrumb a, nav.breadcrumb span {
text-transform: uppercase;
font-family: Space Grotesk;
font-size: 12px;
font-weight: 300;
}
nav.breadcrumb {
margin-bottom: 20px;
display: flex !important;
align-items: center;
gap: 5px;
}
.tab-content .product__rating {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: row-reverse;
}
.text-center .grid__swatch__container {
justify-content: left;
}
.tabs.tabs--center.tabs--pill {
width: fit-content;
margin: 0 auto;
background: #F4F4F4;
border-radius: 50px;
padding: 8px;
}
button.tab-link span {
text-transform: uppercase;
}
.tabs--pill>.tab-link.current {
background: #fff !important;
box-shadow: 0 4px 4px hsl(0deg 0% 13% / 10%);
}
button.tab-link {
padding: 12px 24px 8px !important;
}
button.tab-link span {
text-transform: uppercase;
font-size: 16px;
line-height: 100%;
}
.collection-banner {
margin-top: 7px;
}
.jdgm-widget:not(.jdgm-review-widget--small,.jdgm-review-widget--medium) .jdgm-row-media {
flex-direction: row;
width: 100% !important;
flex-wrap: wrap;
}
@media (min-width: 768px) {
.grid__item.product__media__wrapper {
position: sticky;
top: 100px;
}
}
.tri-a-mirror .btn.btn--long {
margin: 0;
color: #000 !important;
}
@media (max-width:1400px){
.tri-three-collection p.collection-grid-item__title {
font-size: 30px;
line-height: 34px;
padding-top: 44px;
}
.hero__title p {
font-size: 42px;
line-height: 48px;
}
.section-heading .kicker-flourished, .try-tech-section .standard__heading p, .image-with-txt-collection h2 {
font-size: 36px;
line-height: 46px;
}
.tri-a-mirror .brick__section {
padding: 50px;
border-radius: 20px;
}
.tri-a-mirror .standard__heading {
font-size: 36px;
line-height: 46px;
}
.tri-collection-grid .collection-grid-item__title {
font-size: 20px;
line-height: 24px;
}
.tri-designed-for .column-wrapper {
padding: 80px 50px;
}
.tri-designed-for .column__content .accent-title-large {
margin-bottom: 0px;
}
.footer .float-grid:after{
display:none;
}
.tri-text-banner .hero__content {
padding: 50px 40px;
margin: 0 !important;
}
.tri-text-banner .hero__title p {
font-size: 36px;
line-height: 40px;
}
.try-innovation-section .column-wrapper {
padding: 80px 40px;
background: #2222220d;
border-radius: 20px 20px 0 0;
}
.innovation-content p {
font-size: 14px;
line-height: 20px;
}
.innovation-content h3 {
font-size: 20px;
line-height: 22px;
letter-spacing: -0.5px !important;
margin-bottom: 7px;
}
.try-tech-section .container-layout {
padding: 0 40px 80px;
background: #2222220d;
border-radius: 0 0 20px 20px;
margin-top:-1px;
}
.tech-feature-text {
font-size: 16px;
line-height: 20px;
text-align: left;
}
.tech-features {
display: flex;
gap: 12px;
margin-top: 30px;
}
.try-tech-section .standard__heading p{
padding:0px;
}
.try-innovation-section .column-wrapper {
padding: 80px 40px 50px;
}
.innovation-cards .owl-next {
right: -25px;
}
.innovation-cards .owl-next {
right: -25px;
}
.tri-leans-slider .lens-content {
max-width: 30%;
width: 100%;
}
.try-leans-section .section-padding {
padding-top: 80px;
padding-bottom: 60px;
}
.try-specifications-section .column-wrapper {
padding: 80px 40px;
}
.specifations-wrapper .lens-grid {
gap: 20px;
}
}
@media (max-width:1100px){
.tri-designed-for .column-wrapper {
padding: 80px 20px;
}
.tri-three-collection .grid__item {
max-width: calc(100% / 3) !important;
}
.tri-three-collection p.collection-grid-item__title {
font-size: 24px;
line-height: 28px;
padding-top: 42px;
}
.tri-three-collection .section-heading {
display: none;
margin: 0px !important;
}
.lens-content h3 {
font-size: 20px;
line-height: 24px;
padding: 10px 0;
}
.lens-content p {
font-size: 16px;
line-height: 22px;
}
.tri-leans-slider {
padding: 0 30px;
}
#sync1.owl-theme .owl-next {
right: -25px;
}
#sync1.owl-theme .owl-prev {
left: -25px;
}
.try-innovation-section.why-section .column-wrapper {
padding: 0;
}
.section-icons.how-it-works-icon .icon-wrapper {
padding: 80px 20px;
}
.how-it-works-icon .grid__item {
padding: 15px;
}
.section-icons.how-it-works-icon .float-grid {
gap: 15px;
}
.section-icons.how-it-works-icon .icon__column__heading {
font-size: 20px;
line-height: 24px;
}
.section-icons.how-it-works-icon .icon__column__text .rte p {
font-size: 16px;
line-height: 22px;
}
.collection-tabs .tab-content {
padding: 0 40px !important;
}
.collection-tabs .flickity-prev-next-button.next {
right: -25px !important;
}
.collection-tabs .flickity-prev-next-button.previous {
left: -25px !important;
}
.collection-tabs .product__grid__title {
font-size: 16px;
line-height: 20px;
}
.collection-tabs .product__grid__price {
font-size: 16px;
line-height: 20px;
max-width: 90px;
}
.short-container {
padding: 80px 20px;
}
.faq-image {
padding-right: 24px;
}
.faq-section .accordion__title {
font-size: 20px;
}
.image-with-txt-collection .brick__section {
padding: 0px;
}
}
@media (max-width:1023px){
.header__mobile__button {
min-width: 32px;
}
.hero__content {
max-width: 100%;
}
.tri-three-collection p.collection-grid-item__title {
font-size: 20px;
line-height: 24px;
padding-top: 36px;
}
.collection-grid-item__subtitle {
font-size: 10px;
line-height: 16px;
padding: 2px 10px;
top: 12px;
}
.tri-a-mirror .brick__section {
padding: 20px;
border-radius: 20px;
}
.tri-a-mirror .standard__heading {
font-size: 30px;
line-height: 34px;
}
.tri-a-mirror p {
font-size: 18px;
line-height: 24px;
}
.tri-a-mirror ul {
margin: 20px 0 !important;
padding: 6px;
font-size: 16px;
}
.tri-collection-grid {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 150px 180px 150px;
gap: 10px;
}
.tri-collection-grid .hero__content__wrapper {
justify-content: flex-end !important;
padding: 12px;
}
.tri-collection-grid .collection-grid-item__title {
font-size: 18px;
line-height: 20px;
}
.specifations-wrapper .lens-grid {
gap: 40px;
flex-direction: column;
}
.try-specifications-section .column-wrapper {
padding: 80px 20px;
}
.tri-leans-slider .lens-grid {
flex-direction: column;
}
.tri-leans-slider .lens-content {
max-width: 100%;
width: 100%;
display: flex;
}
.tri-leans-slider .card-content {
text-align: left;
padding: 0 0 0 24px;
}
.lens-content img, .lens-content > div {
flex: 1;
}
.tri-text-banner .hero__content {
padding: 20px 20px;
margin: 0 !important;
}
.tech-feature {
max-width: calc(100% / 2 - 6px);
}
.how-it-works-icon .grid__item {
max-width: calc(100% / 2 - 8px) !important;
width: 100% !important;
}
.section-icons.how-it-works-icon .float-grid {
flex-wrap: wrap;
}
.tab-content [data-grid][data-grid-medium] [data-item] {
width: calc(100% / 2);
}
button.tab-link span {
font-size: 14px;
}
.faq-section .accordion__title {
font-size: 16px;
letter-spacing: 0 !important;
padding: 20px 0 20px;
}
.faq-section .accordion__wrapper {
border-radius: 12px;
padding: 0 20px;
}
.faq-section .accordion__body p {
font-size: 16px;
line-height: 22px;
}
.faq-section .accordion__body {
padding: 0 0 20px;
}
.image-with-txt-collection h2 {
line-height: 38px;
}
}
@media (max-width:768px){
.footer__content__inner .float-grid {
text-align: left;
}
.footer__content__inner .float-grid > div:first-child {
max-width: 300px;
width: 100%;
flex: 0 0 300px;
padding-right: 30px !important;
}
}
@media (max-width:834px){
.header__mobile {
display: flex !important;
justify-content: space-between;
}
}
@media (min-width:768px){
.desktop-hide {
display: none !important;
}
[data-thumbnails-left] .media__thumb__wrapper {
display: flex;
flex-direction: column;
gap: 0px;
}
}
@media (max-width:767px){
.grid__item.product__media__wrapper {
position: static;
top: 0;
}
.tri-three-collection .grid__item {
max-width: calc(100% / 1) !important;
margin: 0px !important;
width: 100% !important;
}
.footer__content__inner .float-grid {
text-align: left;
flex-direction: column;
gap: 40px;
}
.footer__content__inner {
padding-bottom: 40px;
}
.footer__container {
display: flex;
flex-direction: column-reverse !important;
}
.section-icons .float-grid {
flex-direction: column;
}
.jdgm-widget:not(.jdgm-medals-wrapper) .jdgm-medals .jdgm-medal, .jdgm-widget:not(.jdgm-medals-wrapper) .jdgm-medals .jdgm-medal__mono svg {
width: 40px !important;
height: 40px !important;
}
.hero__content {
padding: 0px !important;
}
.hero__title p {
font-size: 26px;
line-height: 120%;
}
.btn.btn--large, .btn.btn--long {
font-size: 14px;
line-height: 20px;
padding: 12px 15px;
letter-spacing: 0.25px !important;
margin: 16px 10px 0 0;
}
.hero__cta__wrapper {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.section-no-slider-mobile [data-grid] {
width: 100%;
gap:20px;
}
.tri-three-collection p.collection-grid-item__title {
font-size: 25px;
line-height: 28px;
padding-top: 36px;
max-width: 260px;
}
.tri-a-mirror .brick__section {
padding: 48px 20px;
border-radius: 20px;
flex-direction: column;
}
.tri-a-mirror .image__hero__frame {
border-radius: 8px;
aspect-ratio: 1;
}
.tri-a-mirror .standard__heading {
font-size: 25px;
line-height: 28px;
}
.tri-a-mirror .text__standard.text-left {
padding-top: 0;
}
.section-heading .kicker-flourished, .try-tech-section .standard__heading p, .image-with-txt-collection h2 {
font-size: 25px;
line-height: 30px;
}
.subheading, .try-tech-section .rte p {
font-size: 14px;
line-height: 20px;
}
.section-no-slider-mobile .grid__item {
margin: 0px !important;
width: 100% !important;
}
.tri-designed-for .grid__item {
width: 100% !important;
}
.tri-designed-for div[data-grid] {
flex-direction: column !important;
gap: 20px;
padding: 0 20px;
}
.tri-designed-for div[data-grid] .grid__item{
margin:0px;
}
.tri-designed-for .column-wrapper {
padding: 50px 20px 30px;
}
.section-heading {
margin-bottom: 30px;
}
.section-icons .icon__column__icon {
width: 45px;
height: 45px;
}
.grid__item:not(:first-child) .icon__column {
padding-top: 50px;
}
.section-icons {
padding: 50px 0;
}
.subfooter__items {
gap: 20px;
}
.subfooter .wrapper {
padding: 20px;
}
.footer__content__inner .float-grid>div:first-child {
max-width: 100%;
width: 100%;
flex: 0 0 100%;
padding-right: 0px !important;
}
.footer__title {
padding: 0;
border: none !important;
}
.footer__title svg{
display:none !important;
}
.footer__accordion__body {
padding: 20px 0 0 0;
}
.footer__aside {
margin-bottom: 60px;
width: 100%;
}
.tri-wherever-you-go .image__hero__frame {
aspect-ratio: 1;
}
.tri-designed-for .column__content {
bottom: 20px;
left: 20px;
width: calc(100% - 40px);
}
.tri-designed-for .column__content .accent-title-large {
font-size: 20px;
line-height: 24px;
}
.mobile-hide{
display:none;
}
.tri-discover-inovation div[data-grid] {
flex-direction: column !important;
display: flex;
gap: 20px;
padding: 0px;
margin: 0 auto;
max-width: 335px !important;
width: 100% !important;
}
.tri-discover-inovation div[data-grid] .grid__item {
margin: 0;
width: 100%;
padding: 30px 24px;
border-radius: 8px;
}
.tri-discover-inovation .accent-title-large {
font-weight: 900;
font-size: 20px;
line-height: 100%;
letter-spacing: -.75px !important;
font-family: Space Grotesk;
text-transform: uppercase;
}
.tri-discover-inovation .rte p {
font-size: 14px;
line-height: 20px;
}
.tri-discover-inovation .column__image {
position: relative;
margin-bottom: 40px;
}
.tri-discover-inovation div[data-grid] .grid__item:first-child {
background: linear-gradient(180deg, rgb(254 152 72 / 15%), hsl(4deg 70% 46% / 15%));
}
.tri-discover-inovation div[data-grid] .grid__item:nth-child(2) {
background: linear-gradient(180deg, rgb(194 197 207 / 20%), rgb(176 194 219 / 20%));
}
.tri-discover-inovation div[data-grid] .grid__item:nth-child(3) {
background: linear-gradient(180deg, rgb(243 237 161 / 50%), rgb(229 212 124 / 50%));
}
.tri-discover-inovation div[data-grid] .grid__item:nth-child(4) {
background: linear-gradient(180deg, rgb(164 117 112 / 15%), rgb(140 105 103 / 15%));
}
.tri-discover-inovation .column__image img {
mix-blend-mode: darken;
box-shadow: none !important;
overflow: hidden !important;
width: calc(100% + 4px) !important;
margin-left: -2px;
height: calc(100% + 4px) !important;
margin-top: -2px;
}
.tri-discover-inovation .wrapper {
padding-top: 50px;
padding-bottom: 50px;
}
.use_pixels_650 {
height: 450px;
}
.header__mobile__button {
min-width: 32px;
}
.tri-discover-inovation .section-padding {
padding-bottom: 30px;
}
.announcement p {
font-size: 12px;
line-height: 16px;
}
/* Drawer Css */
.announcement {
display: none;
}
.drawer__content {
top: 78px;
}
.drawer__menu .sliderow {
border: none !important;
}
.drawer__menu .sliderow__title {
font-size: 16px;
line-height: 100%;
font-weight: 900;
font-family: 'Space Grotesk';
}
/* ═══════════════════════════════════════════
CART DRAWER REDESIGN — 4-Zone Layout
═══════════════════════════════════════════ */
/* Zone 1: Header */
.cart-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid #e8e8e8;
min-height: 56px;
}
.cart__drawer__title {
font-family: 'Inter Tight', 'Space Grotesk', sans-serif;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0;
}
.cart-drawer-header__count {
font-weight: 400;
font-size: 14px;
color: #666;
margin-left: 4px;
}
/* Zone 2: Free Shipping Progress */
.cart-drawer-progress {
padding: 12px 20px 0;
}
.shipping-progress {
padding-bottom: 12px;
border-bottom: 1px solid #e8e8e8;
}
.shipping-progress__bar-track {
width: 100%;
height: 4px;
background: #e8e8e8;
border-radius: 2px;
overflow: hidden;
}
.shipping-progress__bar-fill {
height: 100%;
background: #222;
border-radius: 2px;
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
min-width: 0;
}
.shipping-progress__bar-fill--qualified {
background: #22c55e;
}
.shipping-progress__message {
font-size: 12px;
line-height: 1.4;
color: #444;
margin-top: 8px;
text-align: center;
}
.shipping-progress__icon {
color: #22c55e;
font-weight: 700;
margin-right: 4px;
}
/* Zone 3: Scrollable Body */
.cart-drawer-body {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 0 20px;
}
/* Zone 4: Sticky Footer */
.cart-drawer-footer {
border-top: 1px solid #e8e8e8;
padding: 16px 20px 20px;
background: inherit;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}
.cart-drawer-footer__subtotal [data-cart-subtotal] {
margin-bottom: 4px;
}
.cart-drawer-footer__total {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
margin-bottom: 4px;
}
.cart-drawer-footer__total-label {
font-family: 'Inter Tight', 'Space Grotesk', sans-serif;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.cart-drawer-footer__total-price {
font-family: 'Space Grotesk', sans-serif;
font-size: 16px;
font-weight: 700;
}
.cart-drawer-footer__tax-note {
font-size: 11px;
color: #888;
margin: 0 0 12px;
}
.cart-drawer-footer__form {
margin: 0;
}
.cart-drawer-footer__checkout {
width: 100%;
height: 48px;
border-radius: 8px;
font-family: 'Inter Tight', 'Space Grotesk', sans-serif;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
background: #222;
color: #fff;
border: none;
cursor: pointer;
transition: background 0.15s;
}
.cart-drawer-footer__checkout:hover {
background: #000;
}
.cart-drawer-footer__checkout-dot {
font-size: 18px;
line-height: 1;
opacity: 0.5;
}
/* Express checkout (Shop Pay, Apple Pay) */
.cart-drawer-footer__express {
margin-top: 10px;
}
.cart-drawer-footer__express .additional-checkout-buttons {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Trust signals */
.cart-trust {
margin-top: 16px;
text-align: center;
padding-top: 12px;
border-top: 1px solid #f0f0f0;
}
.cart-trust__text {
font-size: 11px;
color: #888;
margin: 0 0 8px;
letter-spacing: 0.3px;
}
.cart-trust__icons {
display: flex;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
}
.cart-trust__icon {
width: 38px;
height: 24px;
opacity: 0.55;
transition: opacity 0.15s;
}
.cart-trust__icon:hover {
opacity: 0.8;
}
/* Cart notes in footer */
.cart-drawer-footer .drawer__bottom__notes {
margin-bottom: 12px;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 12px;
}
.cart-drawer-footer .accordion__title {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.3px;
font-weight: 600;
color: #666;
}
.cart-drawer-footer .drawer__notes__input {
font-size: 13px;
padding: 8px;
border: 1px solid #e8e8e8;
border-radius: 6px;
min-height: 60px;
resize: vertical;
}
/* Ensure drawer uses flexbox for sticky footer */
.cart__drawer .drawer__content {
display: flex;
flex-direction: column;
height: 100%;
}
.cart__drawer .drawer__top {
flex-shrink: 0;
}
.cart__drawer .drawer__body,
.cart__drawer .cart-drawer-body {
flex: 1;
min-height: 0;
}
.cart__drawer .drawer__bottom,
.cart__drawer .cart-drawer-footer {
flex-shrink: 0;
}
/* Line item addon grouping */
.cart__items__row.cart-item--addon .cart__items__grid {
padding-left: 24px;
}
.cart__items__row.cart-item--addon .cart__items__image {
max-width: 50px;
}
.cart__items__row.cart-item--addon .cart__items__title {
font-size: 13px;
color: #666;
}
.cart__items__row.cart-item--addon .cart__items__quantity {
display: none;
}
/* Mobile touch targets */
@media only screen and (max-width: 768px) {
.cart-drawer-header {
padding: 12px 16px;
}
.cart-drawer-progress {
padding: 10px 16px 0;
}
.cart-drawer-body {
padding: 0 16px;
}
.cart-drawer-footer {
padding: 14px 16px 16px;
}
.cart-drawer-footer__checkout {
min-height: 48px;
}
/* Full-viewport cart drawer on mobile.
Pipeline wraps a position:fixed .drawer__content inside a static .drawer
outer element. Sizing the OUTER causes it to take its full height in
document flow (even when closed) — which pushed all page content down.
Target the INNER .drawer__content (the actual sliding panel) instead. */
#drawer-cart .drawer__content {
width: 100% !important;
max-width: 100% !important;
height: 100vh !important;
height: 100dvh !important; /* iOS: excludes home-indicator bar */
max-height: 100vh !important;
max-height: 100dvh !important;
}
/* Visible grab-handle at the top */
#drawer-cart .drawer__top.cart-drawer-header {
position: relative;
padding-top: 24px;
}
#drawer-cart .drawer__top.cart-drawer-header::before {
content: '';
position: absolute;
top: 8px; left: 50%; transform: translateX(-50%);
width: 40px; height: 4px;
background: #d0d0d0; border-radius: 2px;
pointer-events: none;
}
/* Tappable hit area covering only the grab handle — deliberately narrow and
centered so it never overlaps the close (X) button in the header corner. */
#drawer-cart .cart-drawer-swipe-zone {
position: absolute;
top: 0;
left: 50%; transform: translateX(-50%);
width: 120px; height: 24px;
z-index: 2;
cursor: grab;
touch-action: pan-y;
}
}
/* ═══ End Cart Drawer Redesign ═══ */
/* Drawer Css End*/
.specifations-wrapper .lens-grid>div {
flex: 1;
width: 100%;
}
.size-specs {
flex-direction: column;
}
.try-specifications-section .column-wrapper {
padding: 60px 20px;
}
.tri-leans-slider .lens-content {
flex-direction: column;
gap: 15px;
}
.card-content {
padding: 0;
}
.tri-leans-slider {
padding: 0;
}
.try-leans-section .tri-leans-wrapper .owl-nav button, .innovation-cards .owl-nav button {
width: 32px !important;
height: 32px !important;
}
#sync1.owl-theme .owl-prev {
left: -8px;
}
#sync1.owl-theme .owl-next {
right: -8px;
}
#sync2 .item {
width: 30px;
height: 30px;
}
.tri-leans-thumbnail .owl-item:after {
width: 36px;
height: 36px;
top: -3px;
left: -3px;
}
.tri-leans-thumbnail .owl-stage {
gap: 12px;
}
.thumbnail-spactrum {
max-width: 270px;
}
.specifations-wrapper h4 {
margin: 20px 0 10px;
font-size: 20px;
line-height: 24px;
letter-spacing: -0.5px;
}
.specifations-wrapper .lens-text p {
margin: 16px 0;
font-size: 16px;
line-height: 22px;
}
.try-innovation-section .column-wrapper {
padding: 60px 20px 30px;
}
.try-tech-section .container-layout {
padding: 0 20px 60px;
}
.try-innovation-section div[data-grid] {
padding-left: 0px;
}
.tri-text-banner .hero__content__wrapper {
padding: 20px;
}
.tri-text-banner .hero__description p {
font-size: 16px;
line-height: 22px;
}
/* [data-thumbnails-left] .media__thumb__wrapper {
display: flex;
flex-direction: row;
gap: 0px;
} */
.media__thumb {
width: 60px;
height: 60px;
margin-right: 10px !important;
margin-block-end: 0px;
}
.why-cards {
flex-direction: column;
}
.try-innovation-section .section-padding {
padding-bottom: 0px;
}
.section-icons.how-it-works-icon .icon-wrapper {
padding: 60px 20px;
}
.how-it-works-icon .grid__item {
max-width: 100% !important;
width: 100% !important;
}
button.tab-link {
padding: 8px 12px 4px !important;
}
.collection-tabs .tab-content {
padding: 0 0px !important;
}
.tab-content [data-grid][data-grid-medium] [data-item] {
width: 100%;
}
.collection-tabs .flickity-grid.flickity-disabled-mobile {
padding: 0px;
width: 100%;
margin: 0px;
}
.short-container {
padding: 60px 20px;
}
.image-with-faq-wrapper {
flex-direction: column;
gap: 10px;
}
.faq-image {
padding-right: 0px;
}
.image-with-txt-collection .text__standard {
padding-top: 20px;
padding-bottom: 0px;
}
.tri-collection-grid {
display: flex !important;
}
}
@media (max-width:512px){
.lens-specs>div {
max-width: calc(100% - 0px);
width: 100%;
}
.tech-feature {
max-width: calc(100% - 1px);
}
.px-btn {
max-width: 52px !important;
padding: 4px !important;
min-height:52px;
}
.btn--add-to-cart {
font-size: 16px;
line-height: 20px;
}
}
/* Mobile product page: kill ALL sticky + smooth-scroll to prevent bounce/jitter */
@media (max-width: 767px) {
html {
scroll-behavior: auto !important;
}
.product-single .is-sticky,
.grid__item.product__media__wrapper {
position: relative !important;
top: auto !important;
}
/* Neutralize the sticky header entirely on mobile.
The theme's Sticky JS (theme.js:2492) toggles .js__header__stuck and
.js__header__stuck--animated on scroll, which caused two separate
mobile bugs:
1. position: fixed (from .js__header__stuck) removes the header
from document flow — when the class is added past the scroll
threshold, content below jumps up by the header's height.
That's the "tiny jump as I scroll" behavior.
2. The hide-on-scroll transform (theme.css:14677) toggles 4 times
during iOS rubber-band settle at the top of the page.
We force the sticky state to be a visual no-op on mobile: position
stays static (in flow), and the transform/transition are disabled.
The JS still toggles its classes, but they have no layout impact.
Header scrolls with content — the conventional mobile UX. */
.js__header__stuck {
position: static !important;
width: auto !important;
}
.js__header__stuck--animated .theme__header,
.js__header__stuck--animated.js__header__stuck--trigger-animation .theme__header {
transform: none !important;
transition: none !important;
}
/* Kill backdrop-filter churn on sticky header.
Site is in "sticky" mode (sections/group-header.json). At iOS
scroll-top, rubber-band oscillation crosses stickUp/stickDown ~4
times (theme.js:2509), toggling .js__header__stuck on each
crossing. The theme.css:14644-14649 rule applies
backdrop-filter: blur(0) + 500ms transition on every toggle,
causing iOS Safari's GPU compositor to re-allocate the backdrop
layer 4 times — visible as a 4-beat vertical jiggle matching
the "4 times" symptom.
The :after pseudo-element at theme.css:14651-14660 also has its
own opacity transition that fires per toggle.
This block kills the backdrop-filter and its transitions only on
mobile. Desktop keeps the glassy blur effect. Does NOT touch
overscroll-behavior (that caused the sluggish feel last time). */
.js__header__stuck .theme__header,
.js__header__stuck.js__header__stuck__backdrop .theme__header {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
transition: none !important;
}
.js__header__stuck .theme__header:after,
.js__header__stuck.js__header__stuck__backdrop .theme__header:after {
transition: none !important;
}
/* Suppress Klaviyo popup animations on mobile — they fire on scroll
direction change (exit-intent/scroll-depth triggers) and cause a
visible 2-5px shift from their fadein/fadeinup animations. The
popup itself still works if Klaviyo decides to show it; we only
remove the animation/transition that causes the perceived jiggle.
Confirmed via Playwright MutationObserver: kl-private-reset-css-*
elements have style mutations with animation-name: klaviyo-fadein
and klaviyo-fadeinup triggered on direction-change-up scroll phase. */
[class*="kl-private-reset-css"],
[class*="kl-private-reset-css"] * {
animation: none !important;
transition: none !important;
}
/* SITE-WIDE ROOT CAUSE: GPU compositor layer jiggle on scroll direction
change. Diagnosed via Playwright WebKit: identity transforms and
will-change declarations create persistent GPU compositor layers
that iOS Safari re-composites on scroll direction change, causing
a visible 2-5px lag.
Primary offender: .ticker--animated (theme.css:15242) runs a
continuous infinite CSS animation with will-change: transform on
the announcement bar. Every page has it. The persistent animation
keeps a GPU layer permanently alive → iOS scroll compositor has to
re-balance on every direction change → visible jiggle.
Secondary: [data-aos] elements. AOS runs in "once" mode (theme.js
:10973) but leaves residual transform: translate3d(0,0,0) identity
transforms that still promote GPU layers.
Fix: de-promote these elements from GPU layers on mobile. Animations
on desktop are unaffected. The announcement ticker still scrolls on
mobile — we only remove will-change, which lets the browser decide
layer promotion based on actual animation needs rather than
preemptive declaration. */
.ticker--animated,
.toolbar__text.ticker--animated {
/* will-change: auto alone doesn't help — the *running* animation
itself keeps the element on a GPU layer. We have to actually
pause the animation on mobile. The announcement text stops
scrolling on mobile, which is acceptable UX (most mobile
announcement bars are static anyway). */
animation-play-state: paused !important;
will-change: auto !important;
}
[data-aos] {
will-change: auto !important;
}
[data-aos].aos-animate {
transform: none !important;
}
}
/* Mobile product page: title + lens above gallery, tight spacing */
@media (max-width: 767px) {
.product__media__wrapper > .px-lens {
padding: 0 15px 10px;
}
/* Desktop-only 3-section layout — hide on mobile (mobile uses scroll-snap carousel).
Defensive: if viewport is resized desktop→mobile without triggering a gallery
rebuild, these rules hide the stale desktop DOM. */
.trieye-gallery__main,
.trieye-gallery__lifestyle {
display: none !important;
}
/* .trieye-gallery__thumbs is already hidden on mobile via the existing
@media (max-width: 767px) rule further down this file (line ~3539). */
/* Title moved above gallery */
.trieye-mobile-title {
padding: 0 15px 0;
}
.trieye-mobile-title .product__block__title {
padding-bottom: 0 !important;
--PB: 0px !important;
}
.trieye-mobile-title .product__title {
margin-bottom: 0;
font-size: 28px;
}
.trieye-mobile-title .product__block__price {
margin-bottom: 4px;
}
.trieye-mobile-title .product__headline {
margin-bottom: 0;
}
/* "From" prefix handled globally now */
/* Remove dead space in/below gallery */
.trieye-gallery {
margin-bottom: 0;
height: auto !important;
}
.trieye-gallery__dots {
padding: 6px 0 2px;
}
/* Kill any ratio padding from theme wrapper + its viewport child. Pipeline's
theme.css sets `padding-bottom: var(--default-ratio)` on .flickity-viewport
where --default-ratio is inline `100.0%` — that reserves 100vw of blank
space BEFORE trieye-gallery JS hides the slideshow. If the JS runs late
(or fails to resolve state.color and returns early), the user sees a huge
empty area above product content. These !important overrides zero it out. */
.product__media__wrapper .flickity-lock-height,
.product__media__wrapper .product__grid--slides,
.product__media__wrapper .product__grid--slides .flickity-viewport {
padding-bottom: 0 !important;
min-height: 0 !important;
}
/* Belt-and-suspenders: once trieye-gallery is in the DOM, the theme slideshow
is redundant — hide it. Guards against partial JS runs where JS built the
gallery but didn't apply inline display:none to the slideshow. */
.product__media__wrapper:has(.trieye-gallery) .product__grid--slides {
display: none !important;
}
/* Tighter spacing between gallery and model section */
.product__main__content .product__inner {
padding-top: 0;
}
.px-wrap {
margin-top: 0;
}
.px-wrap > .px-block:first-of-type,
#px-color-title {
margin-top: 4px !important;
}
/* Hide the original title in the configurator panel (moved above on mobile) */
.product__main__content .title-price-wrapper {
display: none;
}
/* === Compact type picker (mobile) ===
trieye-product.css mobile rule sets buttons to max-width 50% (2x2). Override
that here so the 4-column grid fills properly. */
.px-lens--swatches .px-groups {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
}
.px-lens--swatches .px-groups button.px-group {
max-width: 100%;
width: auto;
flex: initial;
padding: 10px 2px;
min-height: 48px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.px-lens .px-group .lens-card {
padding: 0;
width: 100%;
text-align: center;
}
.px-lens .px-group .lens-card__icon {
display: none;
}
.px-lens .px-group .lens-card__name {
font-size: 9.5px;
font-weight: 700;
white-space: nowrap;
line-height: 1.1;
letter-spacing: -0.1px;
display: block;
}
.px-lens .px-group .lens-card__price {
font-size: 10px;
font-weight: 600;
opacity: 0.8;
display: block;
margin-top: 3px;
}
/* === Compact lens info panel (mobile) ===
Flatten the two-row card (header + bar-wrap) into a single flex row by
using display:contents on the two intermediate wrappers. The best-for
text flexes left; the UV400 badge is pushed right with margin-left:auto. */
.px-lens .lens-detail__pointer,
.px-lens .lens-detail__desc,
.px-lens .lens-detail__bar-label,
.px-lens .lens-detail__bar,
.px-lens .lens-detail__category {
display: none;
}
.px-lens .lens-detail {
margin-top: 8px;
}
.px-lens .lens-detail__card {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
background: transparent;
box-shadow: none;
padding: 0;
border: 0;
}
.px-lens .lens-detail__header,
.px-lens .lens-detail__bar-wrap {
display: contents;
}
.px-lens .lens-detail__best-for {
flex: 1 1 auto;
font-size: 11px;
color: #666;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
}
.px-lens .lens-detail__best-for::after {
content: ' · ' attr(data-vlt);
opacity: 0.9;
}
.px-lens .lens-detail__bar-values {
margin-left: auto;
display: flex;
align-items: center;
}
.px-lens .lens-detail__bar-values > span:first-child {
display: none;
}
.px-lens .lens-detail__bar-uv {
background: #e6f4ea;
color: #137333;
padding: 3px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.3px;
}
/* === Stack title / model / price vertically (mobile), left-aligned ===
Override global .title-price-wrapper flex-row (line 882) AND the deeper
.product__title__wrapper which is flex-row by default in Pipeline. */
.trieye-mobile-title.title-price-wrapper,
.trieye-mobile-title {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
text-align: left;
}
.trieye-mobile-title > *,
.trieye-mobile-title .product__title__wrapper {
width: 100%;
text-align: left;
}
.trieye-mobile-title .product__title__wrapper {
display: block !important;
}
.trieye-mobile-title .product__title,
.trieye-mobile-title .product__price__wrap,
.trieye-mobile-title .product__price__main {
display: block;
width: auto;
text-align: left;
}
.px-model-line {
display: block;
width: 100%;
text-align: left;
}
/* Color-section header: hide the color title (redundant with Model line),
push Size Guide button to the right so it doesn't orphan-left. */
#px-color-title {
display: none !important;
}
/* Size Guide is moved into .px-size-info by JS on mobile.
The now-empty .px-model-header and .block-parent collapse.
Classic's .sizeguidebtn has class "hidden" by intent — honor it. */
.px-wrap .px-model-header,
.px-wrap .block-parent:empty,
.sizeguidebtn.hidden {
display: none !important;
}
.px-wrap .px-size-info {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.px-wrap .px-size-info .sizeguidebtn {
margin-left: auto;
white-space: nowrap;
/* Visual chip so "Size Guide" reads as a distinct action,
not as part of the variant name (e.g. "Medium (145mm) Size Guide"). */
padding: 4px 10px;
border: 1px solid #222;
border-radius: 999px;
text-decoration: none;
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.2;
background: transparent;
color: #222;
}
.px-wrap .px-size-info .sizeguidebtn:hover,
.px-wrap .px-size-info .sizeguidebtn:focus {
background: #222;
color: #fff;
}
/* Match lens-picker side inset to the rest of the configurator (swatches, mirror).
trieye-product.css sets .px-wrap horizontal padding; we zero the extra
15px padding on .px-lens so the buttons align with swatch/mirror edges. */
.product__media__wrapper > .px-lens,
.px-wrap > .px-lens {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* === Model line under the product title (mobile only) === */
.px-model-line {
display: block;
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #666;
line-height: 1.4;
margin: 2px 0 4px;
}
.px-model-line:empty {
display: none;
}
/* === Tighter section rhythm (mobile) === */
.px-wrap > .px-block {
margin-top: 16px;
}
.px-wrap > .px-lens {
padding: 0 15px 12px;
}
.trieye-mobile-title {
margin-bottom: 8px;
}
}
/* "From" price prefix — works on both mobile and desktop */
[data-product-price]::before {
content: 'From ';
font-weight: 400;
font-size: 0.85em;
}
/* Desktop: ensure mobile elements don't show in gallery area */
@media (min-width: 768px) {
.product__media__wrapper > .title-price-wrapper,
.product__media__wrapper > .px-lens {
display: none !important;
}
.product__main__content .title-price-wrapper {
display: flex !important;
}
/* Hide theme's native Flickity + sidebar thumbs on desktop */
[data-product-slideshow],
[data-thumbs-holder] {
display: none !important;
}
/* Override sticky on media wrapper — stacked grid scrolls naturally */
.product__media__wrapper {
position: relative !important;
top: auto !important;
}
/* Make right column sticky so product info stays visible while scrolling images */
.product__main__content {
position: sticky !important;
top: 100px;
align-self: flex-start;
}
}
/* TriEye Custom Gallery — replaces Flickity for filtered variant images */
.trieye-gallery {
position: relative;
width: 100%;
margin-bottom: 10px;
}
/* Desktop: 3-section layout — vertical thumb column on left + main hero on right,
with lifestyle grid spanning the full width below.
Uses CSS grid-template-areas so visual order (thumbs left of main) doesn't
need to match DOM order (JS builds main before thumbs). */
@media (min-width: 768px) {
.trieye-gallery {
display: grid;
grid-template-columns: 88px 1fr;
grid-template-areas:
"thumbs main"
"lifestyle lifestyle";
gap: 12px;
align-items: start;
}
.trieye-gallery__main { grid-area: main; }
.trieye-gallery__thumbs { grid-area: thumbs; }
.trieye-gallery__lifestyle { grid-area: lifestyle; }
.trieye-gallery__dots {
display: none;
}
/* Legacy grid track (kept in case old layout ever renders) */
.trieye-gallery__track {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
overflow: visible;
scroll-snap-type: none;
}
/* Legacy first-slide hero — scoped to __track so it doesn't affect the
new .trieye-gallery__lifestyle grid's first child */
.trieye-gallery__track > .trieye-gallery__slide:first-child {
grid-column: 1 / -1;
aspect-ratio: 4 / 3;
}
/* Generic slide (used by lifestyle grid + legacy track) */
.trieye-gallery__slide {
display: block;
cursor: pointer;
border-radius: 10px;
overflow: hidden;
aspect-ratio: 1 / 1;
background: #f8f8f8;
}
.trieye-gallery__slide img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: 10px;
}
/* Video slide */
.trieye-gallery__slide--video {
position: relative;
cursor: pointer;
}
.trieye-gallery__slide--video iframe,
.trieye-gallery__slide--video video {
width: 100%;
aspect-ratio: 1/1;
border-radius: 10px;
display: block;
}
.trieye-gallery__slide--video .trieye-play-overlay {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 56px; height: 56px;
background: rgba(0,0,0,0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.trieye-play-overlay svg {
width: 24px; height: 24px;
fill: white;
margin-left: 3px;
}
/* ── Main hero image (section 1) ──
Source images are 1×1 (square) but the product only occupies the middle
band of the vertical space. We crop ~12% off the top and bottom via CSS
(aspect-ratio 4:3 + object-fit:cover) so the product fills more of the
visible area without altering the underlying image file.
This crop applies ONLY to the main hero — thumbnails and lifestyle grid
render the full uncropped image. */
.trieye-gallery__main {
position: relative;
aspect-ratio: 4 / 3;
background: #f7f7f7;
border-radius: 10px;
overflow: hidden;
cursor: zoom-in;
/* margin-bottom removed — grid `gap` now handles spacing to lifestyle row */
}
.trieye-gallery__main img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
transition: transform 0.2s ease;
}
.trieye-gallery__main:hover img {
transform: scale(1.015);
}
/* ── Technical thumbnail column (section 2) ──
Vertical stack on the left of the main hero. Each thumb is 80×80,
same width as the parent grid column (~88px) minus the 2px border.
`align-self: center` centers the stack vertically against the taller
main-hero column without stretching the thumbs container itself. */
.trieye-gallery__thumbs {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
align-self: center;
}
.trieye-gallery__thumb {
/* Kept as 1:1 squares — crop only applies to the main hero, thumbs show
the full image so the user can see the actual shot they're selecting. */
width: 80px;
height: 80px;
border-radius: 6px;
overflow: hidden;
cursor: pointer;
background: #f7f7f7;
border: 2px solid transparent;
padding: 0;
flex-shrink: 0;
transition: border-color 0.15s ease, transform 0.15s ease;
appearance: none;
-webkit-appearance: none;
}
.trieye-gallery__thumb:hover { transform: translateY(-1px); }
.trieye-gallery__thumb.is-active { border-color: #111; }
.trieye-gallery__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
border-radius: 0;
}
.trieye-gallery__thumb:focus-visible {
outline: none;
border-color: #EF4136;
}
/* ── Lifestyle grid (section 3) ── */
.trieye-gallery__lifestyle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
/* Lifestyle slides inherit .trieye-gallery__slide styling above;
no first-child full-width override (we keep a clean 2-col grid). */
/* Placeholder slots — visible "coming soon" style */
.trieye-gallery__slide--placeholder {
background: #f5f5f5;
border: 2px dashed #d0d0d0;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
}
}
/* ── TriEye Lightbox (fullscreen gallery overlay) ── */
.trieye-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
}
.trieye-lightbox.is-open {
display: flex;
}
.trieye-lightbox__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.92);
}
.trieye-lightbox__content {
position: relative;
z-index: 1;
width: 90vw;
height: 90vh;
display: flex;
align-items: center;
justify-content: center;
}
.trieye-lightbox__media {
max-width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.trieye-lightbox__img {
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
border-radius: 4px;
user-select: none;
-webkit-user-drag: none;
}
.trieye-lightbox__video {
width: 80vw;
height: 70vh;
max-width: 960px;
max-height: 540px;
border: none;
border-radius: 4px;
}
/* Nav buttons */
.trieye-lightbox__close,
.trieye-lightbox__prev,
.trieye-lightbox__next {
position: absolute;
z-index: 2;
background: none;
border: none;
color: #fff;
cursor: pointer;
padding: 12px;
opacity: 0.8;
transition: opacity 0.2s;
}
.trieye-lightbox__close:hover,
.trieye-lightbox__prev:hover,
.trieye-lightbox__next:hover {
opacity: 1;
}
.trieye-lightbox__close {
top: 16px;
right: 16px;
font-size: 32px;
line-height: 1;
font-weight: 300;
}
.trieye-lightbox__prev {
left: 12px;
top: 50%;
transform: translateY(-50%);
}
.trieye-lightbox__next {
right: 12px;
top: 50%;
transform: translateY(-50%);
}
.trieye-lightbox__counter {
position: absolute;
z-index: 2;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.5px;
}
/* Gallery slides cursor hint */
@media (min-width: 768px) {
.trieye-gallery__slide {
cursor: zoom-in;
}
}
/* Mobile: horizontal scroll-snap carousel */
@media (max-width: 767px) {
.trieye-gallery__track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: none;
border-radius: 14px;
/* Prevent tallest slide from stretching all others (e.g. a 1:1 image
stretching landscape slides and leaving empty space below them). */
align-items: flex-start;
}
.trieye-gallery__track::-webkit-scrollbar {
display: none;
}
.trieye-gallery__slide {
flex: 0 0 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
/* Force a consistent 4:3 frame on mobile so mixed aspect ratios
(some 4:3, some 1:1) don't create visual jumps between slides. */
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.trieye-gallery__slide img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
border-radius: 14px;
}
.trieye-gallery__thumbs {
display: none;
}
.trieye-gallery__dots {
display: flex;
justify-content: center;
gap: 6px;
padding: 10px 0;
}
.trieye-gallery__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(0,0,0,0.2);
cursor: pointer;
transition: background 0.2s;
}
.trieye-gallery__dot.is-active {
background: #000;
}
}
/* ─── Classic — Included spare lens card + explainer modal ─────────────── */
/* Self-contained styles: the base .addon-category-btn CSS lives inside a