/** Shopify CDN: Minification failed
Line 1984:0 Unexpected "}"
**/
/* Website fonts */
/* L6 v2 cache-bust 2026-05-11T17:18 — drawer footer twin-button parity */
/* 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));
}
}
/* Mobile pre-seed: the hero's `.use_pixels_650` rule from this file sets
the frame to 450px on mobile, but the heading wraps to many lines on
narrow viewports so the content stack ends up taller than 450px. The
Pipeline `singles()` JS then bumps min-height after first paint — the
user sees the hero load short then jump tall. Pre-seeding the visible
viewport height (svh excludes browser UI chrome) keeps initial paint
matched to the post-JS state. !important overrides JS's inline value. */
@media (max-width: 767px) {
.tri-hero-banner.js-overflow-container,
.tri-hero-banner [data-overflow-background] {
min-height: calc(100svh - var(--menu-height, 78px)) !important;
}
.tri-hero-banner .image__hero__frame[class*="use_pixels_"] {
height: calc(100svh - 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;
}
/* 2026-05-11 (L40b): square the footer top corners when the page ends
on the dark-mode community-reviews block. The 20px rounded white
corners look like they're cut OUT of the dark backdrop above —
visually jarring at the seam between sections. `:has()` is supported
across all evergreen browsers (Chrome 105+ / Safari 15.4+ / FF 121+);
no fallback needed for the Pipeline-base evergreen audience.
Scope: only when the FULL variant of community-reviews is present
(homepage, the 4 sport landing pages, all_reviews). Product pages
use the LITE variant which is light-mode and doesn't have this
visual seam problem. */
body:has(.community-reviews.community-reviews--full) footer.footer {
border-radius: 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: 310px 220px 220px;
align-items: start;
row-gap: 0;
column-gap: 80px;
width: 100%;
}
.footer__content__inner .float-grid .grid__item:nth-child(1) {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.footer__content__inner .float-grid .grid__item:nth-child(2) {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.footer__content__inner .float-grid .grid__item:nth-child(3) {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
.footer__content__inner .float-grid .grid__item:last-child {
grid-column: 3 / 4;
grid-row: 2 / 3;
margin-top: -40px;
}
.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;
/* 2026-05-19 (v24) — solid black with white text. CRO best practice
for primary CTAs: high-contrast solid color beats outline (~10-20%
conversion lift per Baymard's PDP tests). Black fits TriEye's
monochrome brand identity. */
background: #111 !important;
color: #fff !important;
border: 1.5px solid #111 !important;
font-weight: 700 !important;
}
.btn--add-to-cart:hover,
.btn--add-to-cart:focus-visible {
background: #000 !important;
border-color: #000 !important;
color: #fff !important;
}
input.quantity__input {
border-radius: 10px;
font-weight: 700 !important;
}
.product__block__quantity {
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 20px;
/* 2026-05-19 (cart-CRO): tighter — quantity sits inline next to ATC now,
so we don't need flex space-between (the Judge.me PNG that lived in
that empty space has been removed). */
}
/* 2026-05-19 (cart-CRO) — quantity stepper + Add-to-Cart on the same row.
product-buttons.liquid wraps the button in [data-atc-row] and a small
JS reparents the .product__block__quantity into that row. Once moved,
we just need flex-row CSS on the row and a fixed-width treatment on
the quantity stepper. The (now empty) original .product__block__quantity
block outside the row gets hidden via :has() — if it still contains the
stepper we leave it visible (fallback for browsers without :has() ). */
/* 2026-05-19 (v24) — Grid layout for qty + ATC with explicit 60px row.
Strengthened by also forcing height on internal children (quantity
stepper input + buttons, plus the .quantity__wrapper) so they can't
collapse smaller than 60px. The :empty fallback rule hides the
originally-rendered qty block left behind after JS reparenting. */
.product__submit__row {
display: grid;
grid-template-columns: 120px 1fr;
grid-auto-rows: 60px;
gap: 10px;
width: 100%;
align-items: stretch;
}
.product__submit__row > * {
height: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
box-sizing: border-box !important;
}
.product__submit__row .product__block__quantity {
margin: 0;
display: flex;
align-items: stretch;
justify-content: stretch;
}
.product__submit__row .quantity__wrapper {
width: 100%;
height: 60px;
min-height: 60px;
max-height: 60px;
box-sizing: border-box;
display: flex;
align-items: center;
}
.product__submit__row .quantity__wrapper input.quantity__input,
.product__submit__row .quantity__wrapper button.quantity__button {
height: 100%;
box-sizing: border-box;
}
.product__submit__row .btn--add-to-cart {
margin-bottom: 0 !important;
padding-top: 0;
padding-bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
/* 2026-05-19 (v37) — force the button text to stay on ONE line, even
when "Add to Cart · NOK 1,056.00" gets long. The default flex wrap
was breaking "Add to Cart" onto two lines on narrow viewports. */
white-space: nowrap;
overflow: hidden;
}
.product__submit__row .btn--add-to-cart .btn-state-ready,
.product__submit__row .btn--add-to-cart [data-add-to-cart-text],
.product__submit__row .btn--add-to-cart [data-button-price] {
white-space: nowrap;
}
.product__submit__row .btn--add-to-cart .btn-state-ready {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
/* On narrow viewports, drop the font a touch so the long currency strings
("NOK 1,056.00") still fit on one line alongside "Add to Cart". */
@media (max-width: 480px) {
.product__submit__row .btn--add-to-cart {
font-size: 15px;
}
}
@media (max-width: 380px) {
.product__submit__row .btn--add-to-cart {
font-size: 14px;
}
}
/* Hide the original empty .product__block__quantity wrapper that's left
behind after JS reparenting. */
.product__inner > .product__block__quantity:empty,
.product__block__quantity:not(:has(.quantity__wrapper)) {
display: none !important;
}
/* Mobile: tighter quantity column */
@media (max-width: 480px) {
.product__submit__row { gap: 8px; }
.product__submit__row .product__block__quantity { width: 108px; }
}
/* Trust signals block below the ATC button — spacing + alignment. */
.product__submit__trust {
margin-top: 18px;
width: 100%;
display: block;
/* 2026-05-19 (v20) — defensive overflow protection so the strip can't
escape its container width when the parent has unexpected constraints. */
max-width: 100%;
box-sizing: border-box;
overflow-wrap: break-word;
}
.product__submit__trust .cart-trust-strip {
margin: 0 0 4px;
max-width: 100%;
box-sizing: border-box;
}
/* 2026-05-19 (v20) — Defensive containment so the trust strip can't
overflow its parent on narrow viewports.
2026-05-20 cleanup — Dropped .pdp-social-proof selectors. The snippet
pdp-social-proof.liquid was superseded by pdp-cart-area (v63) and
has been deleted; the selectors no longer match any element. */
.cart-trust-strip,
.cart-drawer-trust-strip-wrap {
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.cart-trust-strip__item {
min-width: 0; /* allow children to shrink past content width */
overflow-wrap: anywhere;
}
/* Trust strip: at iPhone-and-narrower widths the three items ("4.9 (756)",
"50+ countries", "30-day hassle-free returns") don't all fit on one line.
Wrap to two rows instead of truncating the third item.
2026-05-19 (v22) — bumped breakpoint from 380px → 520px after seeing
"30-day hassle-free retur..." cut off on a 414px iPhone. */
@media (max-width: 520px) {
.cart-trust-strip {
flex-wrap: wrap;
justify-content: center;
row-gap: 6px;
column-gap: 12px;
}
.cart-trust-strip__item { white-space: normal; }
/* Override the v20 overflow:hidden so wrap can actually work — hidden
was preventing the second row from being visible. */
.cart-trust-strip { overflow: visible !important; }
}
.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__container.footer__container--reversed {
flex-direction: column;
gap: 0;
}
.footer__content__inner .float-grid {
display: flex !important;
row-gap: 0;
column-gap: 40px;
width: 100%;
justify-content: space-between;
margin: 0px;
}
.footer__content__inner .float-grid .grid__item:last-child {
margin-top: 0;
}
.footer .float-grid:after{
display:none;
}
.footer__aside {
display: flex;
flex: auto !important;
max-width: 360px !important;
margin-left: 0px !important;
padding: 0 !important;
align-items: flex-start;
margin-bottom: 80px;
}
.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 — 2026-05-20: uniform 10px padding per user. */
.cart-drawer-footer {
border-top: 1px solid #e8e8e8;
padding: 10px;
background: inherit;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}
/* 2026-05-20 — CHECKOUT button vertical padding + margin-top override
scoped to the cart drawer (matches the rule in sections/cart-drawer.liquid
inline style; duplicated here so custom.css ordering doesn't matter). */
.cart__drawer .btn.btn--large,
.cart__drawer .btn.btn--long {
padding-top: 10px !important;
padding-bottom: 10px !important;
margin-top: 0 !important;
}
/* 2026-05-20 — Payment icons row: 14px margin all sides. */
.cart-drawer-payment-icons .pdp-payment-icons {
margin: 14px !important;
}
.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 addons render with the same template as regular items.
The .cart-item--addon class is kept on the row for data/JS purposes
(e.g. analytics, future bundle handling) but no longer styles the row
any differently — bold product title + lighter variant text from the
default .cart__items__title / .cart__items__meta rules apply. */
/* Stock-aware quantity stepper: dim the wrapper at max stock,
visually disable the + button, surface a small "no more in stock" line. */
.quantity__button[disabled],
.quantity__button[aria-disabled="true"] {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
.quantity__wrapper[data-at-max-stock="true"] {
position: relative;
}
.cart__stock-msg {
display: block;
font-size: 11px;
line-height: 1.2;
color: #999;
margin-top: 4px;
white-space: nowrap;
text-align: center;
}
/* 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;
}
/* 2026-05-19 (v57) — Logo moved INTO the header flex row, no longer
a ::before pseudo-element. See cart-drawer.liquid for the inline
.cart-drawer-header__logo element + 3-column grid layout.
The swipe-zone narrows to a small slip centered on the logo so
it doesn't intercept taps on CART (n) or X. */
}
/* 2026-05-19 (v68) — Swipe-zone rules MOVED OUT of the mobile media
query. On desktop the swipe-zone (a DOM child of the header) was
acting as a normal grid item, taking the first column and pushing
the CART/logo/X layout into row 1 only with X wrapping to row 2.
`position: absolute` (regardless of viewport) keeps it out of the
grid flow. Touch-active only on small screens via the swipe JS
in cart-drawer.liquid (which already checks innerWidth ≤ 768). */
#drawer-cart .drawer__top.cart-drawer-header {
position: relative;
}
#drawer-cart .cart-drawer-swipe-zone {
position: absolute !important;
top: 0;
left: 50%; transform: translateX(-50%);
width: 90px; height: 100%;
z-index: 0;
pointer-events: none; /* keep grid cells tappable */
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;
}
/* Collapse Klaviyo's scroll-triggered fade-in animations to ~0ms on
mobile (instead of suppressing them outright).
History — two-step lesson:
v1: { animation: none; transition: none } on every kl-private-reset-css
descendant. Killed the jiggle, but blocked the CLOSE animation —
popup became undismissable on mobile (tap X did nothing because
animationend never fired).
v2: animation: none, but only on elements with klaviyo-fadein /
klaviyo-fadeinup applied inline. Close worked, but body scroll
stayed locked after close — Klaviyo's open-state machine listens
for animationend on the OPEN animation to mark the popup "fully
open"; without that, the close handler skipped the body-overflow
cleanup step.
v3 (current): keep the animation, just set its duration to ~0. The
visual fade-in collapses to imperceptible (no jiggle), but
animationend still fires, so Klaviyo's state machine and the
scroll-lock cleanup both run normally. */
[class*="kl-private-reset-css"][style*="klaviyo-fadein"],
[class*="kl-private-reset-css"] [style*="klaviyo-fadein"] {
animation-duration: 0.001ms !important;
animation-delay: 0s !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;
}
/* 2026-05-11: show the model name (product title) above the configurator
on mobile. The previous rule hid `.product__main__content .title-price-wrapper`
and a comment said "moved above on mobile" — but the replacement
`.trieye-mobile-title` element was never actually rendered in any
snippet, so the title disappeared entirely on mobile. Result: customers
scrolled past the gallery and saw "CHOOSE YOUR TYPE" with no model
name. Restoring the title where it sits in the DOM (top of the
configurator panel, above the lens picker / size / mirror sections). */
.product__main__content .title-price-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0 15px 12px;
margin-bottom: 4px;
text-align: left;
}
.product__main__content .title-price-wrapper .product__title {
font-size: 26px;
line-height: 1.1;
margin-bottom: 4px;
}
.product__main__content .title-price-wrapper .product__block__price {
margin-bottom: 0;
}
/* === 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;
}
/* 2026-05-12 (Quieter): show the inline SVG icon on mobile too.
Previously hidden because the old tiny tiles had no room. The
new Quieter tiles (3-col / 4-col grid via :has()) have plenty
of room and the lens icon now genuinely differentiates the
types at a glance — replacing a text-only label that read as
"Standard / Standard / Standard" of varying lengths. */
.px-lens .px-group .lens-card__icon {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 4px;
}
.px-lens .px-group .lens-card__icon svg {
width: 20px;
height: 20px;
}
/* 2026-05-21 v4 — A1 layout: 2 × 2 grid with cards wide enough that
long names like "Photochromic" fit on one line at 14px. So
`white-space: nowrap` is back (no breaks). Fonts at A1 baseline:
name 14 / sub 12 / price 14. Padding 14×10 (handled in
trieye-product.css). */
.px-lens .px-group .lens-card__name {
font-size: 14px;
font-weight: 700;
white-space: nowrap;
line-height: 1.2;
letter-spacing: 0;
display: block;
}
.px-lens .px-group .lens-card__price {
font-size: 14px;
font-weight: 700;
opacity: 1;
display: block;
/* 2026-05-21 — Per user: margin-top 4 → 2 for tighter stack */
margin-top: 2px;
}
.px-lens .px-group .lens-card__sub,
.px-lens .px-group .lens-card__desc {
font-size: 12px;
color: #666;
/* 2026-05-21 — Per user: margin-top 4 → 0 (sub line sits right
under the name) */
margin-top: 0;
}
/* === Clip-on size buttons (mobile @media; desktop rules below) ===
2026-05-11 revised: size buttons match the visual weight of the
Mirror Position cards above (padding 16px, white bg, subtle shadow).
2026-05-11 (v2): min-height: 64px + box-sizing: border-box so both
buttons are guaranteed identical-sized rectangles regardless of the
sub-text length difference. Earlier `min-height: auto` let Medium
and Small render at different heights — the screenshot showed the
Small button much shorter than Medium because the longer 'for
slightly smaller faces' line had been moved out (see snippet diff). */
.px-row.px-size-row--clip {
gap: 10px;
}
.px-row.px-size-row--clip button.px-btn {
box-sizing: border-box;
padding: 16px;
min-height: 64px;
gap: 4px;
background: #fff;
border: 1.5px solid #e0e0e0;
border-radius: 14px;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
justify-content: center;
}
.px-row.px-size-row--clip button.px-btn.active {
background: #111;
border-color: #111;
color: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.px-row.px-size-row--clip button.px-btn strong {
font-size: 15px;
font-weight: 700;
}
.px-row.px-size-row--clip button.px-btn .px-btn__sub {
font-size: 12px;
}
/* Caption line below the Medium/Small toggle — replaces the long
"for slightly smaller faces" sub-text that used to live inside the
Small button (and visually broke the row alignment). */
.px-size-caption {
margin: 6px 0 0;
font-size: 12px;
color: #666;
text-align: center;
line-height: 1.4;
}
/* 2026-05-12 (Quieter): the previous "compact lens info panel (mobile)"
block flattened the lens-detail card to a single row, hiding the
description, the transmission bar, and the category badge. With the
new Quieter design — gradient bar + two-marker Standard + clearer
hierarchy — that compaction throws away the most useful info.
Removed the aggressive hiding. Mobile now shows the full card,
same as desktop. The card itself is already compact (cream fill,
small text) so vertical cost is modest. */
/* === 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;
}
/* 2026-05-12 (Quieter): pill styling for Size Guide button. Now
applies to BOTH legacy nesting (.px-size-info > .sizeguidebtn —
Clip's px-model-header layout, Spare Lens) AND the new flex row
(.px-size-info-row > .sizeguidebtn — View). When inside
.px-size-info-row, the flex parent's `justify-content: space-
between` already right-aligns it; margin-left: auto is a safe
no-op in that context. */
.px-wrap .px-size-info .sizeguidebtn,
.px-wrap .px-size-info-row .sizeguidebtn {
margin-left: auto;
white-space: nowrap;
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,
.px-wrap .px-size-info-row .sizeguidebtn:hover,
.px-wrap .px-size-info-row .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 ONLY when
the custom .trieye-gallery is present (configurator products: View,
Classic, Clip, Spare Lens). Other products (accessories, sale,
replacement parts) have no custom gallery and rely on Flickity to
display images. The unscoped version of this rule was hiding gallery
images on those products entirely. */
.product__media__wrapper:has(.trieye-gallery) [data-product-slideshow],
.product__media__wrapper:has(.trieye-gallery) [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;
/* Pinch + drag-to-pan handled by JS; touch-action: none stops iOS
Safari from intercepting the pinch as a page-zoom. */
touch-action: none;
will-change: transform;
transition: transform 0.2s ease;
cursor: zoom-in;
}
.trieye-lightbox__img:active { cursor: grabbing; }
.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