/** Shopify CDN: Minification failed

Line 295:0 Unexpected "}"

**/
/* OneFit 14-day trial lander (sections/onefit-trial.liquid), 2026-10-17.

   Grüns' first-order page laid out in the V88 system, as the 4.7 landers:
   - the V88 frame: 1324px of content;
   - the V88 palette: ink #3F3F3F, cool greys (#F7F6FA / #EEECF3), V88 blue
     (#0051FF) for ticks, stars, chips and CTAs, V88 green (#34C759) for
     the trial badge and pill only;
   - the V88 CTA: 4px corners;
   - the photo ground #E7E7E7, the studio grey of the real 4.7 shots, so
     the sachet sits in its panel with no edge.
   Every rule is under .oft; the theme's h1/h2/p/ul rules are reset here.
   Breakpoints: phone < 750, tablet 750-989, desktop >= 990. */

@font-face{font-family:"Tomato Grotesk Regular";font-weight:400;font-style:normal;font-display:swap;src:url(twostrong-26-05e0f204.woff2) format("woff2")}
@font-face{font-family:"Tomato Grotesk Bold";font-weight:700;font-style:normal;font-display:swap;src:url(twostrong-28-74df4368.woff2) format("woff2")}

.oft{
  --o-blue:#0051FF;
  --o-blue-dk:#0045D9;
  --o-green:#34C759;
  --o-ink:#17171A;   /* Oct 18: "text needs better black" (was #3F3F3F) */
  --o-ink-2:#3C3C44;
  --o-mute:#55555E;
  --o-grey:#F7F6FA;
  --o-grey-2:#EEECF3;
  --o-line:#DCDAE3;
  --o-tint:#E8EEFF;
  --o-photo:#E7E7E7;
  --o-r:12px;
  --o-pad:56px;
  --o-bold:"Tomato Grotesk Bold",system-ui,-apple-system,sans-serif;
  color:var(--o-ink);
  font-family:"Tomato Grotesk Regular",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:990px){ .oft{ --o-pad:96px; } }
.oft *,.oft *::before,.oft *::after{box-sizing:border-box}
/* Not inside .v88 (the buy box, Oct 30): that block is v88.css's, as on the main OneFit PDP. :where() keeps these at their old weight. */
.oft :is(h1,h2,h3,p,ul,ol,li,figure,fieldset,legend):not(:where(.v88 *)){margin:0;padding:0;letter-spacing:normal;text-transform:none;border:0}
.oft ul,.oft ol{list-style:none}
.oft img:not(:where(.v88 *)){display:block;max-width:100%;height:auto}
.oft sup:not(:where(.v88 *)){font-size:.5em;vertical-align:super;line-height:0;top:auto}
.oft section{scroll-margin-top:110px}
.oft .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.oft-wrap{width:100%;max-width:1372px;margin:0 auto;padding:0 24px}
@media (max-width:749px){ .oft-wrap{ padding:0 16px; } }

/* ---- type ---- */
.oft .oft-h2{font-family:var(--o-bold);font-weight:700;font-size:clamp(30px,3.6vw,46px);line-height:1.08;letter-spacing:-.01em;text-transform:uppercase;color:var(--o-ink);text-wrap:balance}
.oft .oft-lead{margin-top:14px;font-size:18px;line-height:1.5;color:var(--o-ink)}
.oft .oft-center{text-align:center}

/* ---- buttons ---- */
.oft .oft-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:14px 34px;border:1px solid rgba(255,255,255,.28);border-radius:10px;
  background:var(--o-blue);color:#fff;font-family:var(--o-bold);font-weight:700;font-size:18px;line-height:1.1;text-align:center;text-decoration:none;cursor:pointer;
  /* The main site's CTA glow (v88.css .v88-pick__cta), box-shaped on request (Oct 18, 10px corners like .v88-pdp__cta): blue with a soft blue glow and a light inner sheen; on hover it lifts 2px and deepens. */
  box-shadow:0 0 14px rgba(1,113,227,.45),0 6px 18px -6px rgba(0,81,255,.55),inset 1px 1px 4px rgba(255,255,255,.28),inset 2px 2px 9px rgba(255,255,255,.18);
  transform-origin:bottom;transition:transform .3s,box-shadow .3s,background-color .3s}
