.lo-offer-section { padding-block:clamp(56px,6vw,104px); color:#091808; background:#fff7e8; font-family:'LO Poppins',sans-serif; }
.lo-offer-section h1,.lo-offer-section h2,.lo-offer-section h3 { font-family:'LO Playfair',serif; font-weight:700; line-height:1.06; letter-spacing:-.025em; text-wrap:balance; }
.lo-offer-section h1 { font-size:clamp(48px,5.4vw,88px); }
.lo-offer-section h2 { font-size:clamp(36px,4vw,64px); }
.lo-offer-section h3 { font-size:28px; }
.lo-offer-section em { color:#405630; }
.lo-offer-section .brxe-text-basic { font-size:18px; line-height:1.7; width:100%; }
.lo-offer-section .lo-offer-kicker { font-size:13px; letter-spacing:.1em; text-transform:uppercase; }
.lo-offer-section .lo-offer-note { font-size:14px; line-height:1.7; }
.lo-offer-section .lo-offer-copy { gap:28px; min-width:0; }
.lo-offer-hero { padding-top:clamp(144px,12vw,190px); }
.lo-offer-hero > .brxe-container,.lo-offer-home > .brxe-container,.lo-offer-details > .brxe-container,.lo-offer-faq > .brxe-container,.lo-offer-join > .brxe-container { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(40px,6vw,112px); align-items:center; }
.lo-offer-visual { position:relative; background:#e8e4d9; border-radius:32px; padding:44px; min-width:0; align-items:center; gap:16px; }
.lo-offer-visual img { width:100%; height:clamp(300px,32vw,500px); object-fit:contain; mix-blend-mode:multiply; }
.lo-offer-visual .lo-offer-worth { position:absolute; top:28px; left:28px; width:auto; background:#fde739; border-radius:40px; padding:12px 20px; font-size:14px; transform:rotate(-5deg); }
.lo-offer-visual .lo-offer-pack-name { font:700 30px/1.2 'LO Playfair',serif; text-align:center; }
.lo-offer-visual .lo-offer-note { text-align:center; }
.lo-offer-section .lo-offer-price {
 align-self:flex-start; width:auto; max-width:100%;
 padding:10px 24px; border-radius:999px; background:#091808; color:#fff7e8;
 font:700 clamp(26px,2.6vw,36px)/1.25 'LO Playfair',serif; letter-spacing:-.02em;
}
.lo-offer-perks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; border-block:1px solid #09180824; padding-block:28px; width:100%; }
.lo-offer-perks > .brxe-block { gap:8px; }
.lo-offer-perks .brxe-heading { font-size:25px; }
.lo-offer-perks .brxe-text-basic { font-size:14px; }
/* The three inclusions read as cards rather than one bordered strip. */
.lo-offer-perks { border-block:0; padding-block:0; }
.lo-offer-perks > .brxe-block {
 padding:22px 20px; border-radius:16px; border:1px solid #09180820; background:#0918080a;
 align-self:stretch; height:100%;
}
.lo-offer-home .lo-offer-perks > .brxe-block { border-color:#fff7e82e; background:#fff7e80f; }
.lo-offer-details .lo-offer-steps { gap:0; }
.lo-offer-step { padding-block:28px; border-bottom:1px solid #09180824; gap:14px; }
.lo-offer-step:first-child { border-top:1px solid #09180824; }
.lo-offer-faq > .brxe-container { align-items:start; }
.lo-offer-faq .accordion-title-wrapper { padding:24px 0; border-bottom:1px solid #09180824; }
.lo-offer-faq .accordion-content-wrapper { padding:20px 0; }
.lo-offer-join > .brxe-container { background:#091808; color:#fff7e8; border-radius:28px; padding:clamp(28px,4vw,64px); }
.lo-offer-join em { color:#fde739; }
.lo-offer-section .lo-cta { width:100%; max-width:100%; }
.lo-offer-section .lo-cta__text { width:auto; min-width:0; white-space:normal; }
.brx-popup.lo-membership-popup { padding:24px; align-items:flex-end; justify-content:flex-end; pointer-events:none; }
.lo-membership-popup > .brx-popup-content { width:420px; max-width:100%; pointer-events:auto; background:transparent; }
.lo-popup-card { position:relative; padding:30px; border:1px solid #09180820; border-radius:24px; background:#fff7e8; color:#091808; box-shadow:0 16px 60px #09180824; gap:18px; font-family:'LO Poppins',sans-serif; }
.lo-popup-card h2 { font:700 34px/1.1 'LO Playfair',serif; letter-spacing:-.025em; }
.lo-popup-card .brxe-text-basic { font-size:14px; line-height:1.7; }
.lo-popup-card .lo-popup-kicker { font-size:12px; text-transform:uppercase; letter-spacing:.08em; padding-right:32px; }
.lo-popup-card .lo-popup-close { position:absolute; right:16px; top:14px; width:36px; height:36px; padding:0; border:0; background:transparent; color:#091808; font:400 28px/1 Arial; }
.lo-popup-card .lo-popup-link { background:#091808; color:#fff7e8; padding:14px 20px; border-radius:40px; text-align:center; width:100%; }
.lo-popup-card .lo-popup-link:hover { background:#fde739; color:#091808; }
.lo-popup-card .lo-popup-later { align-self:center; background:transparent; padding:4px; color:#091808; text-decoration:underline; text-underline-offset:4px; border:0; font-size:13px; }
.lo-popup-card :focus-visible { outline:2px solid #091808; outline-offset:4px; }
@media(max-width:767px){
 .lo-offer-hero > .brxe-container,.lo-offer-home > .brxe-container,.lo-offer-details > .brxe-container,.lo-offer-faq > .brxe-container,.lo-offer-join > .brxe-container { grid-template-columns:minmax(0,1fr); gap:36px; }
 .lo-offer-hero { padding-top:128px; }
 .lo-offer-visual { padding:24px; border-radius:24px; }
 .lo-offer-visual img { height:340px; }
 .lo-offer-visual .lo-offer-worth { top:20px; left:20px; }
 .lo-offer-perks { grid-template-columns:minmax(0,1fr); gap:24px; }
 .lo-offer-section .brxe-text-basic { font-size:16px; }
 .lo-offer-section .lo-offer-note { font-size:13px; }
 .brx-popup.lo-membership-popup { padding:16px; }
 .lo-popup-card { padding:24px; gap:14px; }
 .lo-popup-card h2 { font-size:30px; }
}
body.bricks-is-frontend #brx-content .lo-offer-section .lo-cta { width:fit-content; max-width:100%; justify-content:flex-start; gap:12px; }
body.bricks-is-frontend #brx-content .lo-offer-section .lo-cta__text { width:auto; flex:0 1 auto; text-align:left; }
.lo-offer-visual img { mix-blend-mode:normal; }
@media(max-width:767px){.lo-offer-section .lo-offer-price { font-size:40px; }.lo-offer-section .lo-offer-worth { font-size:13px; }.lo-offer-section .lo-offer-pack-name { font-size:26px; }}
.lo-offer-visual { background:#e7e1d5; }
.lo-offer-visual .lo-offer-worth { z-index:1; }
body.bricks-is-frontend #brx-content .lo-offer-section .lo-cta { align-items:center; }
body.bricks-is-frontend #brx-content .lo-offer-section .lo-cta__text { align-self:center; }
.lo-membership-popup > .brx-popup-content { padding:0; max-height:calc(100svh - 48px); overflow:auto; border-radius:24px; }
@media(max-width:767px){.lo-membership-popup > .brx-popup-content { max-height:calc(100svh - 32px); }}

/* The membership invitation uses the shop's forest green and yellow. */
.lo-offer-hero { padding-top:136px; padding-bottom:72px; }
.lo-offer-hero > .brxe-container,
.lo-offer-home > .brxe-container {
 background:#183322; color:#fff7e8; border-radius:16px;
 padding:clamp(28px,4vw,64px); gap:clamp(32px,4vw,64px);
 grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); overflow:hidden;
}
.lo-offer-home > .brxe-container { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
.lo-offer-hero .lo-offer-copy,.lo-offer-home .lo-offer-copy { gap:24px; }
.lo-offer-hero h1 { font-size:clamp(44px,4.7vw,76px); line-height:1.06; }
.lo-offer-home h2 { font-size:clamp(38px,4.1vw,64px); }
.lo-offer-hero em,.lo-offer-home em { color:#dce6b0; }
.lo-offer-hero .lo-offer-kicker,.lo-offer-home .lo-offer-kicker {
 display:flex; align-items:center; gap:12px; font-size:12px; letter-spacing:.1em;
}
.lo-offer-hero .lo-offer-kicker::before,.lo-offer-home .lo-offer-kicker::before {
 content:''; display:block; width:8px; height:8px; border-radius:50%; background:#fde739; flex-shrink:0;
}
.lo-offer-hero .lo-offer-price { font:500 clamp(28px,2.6vw,40px)/1.2 'LO Poppins',sans-serif; padding-top:4px; }
.lo-offer-hero .lo-offer-price + .lo-cta { margin-top:0; }
body.bricks-is-frontend #brx-content :is(.lo-offer-hero,.lo-offer-home) .lo-cta { color:#fff7e8; }
body.bricks-is-frontend #brx-content :is(.lo-offer-hero,.lo-offer-home) .lo-cta:hover,
body.bricks-is-frontend #brx-content :is(.lo-offer-hero,.lo-offer-home) .lo-cta:focus-visible { color:#091808; }
body.bricks-is-frontend #brx-content :is(.lo-offer-hero,.lo-offer-home) .lo-cta:focus-visible { outline:2px solid #fde739; outline-offset:5px; }
.lo-offer-hero .lo-offer-note { color:#d8dfd0; font-size:12px; }
.lo-offer-visual {
 isolation:isolate; border-radius:12px; padding:36px 28px 26px; color:#183322;
 background:#e8e2d6; min-height:490px; justify-content:flex-end; gap:8px;
}
.lo-offer-visual > img { height:360px; width:90%; align-self:flex-end; object-fit:contain; transform:rotate(7deg); mix-blend-mode:normal; }
.lo-offer-visual .lo-offer-worth { top:24px; left:24px; padding:10px 16px; font-size:12px; transform:none; }
.lo-offer-visual .lo-offer-pack-name { font-size:25px; margin-top:20px; }
.lo-offer-visual .lo-offer-note { color:#405630; font-size:12px; }
.lo-member-pass {
 position:absolute; left:20px; top:48%; z-index:1; width:56%; padding:22px;
 gap:12px; border-radius:10px; background:#24472f; color:#fff7e8;
 transform:rotate(-9deg); box-shadow:0 5px 8px #09180830;
}
.lo-member-pass::after { content:''; position:absolute; inset:8px; border:1px solid #dce6b04d; border-radius:5px; pointer-events:none; }
.lo-offer-section .lo-member-pass__brand { font:italic 700 26px/1.1 'LO Playfair',serif; color:#dce6b0; }
.lo-offer-section .lo-member-pass__title { font:700 clamp(17px,1.7vw,25px)/1.2 'LO Playfair',serif; }
.lo-offer-section .lo-member-pass__detail { font-size:9px; line-height:1.5; }
.lo-offer-home .lo-offer-perks { border-color:#fff7e833; gap:16px; padding-block:24px 0; border-bottom:0; }
.lo-offer-perks > .brxe-block::before {
 content:''; width:28px; height:28px; background:url('icons/supply.svg') center/contain no-repeat; margin-bottom:6px;
}
.lo-offer-perks > .brxe-block:nth-child(2)::before { background-image:url('icons/delivery.svg'); }
.lo-offer-perks > .brxe-block:nth-child(3)::before { background-image:url('icons/saving.svg'); }
.lo-offer-home .lo-offer-perks > .brxe-block::before { filter:brightness(0) invert(.92) sepia(.35) saturate(2); }
.lo-offer-home .lo-offer-perks .brxe-heading { font-size:22px; }
.lo-offer-home .lo-offer-perks .brxe-text-basic { font-size:12px; color:#d8dfd0; }
.lo-offer-details { padding-top:48px; }
/* The steps carry one continuous rail rather than a line per gap, so the
   progress fill can run the whole way down as the reader moves through them. */
.lo-offer-steps { position:relative; counter-reset:member-step; }
.lo-offer-steps::before,
.lo-offer-steps::after { content:''; position:absolute; left:18px; width:2px; border-radius:2px; }
.lo-offer-steps::before {
 top:23px; height:var(--lo-steps-rail,calc(100% - 46px)); background:#09180818;
}
.lo-offer-steps::after {
 top:23px; height:calc(var(--lo-steps-progress,0) * var(--lo-steps-rail,100% - 46px));
 background:#405630; transition:height 220ms linear;
}
.lo-offer-step { position:relative; padding:4px 0 clamp(44px,5vw,88px) 68px; border:0; gap:10px; counter-increment:member-step; }
.lo-offer-step:first-child { border:0; }
.lo-offer-step:last-child { padding-bottom:0; }
.lo-offer-step::before {
 content:counter(member-step); position:absolute; top:4px; left:0; width:38px; height:38px; z-index:1;
 display:grid; place-items:center; background:#183322; color:#fff7e8; border-radius:50%; font:500 14px/1 'LO Poppins',sans-serif;
}
/* Steps the reader has passed take the brand yellow, matching the filled rail. */
.lo-offer-step.is-reached::before { background:#fde739; color:#091808; }
.lo-offer-step .brxe-heading { font-size:25px; }
.lo-offer-step .brxe-text-basic { font-size:16px; }
@media(max-width:1023px) and (min-width:768px) {
 .lo-offer-hero > .brxe-container,.lo-offer-home > .brxe-container { gap:28px; padding:28px; }
 .lo-offer-visual { padding-inline:18px; min-height:460px; }
 .lo-member-pass { width:70%; left:12px; padding:18px; }
 .lo-offer-home .lo-offer-perks { grid-template-columns:minmax(0,1fr); gap:18px; }
 .lo-offer-home .lo-offer-perks > .brxe-block { display:grid; grid-template-columns:28px minmax(0,1fr); column-gap:12px; }
 .lo-offer-home .lo-offer-perks > .brxe-block::before { grid-row:1/3; }
 .lo-offer-home .lo-offer-perks .brxe-text-basic { grid-column:2; }
}
@media(max-width:767px) {
 .lo-offer-hero { padding-top:112px; padding-bottom:40px; }
 .lo-offer-hero > .brxe-container,.lo-offer-home > .brxe-container { grid-template-columns:minmax(0,1fr); gap:32px; padding:24px; }
 .lo-offer-hero h1 { font-size:clamp(36px,9vw,56px); }
 .lo-offer-home h2 { font-size:clamp(34px,8.5vw,50px); }
 .lo-offer-home .lo-offer-copy { grid-row:1; }
 .lo-offer-visual { min-height:400px; padding:24px 18px; }
 .lo-offer-visual > img { height:280px; }
 .lo-offer-visual .lo-offer-worth { top:16px; left:16px; font-size:11px; }
 .lo-member-pass { width:66%; top:40%; left:12px; padding:18px; }
 .lo-offer-section .lo-member-pass__brand { font-size:23px; }
 .lo-offer-section .lo-member-pass__title { font-size:21px; }
 .lo-offer-section .lo-member-pass__detail { font-size:9px; }
 .lo-offer-perks,.lo-offer-home .lo-offer-perks { grid-template-columns:minmax(0,1fr); gap:20px; }
 .lo-offer-perks > .brxe-block { display:grid; grid-template-columns:28px minmax(0,1fr); column-gap:14px; row-gap:4px; }
 .lo-offer-perks > .brxe-block::before { grid-row:1/3; }
 .lo-offer-perks .brxe-text-basic { grid-column:2; }
 .lo-offer-step { padding-left:52px; }
 .lo-offer-step .brxe-heading { font-size:23px; }
}

/* ---- Hover states ------------------------------------------------------
   Small rewards for exploring: the pack leans in, the numbered steps light
   up, and the included benefits lift. Nothing moves on a touch screen, and
   nothing moves at all under prefers-reduced-motion. */
@media(hover:hover) and (pointer:fine) {
 .lo-offer-visual img { transition:transform 620ms cubic-bezier(.2,.9,.2,1); will-change:transform; }
 .lo-offer-visual:hover img { transform:scale(1.05); }

 .lo-offer-perks > .brxe-block { transition:transform 260ms ease,background-color 260ms ease,border-color 260ms ease; }
 .lo-offer-perks > .brxe-block:hover { transform:translateY(-3px); background:#09180814; border-color:#0918083d; }
 .lo-offer-home .lo-offer-perks > .brxe-block:hover { background:#fff7e81c; border-color:#fff7e854; }

 .lo-offer-step::before { transition:background-color 240ms ease,color 240ms ease,transform 240ms ease; }
 .lo-offer-step:hover::before,
 .lo-offer-step:focus-within::before { background:#fde739; color:#091808; transform:scale(1.12); }
 /* The wording steps aside as the pointer arrives. */
 .lo-offer-step .brxe-heading,
 .lo-offer-step .brxe-text-basic { transition:transform 280ms cubic-bezier(.2,.9,.2,1); }
 .lo-offer-step:hover .brxe-heading,
 .lo-offer-step:hover .brxe-text-basic,
 .lo-offer-step:focus-within .brxe-heading,
 .lo-offer-step:focus-within .brxe-text-basic { transform:translateX(8px); }
}

@media(prefers-reduced-motion:reduce) {
 .lo-offer-visual img,
 .lo-offer-perks > .brxe-block,
 .lo-offer-steps::after,
 .lo-offer-step::before,
 .lo-offer-step .brxe-heading,
 .lo-offer-step .brxe-text-basic { transition:none; }
 .lo-offer-visual:hover img,
 .lo-offer-perks > .brxe-block:hover,
 .lo-offer-step:hover::before,
 .lo-offer-step:hover .brxe-heading,
 .lo-offer-step:hover .brxe-text-basic { transform:none; }
}

/* The introduction stays put beside the steps once there is room for it to.
   Left alone below 1024, where the two columns stack and sticky would trap
   the copy above the list. */
@media(min-width:1024px) {
 /* Width lives in site-layout.css with the rest of the page geometry. */
 .lo-offer-details > .brxe-container { align-items:start; }
 .lo-offer-details .lo-offer-copy { position:sticky; top:144px; }
}