@media (hover:hover){
  .oft .oft-btn:not(:disabled):hover{transform:translateY(-2px);background:#0D4FDD;color:#fff;box-shadow:0 0 20px rgba(1,113,227,.55),0 10px 24px -8px rgba(0,81,255,.6),inset 1px 1px 4px rgba(255,255,255,.3),inset 2px 2px 9px rgba(255,255,255,.2);transition:all .6s}
}
.oft .oft-btn:active{transform:scale(.985)}
.oft .oft-btn:focus-visible{outline:3px solid rgba(0,81,255,.35);outline-offset:3px}
.oft .oft-btn:disabled{background:#B9B8C0;box-shadow:none;cursor:not-allowed;transform:none}
.oft .oft-btn--lg{min-height:62px;padding:16px 44px;font-size:20px}
.oft .oft-btn--block{display:flex;width:100%}

/* ---- stars, ticks, icons ---- */
.oft .oft-stars{display:inline-flex;gap:2px;flex:none}
.oft .oft-stars i{width:16px;height:16px;background:var(--o-blue);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.2.8-5.4 4.9 1.5 7.1L12 17.6l-6.4 3.6 1.5-7.1L1.7 9.2l7.2-.8z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.2.8-5.4 4.9 1.5 7.1L12 17.6l-6.4 3.6 1.5-7.1L1.7 9.2l7.2-.8z'/%3E%3C/svg%3E") center/contain no-repeat}
.oft .oft-tick{flex:none;width:22px;height:22px;margin-top:1px;color:var(--o-blue)}
.oft .oft-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--o-blue)}
.oft .oft-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.oft .oft-checks{display:grid;gap:12px}
.oft .oft-checks li{display:flex;gap:12px;align-items:flex-start;font-size:18px;line-height:1.4}

/* ---- social proof (hero) ---- */
.oft .oft-proof{display:flex;align-items:center;gap:12px}
.oft .oft-proof__faces{display:flex;flex:none}
.oft .oft-proof__faces img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid #fff}
.oft .oft-proof__faces img + img{margin-left:-12px}
.oft .oft-proof__txt{display:flex;flex-direction:column;gap:2px;font-size:16px;line-height:1.3}
.oft .oft-proof__top{display:flex;align-items:center;gap:8px;white-space:nowrap}
.oft .oft-proof__top b{font-family:var(--o-bold)}
.oft .oft-proof__sub{color:var(--o-ink-2)}

/* ================= HERO ================= */
.oft-hero{padding:48px 0 var(--o-pad);background:var(--o-grey)}
.oft-hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
/* Hierarchy (Oct 18): a bigger title over a smaller sub, checks and flavour line, so the four no longer read at one size. */
.oft .oft-hero__title{margin-top:24px;font-family:var(--o-bold);font-weight:700;font-size:clamp(46px,5.6vw,80px);line-height:.98;letter-spacing:-.015em;text-transform:uppercase;color:var(--o-ink);text-wrap:balance}
.oft .oft-hero__title span{color:var(--o-blue)}
.oft .oft-hero__sub{margin-top:22px;font-size:17px;line-height:1.55;max-width:560px;color:var(--o-ink-2)}
.oft-hero .oft-checks{margin-top:26px;gap:12px;max-width:600px}
.oft-hero .oft-checks li{align-items:flex-start}
.oft-hero .oft-checks .oft-tick{margin-top:1px}
.oft .oft-hero .oft-checks li{font-size:17px;color:var(--o-ink)}
.oft .oft-hero__line{margin-top:28px;padding-top:22px;border-top:1px solid var(--o-line);max-width:600px;font-family:var(--o-bold);font-size:17px;color:var(--o-ink)}
.oft-cta-wrap{position:relative;display:inline-flex;flex-direction:column;align-items:center;margin-top:26px}
.oft .oft-cta-badge{position:relative;z-index:1;margin-bottom:-13px;padding:5px 14px;border-radius:999px;background:var(--o-green);color:#fff;font-family:var(--o-bold);font-size:13px;line-height:1.2;letter-spacing:.1em;text-transform:uppercase}
.oft-cta-wrap .oft-btn{min-width:min(420px,100%);padding-top:20px}
.oft-hero__media{border-radius:var(--o-r);background:var(--o-photo);overflow:hidden;aspect-ratio:4/5;max-height:640px;justify-self:end;width:100%;max-width:560px}
.oft-hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}

@media (max-width:989px){
  .oft-hero{padding-top:28px}
  .oft-hero__grid{grid-template-columns:1fr;gap:28px}
  .oft-hero__media{order:-1;justify-self:center;max-width:460px;aspect-ratio:1/1}
}
@media (max-width:749px){
  .oft .oft-proof__txt{font-size:14px}
  .oft .oft-proof__faces img{width:34px;height:34px}
  .oft .oft-hero__title{margin-top:18px;font-size:44px}
  .oft .oft-hero__sub{font-size:15px}
  .oft .oft-hero .oft-checks li{font-size:15px}
  .oft .oft-checks li{font-size:16px}
  .oft-hero__media{aspect-ratio:4/3.4}
  .oft-cta-wrap{display:flex}
  .oft-cta-wrap .oft-btn{width:100%;min-width:0;font-size:18px}
}

/* ================= ALL THE MILKSHAKE ================= */
.oft-lot{padding-bottom:var(--o-pad);background:#fff}
.oft-lot__band{padding:56px 24px 40px;background:linear-gradient(180deg,var(--o-tint) 0%,#fff 100%);text-align:center}
.oft .oft-lot__upper{max-width:980px;margin:0 auto;font-family:var(--o-bold);font-weight:700;font-size:clamp(34px,5vw,72px);line-height:1;letter-spacing:-.015em;text-transform:uppercase;color:var(--o-blue);text-wrap:balance}
.oft-lot__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding-top:16px}
.oft-lot__media{border-radius:var(--o-r);background:var(--o-photo);overflow:hidden;aspect-ratio:1/1;max-width:560px;width:100%;justify-self:center}
.oft-lot__media img{width:100%;height:100%;object-fit:cover}
.oft-lot__copy{text-align:center}
.oft .oft-lot__title span{color:var(--o-blue)}
.oft .oft-pillars{display:grid;grid-template-columns:1fr 1fr;gap:36px 32px;margin-top:44px}
.oft .oft-pillars .oft-ic{width:30px;height:30px;margin:0 auto 10px}
.oft .oft-pillars h3{font-family:var(--o-bold);font-weight:700;font-size:21px;line-height:1.2}
.oft .oft-pillars p{margin-top:8px;font-size:16px;line-height:1.5}
@media (max-width:989px){
  .oft-lot__grid{grid-template-columns:1fr;gap:32px}
  .oft-lot__media{max-width:520px;margin:0 auto;width:100%}
}
@media (max-width:749px){
  .oft-lot__band{padding:40px 16px 24px}
  .oft .oft-pillars{grid-template-columns:1fr;gap:28px;margin-top:32px}
}

/* ================= BUY BOX ================= */
/* The main OneFit PDP's buy box (Oct 30, "like the main pdp ... just the styling"): the markup wears
   v88-buybox's classes, so v88.css draws the panel, cards, toggle, total and button. This sheet adds
   only the lander's head over it and the gallery, which is this page's own (sachet shots, not the
   PDP's Swiper), dressed as the PDP's: a square shot, 80px thumbs on a rail at its left from 992 up,
   six across under it below. */
.oft-buy{padding:var(--o-pad) 0;background:#fff;border-top:1px solid var(--o-grey-2)}
.oft-buy__head{text-align:center;margin-bottom:40px}
.oft .oft-pill{display:inline-block;padding:8px 18px;border-radius:999px;background:var(--o-green);color:#fff;font-family:var(--o-bold);font-size:14px;line-height:1.2}
.oft .oft-buy__headline{margin:16px auto 0;max-width:900px}
.oft .oft-pdp{padding-top:0;padding-bottom:0}
/* The rail and its steppers sit inside the hero, so it does not clip; the shot carries the corners. */
.oft .oft-pdp .v88-pdp__hero{overflow:visible;border-radius:0}
.oft-pdp__ship .oft-ic{width:18px;height:18px;color:currentColor}
/* The title is an h3 here (the head above is the h2); the theme's heading case and tracking stay off it. */
.oft .oft-pdp .v88-pdp__title{letter-spacing:normal;text-transform:none}

/* gallery */
.oft-gal{display:grid;grid-template-columns:80px minmax(0,1fr);gap:10px;position:relative}
.oft-gal :is(figure,p,ul,li){margin:0;padding:0}
.oft-gal ul{list-style:none}
.oft-gal__stage{grid-column:2;grid-row:1;position:relative}
.oft-gal__slide{display:none;position:relative;border-radius:16px;background:var(--o-photo);overflow:hidden;aspect-ratio:1/1;transform:translateZ(0)}
.oft-gal__slide.is-on{display:block}
.oft .oft-gal__slide > img{display:block;width:100%;height:100%;object-fit:cover}
.oft-gal__slide--fit{background:#EEEEF0;box-shadow:inset 0 0 0 1px var(--o-line)}
.oft .oft-gal__slide--fit > img{object-fit:contain}
.oft-gal__slide figcaption{position:absolute;left:16px;bottom:16px;padding:8px 14px;border-radius:999px;background:#fff;font-family:var(--o-bold);font-size:14px}
/* The thumbs never set the row's height (height 0, min 100%): the shot does, and the rail scrolls. */
.oft-gal__thumbs{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:10px;height:0;min-height:100%;overflow-y:auto;scrollbar-width:none}
.oft-gal__thumbs{scroll-snap-type:y mandatory;overscroll-behavior:contain}
/* Up/down steppers over the rail, a thumb at a time (Oct 18: no thumb left half-cut). */
.oft-gal__nav{position:absolute;left:22px;z-index:2;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--o-ink);box-shadow:0 4px 14px rgba(30,40,90,.18);cursor:pointer}
.oft-gal__nav[hidden]{display:none}
.oft-gal__nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.oft-gal__nav--prev{top:-10px}
.oft-gal__nav--next{bottom:-10px}
.oft-gal__thumbs::-webkit-scrollbar{display:none}
/* The PDP's thumb: a grey 2px edge, blue on the shot on show. */
.oft-gal__thumbs button{flex:none;display:block;width:80px;height:var(--oft-th,80px);scroll-snap-align:start;padding:0;border:2px solid #E3E3E8;border-radius:8px;background:var(--o-photo);overflow:hidden;cursor:pointer;transition:border-color var(--v88-t) var(--v88-ease)}
.oft-gal__thumbs button.is-on{border-color:var(--v88-blue)}
.oft .oft-gal__thumbs img{display:block;width:100%;height:100%;object-fit:cover}
.oft-gal__thumbs button.is-fit{background:#fff}
.oft .oft-gal__thumbs button.is-fit img{object-fit:contain}

/* the PDP image: banner + callouts over the real sachet photo */
.oft-lead{display:none;flex-direction:column}
/* The slide shares its class with the paragraph style .oft-lead (top margin 14px), which pushed it below the thumbs (Oct 18). */
.oft .oft-gal__slide.oft-lead{margin-top:0;font-size:inherit}
.oft-lead.is-on{display:flex}
.oft .oft-lead__banner{padding:12px 16px;background:var(--o-blue);color:#fff;font-family:var(--o-bold);font-size:clamp(13px,1.15vw,16px);line-height:1.2;text-align:center;text-transform:uppercase;letter-spacing:.02em}
.oft-lead__body{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,1fr) 38%;min-height:0}
.oft .oft-lead__body > img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.oft .oft-lead__side{display:flex;flex-direction:column;justify-content:space-evenly;margin:14px 14px 14px 0;padding:6px 10px;min-height:0;overflow:hidden;border:1.5px solid var(--o-ink);border-radius:10px;background:rgba(255,255,255,.72)}
.oft .oft-lead__side li{display:flex;flex-direction:column;align-items:center;gap:4px;padding:2px 0;text-align:center;font-family:var(--o-bold);font-size:clamp(12px,1vw,14px);line-height:1.2;color:var(--o-ink)}
.oft .oft-lead__side .oft-ic{width:clamp(20px,1.9vw,28px);height:clamp(20px,1.9vw,28px);color:var(--o-ink)}

/* Below 992 the PDP stacks: thumbs in a row under the shot, six across (v88.css, Emily Oct 14). */
@media (max-width:991px){
  .oft-gal{grid-template-columns:minmax(0,1fr);gap:16px}
  .oft-gal__stage{grid-column:1}
  .oft-gal__slide{border-radius:14px}
  .oft-gal__thumbs{grid-column:1;grid-row:2;flex-direction:row;gap:8px;height:auto;min-height:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory}
  .oft-gal__thumbs button{width:var(--oft-tw,calc((100% - 40px) / 6));height:auto;aspect-ratio:1/1}
  .oft-gal__nav{display:none!important}
}
@media (max-width:749px){
  .oft-buy__head{margin-bottom:24px}
  .oft-lead__body{grid-template-columns:minmax(0,1fr) 44%}
  .oft .oft-lead__side{margin:10px 10px 10px 0;padding:4px 6px}
  .oft .oft-lead__side li{font-size:11.5px;gap:2px;padding:1px 0}
  .oft .oft-lead__side .oft-ic{width:19px;height:19px}
}

/* ================= YOUR PLATE ================= */
.oft-plate{padding:var(--o-pad) 0;background:linear-gradient(180deg,var(--o-tint) 0%,var(--o-grey) 100%)}
.oft-plate__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.oft-plate__copy{text-align:center}
.oft .oft-stats{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:36px 0 32px}
.oft .oft-stat b{display:block;font-family:"Tomato Grotesk Regular",sans-serif;font-weight:400;font-size:clamp(56px,6.4vw,92px);line-height:1;letter-spacing:-.03em;color:var(--o-ink)}
.oft .oft-stat p{margin-top:12px;font-size:16px;line-height:1.45}
.oft .oft-src{margin-top:12px;font-size:12px}
.oft .oft-src a{color:var(--o-mute);margin:0 4px}

/* The ring (Oct 18): a cut-out sachet on a soft disc, eight items on an ellipse round it.
   Each item is placed by its centre (--x/--y), so they sit evenly whatever the label length. */
.oft .oft-ring{position:relative;width:100%;max-width:600px;margin:0 auto;aspect-ratio:1/1}
.oft .oft-ring__powder{position:absolute;left:50%;top:50%;width:78%;height:auto;transform:translate(-50%,-50%);mix-blend-mode:multiply;pointer-events:none}
.oft .oft-ring__pack{position:absolute;left:50%;top:50%;height:66%;transform:translate(-50%,-50%) rotate(-6deg);filter:drop-shadow(0 22px 26px rgba(30,40,90,.18)) drop-shadow(0 4px 6px rgba(30,40,90,.08))}
.oft .oft-ring__pack img{width:auto;height:100%}
.oft .oft-ring__list{position:absolute;inset:0}
.oft .oft-ring__i{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-22px);display:flex;flex-direction:column;align-items:center;gap:8px;width:128px;text-align:center;font-family:var(--o-bold);font-size:14px;line-height:1.25;color:var(--o-ink)}
.oft .oft-ring__i .oft-ic{width:44px;height:44px;padding:11px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(30,40,90,.10)}
.oft-ring__i--t1{--x:31%;--y:7%}
.oft-ring__i--t2{--x:69%;--y:7%}
.oft-ring__i--r1{--x:88%;--y:35%}
.oft-ring__i--r2{--x:88%;--y:65%}
.oft-ring__i--b2{--x:69%;--y:86%}
.oft-ring__i--b1{--x:31%;--y:86%}
.oft-ring__i--l2{--x:12%;--y:65%}
.oft-ring__i--l1{--x:12%;--y:35%}
@media (max-width:989px){
  .oft-plate__grid{grid-template-columns:1fr;gap:40px}
}
@media (max-width:749px){
  .oft .oft-stats{gap:16px;margin:28px 0 24px}
  .oft .oft-stat p{font-size:14px}
  /* Phone: the ring stays, tighter: smaller icons, narrower labels, a taller box so the sides clear the pack */
  .oft .oft-ring{aspect-ratio:1/1.12;max-width:400px}
  .oft .oft-ring__pack{height:52%}
  .oft .oft-ring__powder{width:66%}
  .oft .oft-ring__i{width:92px;gap:6px;font-size:12px;transform:translate(-50%,-18px)}
  .oft .oft-ring__i .oft-ic{width:36px;height:36px;padding:9px}
  .oft-ring__i--t1,.oft-ring__i--t2{--y:6%}
  .oft-ring__i--b1,.oft-ring__i--b2{--y:87%}
  .oft-ring__i--l1,.oft-ring__i--r1{--y:36%}
  .oft-ring__i--l2,.oft-ring__i--r2{--y:64%}
  .oft-ring__i--l1,.oft-ring__i--l2{--x:13%}
  .oft-ring__i--r1,.oft-ring__i--r2{--x:87%}
}

/* ================= REVIEWS: one drifting carousel (Oct 18) =================
   v88-rail.js wraps .oft-rrail in Swiper; until it does (or without it) the
   row is a plain horizontal scroller. Full bleed, as the clips below it. */
.oft-rev{padding:var(--o-pad) 0 40px;background:var(--o-grey);text-align:center}
.oft .oft-rev__score{display:inline-flex;align-items:center;gap:8px;font-size:16px}
.oft .oft-rev__score b{font-family:var(--o-bold)}
.oft .oft-rev__title{margin-top:12px}
.oft .oft-rrail{display:flex;gap:20px;margin-top:40px;overflow-x:auto;scrollbar-width:none}
.oft .oft-rrail::-webkit-scrollbar{display:none}
.oft .oft-rrail .swiper-slide{width:auto;height:auto}
.oft .oft-rcard{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none;width:380px;height:100%;padding:28px 28px 30px;border-radius:var(--o-r);background:#fff}
.oft .oft-rcard h3{font-family:var(--o-bold);font-weight:700;font-size:21px;line-height:1.25;text-wrap:balance}
.oft .oft-rcard p{font-size:16px;line-height:1.6}
.oft .oft-rcard b{margin-top:auto;padding-top:4px;font-family:var(--o-bold);font-size:16px}
@media (max-width:749px){
  .oft .oft-rrail{gap:14px;margin-top:28px}
  .oft .oft-rcard{width:290px;padding:22px 20px 24px}
  .oft .oft-rcard h3{font-size:19px}
  .oft .oft-rcard p{font-size:15px}
}
}

/* ================= HOW IT WORKS ================= */
/* Spacing lives on the inner wrap: the section's own padding was not reaching the page (Oct 18, the heading sat on the clips and the button on the comparison). */
.oft .oft-how{padding:0;background:#fff}
.oft .oft-how > .oft-wrap{padding-top:calc(var(--o-pad) + 16px);padding-bottom:calc(var(--o-pad) + 8px)}
.oft .oft-how__title{text-align:center}
.oft .oft-how__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:44px 0 40px}
.oft .oft-how__card{text-align:center}
.oft .oft-how__media{position:relative;margin-bottom:40px;border:2px solid var(--o-blue);border-radius:var(--o-r);background:var(--o-photo);aspect-ratio:1/0.92}
.oft-how__media img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--o-r) - 2px)}
.oft-how__icon--box img{width:auto!important;height:auto!important;max-width:82%;max-height:82%;object-fit:contain!important;border-radius:0!important;filter:drop-shadow(0 16px 18px rgba(30,40,90,.16))}
.oft-how__icon--pack img{width:auto!important;height:78%!important;object-fit:contain!important;border-radius:0!important;transform:rotate(-6deg);filter:drop-shadow(0 14px 16px rgba(30,40,90,.16))}
.oft-how__icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:calc(var(--o-r) - 2px);background:var(--o-tint);color:var(--o-blue)}
.oft-how__icon svg{width:22%;height:22%;max-width:64px;max-height:64px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.oft .oft-how__n{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;width:52px;height:52px;border:2px solid var(--o-blue);border-radius:50%;background:#fff;color:var(--o-blue);font-family:var(--o-bold);font-size:22px}
.oft .oft-how__card h3{font-family:var(--o-bold);font-weight:700;font-size:21px;line-height:1.2;text-wrap:balance}
.oft .oft-how__card p{margin-top:10px;font-size:16px;line-height:1.55}
@media (max-width:989px){ .oft .oft-how__list{grid-template-columns:1fr 1fr;gap:40px 20px} }
@media (max-width:749px){
  .oft .oft-how__list{grid-template-columns:1fr;gap:36px;margin:32px 0}
  .oft .oft-how__media{max-width:400px;margin-left:auto;margin-right:auto;aspect-ratio:16/10}
  .oft-how__media img{object-fit:cover}
  .oft-how .oft-btn{width:100%}
}

/* ================= COMPARISON ================= */
.oft-cmp{padding:var(--o-pad) 0;background:var(--o-grey)}
.oft-cmp__grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:48px;align-items:center}
.oft .oft-cmp__shot{margin-top:28px;border-radius:var(--o-r);background:var(--o-photo);overflow:hidden;aspect-ratio:4/5;max-width:380px}
.oft-cmp__shot img{width:100%;height:100%;object-fit:cover}
.oft-cmp__vs{display:none;gap:8px;margin-bottom:14px}
.oft-cmp__vs button{flex:1 1 0;min-height:44px;padding:8px 10px;border:1.5px solid var(--o-line);border-radius:999px;background:#fff;color:var(--o-ink);font-family:var(--o-bold);font-size:14px;line-height:1.15;cursor:pointer}
.oft-cmp__vs button[aria-pressed="true"]{border-color:var(--o-blue);background:var(--o-blue);color:#fff}
.oft-cmp__wrap{border-radius:var(--o-r);background:#fff;overflow:hidden;box-shadow:0 1px 0 var(--o-grey-2)}
.oft .oft-cmp__table{width:100%;border-collapse:collapse;border:0;margin:0;table-layout:fixed}
.oft .oft-cmp__table th,.oft .oft-cmp__table td{padding:16px 12px!important;border:0;border-bottom:1px solid var(--o-grey-2);text-align:center;vertical-align:middle;font-size:16px;line-height:1.3;background:none}
.oft .oft-cmp__table thead th,.oft .oft-cmp__table thead td{border-bottom:0;padding-top:20px!important;padding-bottom:20px!important;font-family:var(--o-bold);font-size:16px;color:var(--o-ink)}
.oft .oft-cmp__table tbody tr:last-child > *{border-bottom:0}
.oft .oft-cmp__table tbody th{text-align:left;padding-left:22px!important;font-family:var(--o-bold);font-weight:700;width:30%}
.oft .oft-cmp__table thead td{width:30%}
.oft .oft-cmp__table .oft-own{background:var(--o-tint)}
.oft .oft-cmp__table thead .oft-own{background:var(--o-blue);color:#fff}
.oft .oft-mark{display:inline-flex;width:26px;height:26px}
.oft .oft-mark svg{width:100%;height:100%}
.oft .oft-mark--yes{color:var(--o-blue)}
.oft .oft-mark--no{color:#D6D3D9}
@media (max-width:989px){
  .oft-cmp__grid{grid-template-columns:1fr;gap:28px}
  .oft-cmp__aside{text-align:center}
  .oft-cmp__shot{display:none}
}
@media (max-width:749px){
  .oft-cmp__vs{display:flex}
  .oft .oft-cmp__table th,.oft .oft-cmp__table td{font-size:14px;padding:13px 8px!important}
  .oft .oft-cmp__table tbody th{padding-left:14px!important;width:44%}
  .oft .oft-cmp__table thead td{width:44%}
  .oft-cmp[data-vs="3"] .oft-cmp__table :is(th,td):nth-child(4),
  .oft-cmp[data-vs="3"] .oft-cmp__table :is(th,td):nth-child(5),
  .oft-cmp[data-vs="4"] .oft-cmp__table :is(th,td):nth-child(3),
  .oft-cmp[data-vs="4"] .oft-cmp__table :is(th,td):nth-child(5),
  .oft-cmp[data-vs="5"] .oft-cmp__table :is(th,td):nth-child(3),
  .oft-cmp[data-vs="5"] .oft-cmp__table :is(th,td):nth-child(4){display:none}
}

/* ================= FAQ ================= */
.oft-faq{padding:var(--o-pad) 0;background:#fff}
.oft-faq__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.oft-faq__list{border-top:1px solid var(--o-line)}
.oft .oft-faq__item{border-bottom:1px solid var(--o-line)}
.oft .oft-faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;font-family:var(--o-bold);font-size:18px;line-height:1.35;cursor:pointer;list-style:none}
.oft .oft-faq__item summary::-webkit-details-marker{display:none}
.oft .oft-faq__chev{flex:none;width:22px;height:22px;fill:none;stroke:var(--o-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.oft .oft-faq__item[open] .oft-faq__chev{transform:rotate(180deg)}
.oft .oft-faq__item > div{padding:0 0 20px}
.oft .oft-faq__item p{font-size:16px;line-height:1.6}
@media (max-width:989px){ .oft-faq__grid{grid-template-columns:1fr;gap:24px} .oft-faq .oft-h2{text-align:center} }
@media (max-width:749px){ .oft .oft-faq__item summary{font-size:16px} }

/* ---- the clips under the reviews carousel: section v88-ugc, outside .oft (this sheet is this page's only) ---- */
section.shopify-section--v88-ugc{background:#F7F6FA!important}
.shopify-section--v88-ugc .v88-ugc{background:transparent;padding-top:8px;padding-bottom:56px}
/* The buy box is a .v88-pdp now (Oct 30), which turns on v88.css's PDP spacing for this rail (body:has(.v88-pdp)); the rail keeps the spacing it had. */
body section.shopify-section--v88-ugc [data-v88-rail].v88-ugc__rail{padding-inline:calc(50vw - 50%)}
@media (max-width:899px){
  body section.shopify-section--v88-ugc [data-v88-rail].v88-ugc__rail{margin-top:24px;gap:20px}
}
@media (min-width:990px){
  /* The OneFit V88 PDP's nine clips drift like its wall; tiles a touch bigger on this page */
  .shopify-section--v88-ugc [data-v88-rail].v88-ugc__rail{margin-top:8px;gap:28px}
  .shopify-section--v88-ugc .v88-ugc__tile{width:240px}
}

@media (prefers-reduced-motion:reduce){ .oft *{transition:none!important} }