/* Self-hosted fonts (Rubik for body/UI + Noto Sans Hebrew for headlines, latin+hebrew subsets). Not loaded from Google Fonts: that CDN is silently blocked by a meaningful share of real visitors (ad-blockers, privacy DNS, corporate filters) even in private/incognito windows, which was causing this exact page to fall back to the OS default sans-serif. Self-hosting removes that whole class of failure and is also one less third-party request. */ @font-face{font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;src:url('../fonts/rubik-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;src:url('../fonts/rubik-hebrew.woff2') format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F} /* Noto Sans Hebrew — headline role only (was Frank Ruhl Libre serif; the user wanted the headlines in a sans, not a serif, while keeping Rubik untouched for body/UI text). */ @font-face{font-family:'Noto Sans Hebrew';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/noto-sans-hebrew-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Noto Sans Hebrew';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/noto-sans-hebrew-hebrew.woff2') format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F} :root{ /* Aesop / NGLORA "Apothecary's Formulary" system — see DESIGN-BRIEF.md */ --bg:#FFFEF2; --parchment:#FFFEF2; --ink:#333333; --ink-black:#000000; --carbon:#252525; --stone:#666666; --slate:#D6D5CC; --alabaster:#FFFFFF; --umber:#945C26; /* legacy aliases kept so untouched shop/product templates still resolve */ --wood-bg:#FFFEF2; --dark:#000000; --green:#252525; --green2:#333333; --muted:#666666; --muted2:#666666; --wood1:#945C26; --wood2:#945C26; --garnet:#945C26; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--parchment);color:var(--ink);font-family:'Rubik',sans-serif;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column} .lpl-main{flex:1 0 auto;display:block} .lpl-footer{flex-shrink:0} .lpl-page{padding:60px 5vw 90px;max-width:1080px;margin:0 auto;width:100%} .lpl-page__title{font:400 clamp(26px,3vw,42px) 'Noto Sans Hebrew',sans-serif;margin:0 0 28px;color:var(--ink-black)} .lpl-page__body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px} .lpl-page__body a.button,.lpl-page__body a.wc-forward,.lpl-page__body .button{text-decoration:none} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} a:hover{color:var(--ink)} @keyframes fadeInUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes breatheArrow{0%,100%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(1.1)}} .lpl-kicker{font:700 11px/1.7 'Rubik',sans-serif;color:var(--ink);letter-spacing:2px;margin-bottom:8px;text-transform:uppercase} .lpl-kicker--light{color:#D6D5CC} .lpl-btn{display:inline-block;cursor:pointer;padding:12px 24px;background:var(--ink);color:var(--parchment);font:700 14px 'Rubik',sans-serif;border-radius:0;border:none} .lpl-btn--light{background:var(--parchment);color:var(--ink)} .lpl-btn--outline{background:transparent;border:1px solid var(--ink);color:var(--ink)} .lpl-btn--outline:hover{background:var(--ink);color:var(--parchment)} .lpl-link{display:inline-flex;align-items:center;gap:6px;font:600 14px 'Rubik',sans-serif;color:var(--ink);text-decoration:underline;text-underline-offset:5px} .lpl-link__arrow{display:inline-block;transition:transform .3s cubic-bezier(.16,1,.3,1)} .lpl-link:hover .lpl-link__arrow{transform:translateX(-4px)} .lpl-muted{color:var(--stone)} /* Sticky wrapper for the whole top stack (social/announcement bar + header), so both scroll away together as one unit instead of each needing its own sticky offset. The social bar itself starts collapsed (max-height:0) and only expands once the page has scrolled a little (html.is-scrolled, toggled in theme.js) — see further down. */ .lpl-top-sticky{position:sticky;top:0;z-index:50} .lpl-social-bar{overflow:hidden;max-height:0;background:#0B0B0A;transition:max-height .35s ease} html.is-scrolled .lpl-social-bar{max-height:60px} .lpl-social-bar__inner{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:9px 5vw;min-height:38px} .lpl-social-bar a{color:#fff;display:flex} .lpl-social-bar__msg{position:absolute;left:50%;transform:translateX(-50%);font:600 13px 'Rubik',sans-serif;color:#fff;white-space:nowrap;opacity:.95;transition:opacity .3s ease} @media (max-width:560px){ /* the centered message has no awareness of the icons' width, so on narrow screens it overlaps them -- simplest fix is to drop the icons there and keep the message */ .lpl-social-bar__inner a{display:none} } /* Header — wordmark one side, icon cluster the other, nav collapsed into a hamburger. That hamburger-at-every-width pattern is Aesop's; on wider screens we instead bring back the centered inline nav from the earlier design (see the min-width:901px block below) — only phone/tablet widths still collapse it behind the menu button. */ .lpl-header{z-index:50;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:20px 5vw;background:var(--parchment);border-bottom:1px solid rgba(51,51,51,.12);transition:background .35s ease,border-color .35s ease,filter .35s ease} /* Homepage only: the header floats transparent over the full-screen hero video at the top of the page -- position:fixed instead of the sticky used everywhere else removes it from flow so the hero starts at y:0 behind it. Dark logo/nav/icons are flipped light with a single invert() filter rather than recoloring each one -- cheap, and transitions smoothly. The cart badge is counter-inverted so its brand color (umber on alabaster) stays correct. */ body.home #lplTopSticky{position:fixed;top:0;left:0;right:0} html:not(.is-scrolled) body.home .lpl-header{background:transparent;border-bottom-color:transparent;filter:invert(1)} html:not(.is-scrolled) body.home .lpl-header .lpl-cart__count{filter:invert(1)} .lpl-logo{display:flex;align-items:center} .lpl-logo img{height:65px;width:auto} .lpl-social-inline{display:none} .lpl-header__right{display:flex;align-items:center;gap:4px} .lpl-header__actions{display:flex;align-items:center;gap:4px} .lpl-icon-btn{background:none;border:none;cursor:pointer;color:var(--ink);position:relative;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s ease} .lpl-icon-btn:hover{background:rgba(51,51,51,.08)} .lpl-menu-toggle{display:flex} .lpl-cart__count{position:absolute;top:2px;inset-inline-start:2px;background:var(--umber);color:var(--alabaster);font:700 10px 'Rubik',sans-serif;border-radius:50%;min-width:16px;height:16px;padding:0 3px;display:flex;align-items:center;justify-content:center} .lpl-cart__count[hidden]{display:none} /* nav collapses into the slide-down menu on phone/tablet; min-width:901px below undoes this */ .lpl-nav{flex-basis:100%;order:3;overflow:hidden;max-height:0;transition:max-height .3s ease;background:var(--parchment)} .lpl-header.nav-open .lpl-nav{max-height:70vh} .lpl-nav__list{display:flex;flex-direction:column;gap:0;list-style:none;margin:0;padding:0;font:400 20px 'Noto Sans Hebrew',sans-serif} .lpl-nav__list li{border-top:1px solid rgba(51,51,51,.12)} .lpl-nav__list a{display:block;padding:18px 5vw;transition:color .2s ease} .lpl-nav__list .current-menu-item>a,.lpl-nav__list a:hover{color:var(--umber)} .lpl-nav__list .current-menu-item>a{font-weight:600} @media (min-width:901px){ .lpl-header{display:grid;grid-template-columns:1fr auto 1fr;flex-wrap:nowrap} /* DOM order is logo, icon cluster, nav (nav lives last so it's reachable after the icons when tabbing) -- explicit grid-column overrides auto-placement so it still LANDS in the centered middle track instead of the (in rtl) leftmost 1fr one. grid-row:1 on all three (plus resetting nav's mobile order:3) is needed too: grid auto-placement still consults `order` even when the column is explicit, so nav's leftover order:3 pushed it into a second row instead of sharing the first with the logo and icons -- which is what actually broke the vertical centering. */ .lpl-logo{grid-column:1;grid-row:1;justify-self:start} .lpl-header__right{grid-column:3;grid-row:1;justify-self:end} .lpl-menu-toggle{display:none} .lpl-nav{grid-column:2;grid-row:1;flex-basis:auto;order:0;overflow:visible;max-height:none;justify-self:center;background:transparent} .lpl-nav__list{flex-direction:row;align-items:center;gap:36px;font-size:15px} .lpl-nav__list li{border-top:none} .lpl-nav__list a{padding:0;display:inline-block} } /* Header search dropdown */ .lpl-search-panel{position:absolute;top:100%;inset-inline:0;background:var(--parchment);border-bottom:1px solid rgba(51,51,51,.12);padding:18px 5vw 22px;animation:fadeInUp .2s ease both} .lpl-search-panel[hidden]{display:none} .lpl-search-form{max-width:720px;margin:0 auto} .lpl-search-input{width:100%;padding:12px 20px;border:1px solid rgba(51,51,51,.2);border-radius:0;background:var(--parchment);font:400 16px 'Rubik',sans-serif;color:var(--ink);outline:none} .lpl-search-input:focus{border-color:var(--ink)} .lpl-search-results{max-width:720px;margin:12px auto 0;display:flex;flex-direction:column;gap:2px;max-height:60vh;overflow-y:auto} .lpl-search-result{display:flex;align-items:center;gap:14px;padding:10px 8px;border-radius:0;transition:background .15s ease} .lpl-search-result:hover{background:rgba(51,51,51,.06)} .lpl-search-result img{width:46px;height:46px;object-fit:contain;flex:none;background:var(--parchment);border:1px solid rgba(51,51,51,.1)} .lpl-search-result__name{font:400 15px 'Noto Sans Hebrew',sans-serif;color:var(--ink)} .lpl-search-result__price{font:600 13px 'Rubik',sans-serif;color:var(--ink)} .lpl-search-empty{max-width:720px;margin:12px auto 0;font:400 14px 'Rubik',sans-serif;color:var(--muted);text-align:center;padding:10px} /* Hero2 — contained rounded card: photo + text inside a bordered panel, not full-bleed. Feature-icon strip sits directly under the card. */ .lpl-hero2{padding:28px 5vw 0} /* Hero — full-bleed atmospheric video, centered copy, single outline CTA (Aesop pattern) */ .lpl-hero{position:relative;height:100vh;min-height:560px;overflow:hidden;background:var(--ink-black)} .lpl-hero__media{position:absolute;inset:0} .lpl-hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .lpl-hero__scrim{position:absolute;inset:0;background:rgba(0,0,0,.34)} .lpl-hero__copy{position:relative;z-index:2;height:100%;max-width:960px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:20px;text-align:center;padding:0 6vw 96px} .lpl-hero__copy h1{font:400 clamp(32px,4.2vw,54px)/1.28 'Noto Sans Hebrew',sans-serif;color:var(--alabaster);margin:0} @media (max-width:480px){.lpl-hero__copy h1{font-size:24px}} @media (max-width:340px){.lpl-hero__copy h1{font-size:19px}} .lpl-hero__copy p{font:400 16px/1.7 'Rubik',sans-serif;color:var(--alabaster);max-width:460px;margin:0;opacity:.9} .lpl-btn--on-media{border-color:var(--alabaster);color:var(--alabaster);margin-top:6px} .lpl-btn--on-media:hover{background:var(--alabaster);color:var(--ink)} .lpl-hero__av{display:none} /* Neutral separator band — plain breathing room between two video-forward sections (Aesop pattern) */ .lpl-divider{background:var(--slate);height:64px} /* ---- Single-product spotlight (between hero and split video) ---- */ .lpl-spotlight{display:flex;flex-wrap:wrap;align-items:center;background:var(--parchment);min-height:420px;max-width:1400px;margin-inline:auto} .lpl-spotlight__media{position:relative;flex:1 1 320px;min-width:0;aspect-ratio:4/5;max-height:480px;background:var(--wood-bg);display:flex;align-items:center;justify-content:center;overflow:hidden} .lpl-spotlight__media img{width:100%;height:100%;min-width:0;object-fit:contain;padding:40px} /* The gallery shot frames the bottle looser (more surrounding padding baked into the photo itself) than the studio shot, so side by side at contain it visibly rendered smaller even in an equal-size box -- cover crops out that extra padding instead. Extra padding here (vs. the shared 40px) reins cover's own crop/zoom back in -- without it the bottle came out looking slightly larger than the primary photo. */ .lpl-spotlight__media img.lpl-hover-img{object-fit:cover;padding:60px} /* Desktop: both the primary and gallery photo show side by side, plain flex siblings (each naturally shrinks to ~half the box). Touch devices have no room/no hover for that, so they just see the primary photo -- the shared hover:none rule elsewhere hides .lpl-hover-img there. */ .lpl-spotlight__text{flex:1 1 360px;min-width:0;padding:64px 5vw} .lpl-spotlight__text h3{font:400 clamp(24px,2.6vw,34px) 'Noto Sans Hebrew',sans-serif;margin:0 0 12px;color:var(--ink-black)} .lpl-spotlight__text p{font:400 15px/1.7 'Rubik',sans-serif;color:var(--stone);margin:0 0 14px;max-width:400px;min-height:3.4em} .lpl-spotlight__price{font:600 18px 'Rubik',sans-serif;color:var(--ink);margin-bottom:14px} .lpl-spotlight__details{background:var(--parchment);padding:48px 5vw 40px;max-width:900px;margin:0 auto;border-top:1px solid rgba(51,51,51,.1)} .lpl-spotlight__details-head{display:flex;gap:8px;justify-content:center;margin-bottom:24px} .lpl-spotlight__chip{font:700 11px 'Rubik',sans-serif;letter-spacing:1px;color:var(--alabaster);background:var(--ink);padding:6px 14px} .lpl-spotlight__chip--muted{background:transparent;color:var(--stone);border:1px solid rgba(51,51,51,.25)} .lpl-spotlight__notes{display:flex;gap:0;justify-content:center;flex-wrap:wrap;text-align:center} .lpl-spotlight__note-col{flex:1 1 160px;padding:0 20px} .lpl-spotlight__note-col+.lpl-spotlight__note-col{border-inline-start:1px solid rgba(51,51,51,.12)} .lpl-spotlight__note-col b{display:block;font:700 11px 'Rubik',sans-serif;letter-spacing:1px;color:var(--ink);margin-bottom:8px} .lpl-spotlight__note-col span{font:400 14px/1.6 'Rubik',sans-serif;color:var(--stone);display:block;min-height:3.2em} .lpl-spotlight__character{text-align:center;font:400 italic 14px/1.6 'Rubik',sans-serif;color:var(--stone);margin-top:24px;min-height:3.2em} .lpl-spotlight__details .lpl-notes-sec__line{min-height:3.2em} .lpl-spotlight__meters{display:flex;gap:40px;justify-content:center;margin-top:24px;flex-wrap:wrap} .lpl-spotlight__meter{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px} .lpl-spotlight__meter b{font:700 11px 'Rubik',sans-serif;letter-spacing:1px;color:var(--ink)} @media (max-width:900px){ .lpl-spotlight{flex-wrap:wrap-reverse} .lpl-spotlight__media{margin-inline:auto;max-width:380px;flex:0 0 auto;width:100%} } /* Mobile only: the notes/character/meters block below the divider makes each carousel slide very tall on a phone -- hide it there and keep the tap-through card compact, the full breakdown is a click away on the product page. Tablet+ keep showing it. */ @media (max-width:700px){.lpl-spotlight__details{display:none}} /* Editor's spotlight carousel: one product at a time, W3C APG carousel pattern. direction:ltr on the viewport only is deliberate -- on this rtl page a wider-than- container flex/grid child hugs the right edge and overflows left (see the marquee and split-carousel fixes above), which breaks left-to-right slide paging; forcing ltr here keeps "next" moving in the expected direction. Each slide re-asserts rtl so its own Hebrew text and layout are unaffected. */ .lpl-spotlight-carousel{margin:24px 0} @media (max-width:700px){.lpl-spotlight-carousel{margin:0}} .lpl-spotlight-carousel__viewport{direction:ltr;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;transition:height .3s ease} .lpl-spotlight-carousel__viewport::-webkit-scrollbar{display:none} /* align-items:flex-start: a flex row's height defaults to its tallest child no matter what (all 8 products' slides sit in this one row, off-screen ones included), which left short slides padded with dead space below their content. flex-start lets each slide report its own true height; theme.js then sets the viewport's height to match whichever slide is currently active. */ .lpl-spotlight-carousel__track{display:flex;align-items:flex-start} .lpl-spotlight-carousel__slide{direction:rtl;flex:0 0 100%;min-width:0;scroll-snap-align:start} .lpl-spotlight-carousel__controls{display:flex;align-items:center;justify-content:center;gap:20px;padding:22px 5vw 36px;background:var(--parchment)} .lpl-spotlight-carousel__arrow{width:36px;height:36px;border-radius:50%;border:1px solid rgba(51,51,51,.3);background:transparent;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;flex:none;transition:background .2s ease,color .2s ease} .lpl-spotlight-carousel__arrow:hover{background:var(--ink);color:var(--parchment);border-color:var(--ink)} .lpl-spotlight-carousel__arrow:disabled{opacity:.3;cursor:default;pointer-events:none} .lpl-spotlight-carousel__dots{display:flex;align-items:center;gap:8px} .lpl-spotlight-carousel__dot{width:8px;height:8px;border-radius:50%;border:none;background:rgba(51,51,51,.25);cursor:pointer;padding:0} .lpl-spotlight-carousel__dot.is-active{background:var(--ink);width:20px;border-radius:4px} /* Section rhythm — generous whitespace does the separating, not dividers/shadows */ .lpl-section{padding:112px 5vw} .lpl-section--top-flush{padding-top:0} .lpl-section__head{margin-bottom:56px} .lpl-section__head--split{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap} .lpl-section__head--center{text-align:center} .lpl-section h2{font:400 30px 'Noto Sans Hebrew',sans-serif;margin:0 0 8px;color:var(--ink-black)} /* Intro block above the family tabs */ .lpl-intro{text-align:center;padding-bottom:32px} .lpl-intro h2{font:400 clamp(26px,3vw,36px) 'Noto Sans Hebrew',sans-serif;margin:0 0 14px;color:var(--ink-black)} .lpl-intro__p{font:400 15px/1.7 'Rubik',sans-serif;color:var(--stone);max-width:520px;margin:0 auto 28px} .lpl-tabs2{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;border-top:1px solid rgba(51,51,51,.15);border-bottom:1px solid rgba(51,51,51,.15);padding:16px 0} .lpl-tabs2__item{background:none;border:none;cursor:pointer;font:600 13px 'Rubik',sans-serif;letter-spacing:.5px;color:var(--stone);padding:4px 0;position:relative} .lpl-tabs2__item::after{content:"";position:absolute;left:0;right:0;bottom:-17px;height:1px;background:var(--ink);transform:scaleX(0);transition:transform .25s ease} .lpl-tabs2__item.is-active{color:var(--ink)} .lpl-tabs2__item.is-active::after{transform:scaleX(1)} .lpl-tabs2--start{justify-content:flex-start;gap:22px;padding:14px 0;margin-bottom:4px} /* ---- Split panel: secondary video + family tabs/carousel (Aesop split-hero pattern) ---- */ .lpl-split{display:flex;flex-wrap:wrap;min-height:680px} .lpl-split__content{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:72px 5vw;gap:2px} .lpl-split__content h2{font:400 clamp(24px,2.6vw,32px) 'Noto Sans Hebrew',sans-serif;margin:0 0 12px;color:var(--ink-black)} .lpl-split__content .lpl-intro__p{margin:0 0 6px;max-width:420px;text-align:start} .lpl-split__carousel-wrap{position:relative;margin-top:22px} .lpl-split__carousel{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none} .lpl-split__carousel::-webkit-scrollbar{display:none} .lpl-split__carousel .lpl-aesop-card{flex:0 0 148px} .lpl-split__nav{display:flex;gap:8px;margin-top:16px} .lpl-section__foot--start{text-align:start;margin-top:20px} .lpl-split__video{position:relative;flex:1 1 420px;min-width:0;min-height:420px;overflow:hidden;background:var(--ink-black)} .lpl-split__video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .lpl-split__scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.1) 45%)} .lpl-split__copy{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:36px;gap:10px;color:var(--alabaster)} .lpl-split__copy h3{font:400 clamp(20px,2.2vw,28px) 'Noto Sans Hebrew',sans-serif;margin:0} .lpl-split__copy p{font:400 14px/1.6 'Rubik',sans-serif;color:var(--alabaster);opacity:.9;max-width:320px;margin:0} .lpl-split__copy .lpl-btn{align-self:flex-start;margin-top:4px} @media (max-width:900px){ .lpl-split{flex-wrap:wrap-reverse} .lpl-split__content,.lpl-split__video{flex:1 1 100%} .lpl-split__video{min-height:320px} .lpl-split__content{padding:40px 6vw} } /* Aesop-style product card: isolated bottle on parchment, badge + wishlist corners, centered text */ .lpl-aesop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px;max-width:1440px;margin-inline:auto} .lpl-aesop-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px} .lpl-aesop-card__top{width:100%;display:flex;align-items:center;font:700 11px 'Rubik',sans-serif;letter-spacing:.5px;color:var(--ink);min-height:20px} .lpl-aesop-card__badge{white-space:nowrap} .lpl-aesop-card__media{position:relative;display:block;width:100%;aspect-ratio:4/5;background:var(--parchment);margin:8px 0;overflow:hidden} .lpl-aesop-card__media img{width:100%;height:100%;object-fit:contain;padding:20px} .lpl-aesop-card__name{font:400 16px 'Rubik',sans-serif;color:var(--ink)} .lpl-aesop-card__notes{font:400 13px 'Rubik',sans-serif;color:var(--stone)} .lpl-aesop-card__price{font:600 14px 'Rubik',sans-serif;color:var(--ink);margin-top:auto} /* Browse by category — horizontal-scroll lifestyle carousel, circular arrow nav */ .lpl-browse__nav{display:flex;gap:8px} .lpl-arrow2{width:36px;height:36px;border-radius:50%;border:1px solid rgba(51,51,51,.3);background:transparent;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px} .lpl-arrow2:hover{background:var(--ink);color:var(--parchment);border-color:var(--ink)} .lpl-browse__track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none} .lpl-browse__track::-webkit-scrollbar{display:none} .lpl-browse__item{position:relative;flex:0 0 auto;width:min(320px,72vw);aspect-ratio:4/5;scroll-snap-align:start;overflow:hidden} .lpl-browse__item img{width:100%;height:100%;object-fit:cover} .lpl-browse__label{position:absolute;bottom:16px;inset-inline-start:16px;color:var(--alabaster);font:600 14px 'Rubik',sans-serif;text-shadow:0 1px 6px rgba(0,0,0,.35)} /* star + rule dividers (shared: home card + product infographic) */ .lpl-pi__rule{display:flex;align-items:center;gap:8px;margin:8px 0} .lpl-pi__rule>span{display:block;width:36px;height:1px;background:var(--accent,var(--wood1))} .lpl-star{display:block} .lpl-rule-label{display:flex;align-items:center;gap:16px;margin:16px 0 12px;width:100%;max-width:560px} .lpl-rule-label::before,.lpl-rule-label::after{content:"";flex:1;height:1px;background:var(--accent,var(--wood1));opacity:.45} .lpl-rule-label{font:700 14px 'Rubik',sans-serif;letter-spacing:2px;color:var(--accent,var(--wood1));justify-content:center;white-space:nowrap} .lpl-rule-label span{display:none} .lpl-icon-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:4px} .lpl-icon-row__i{display:flex;align-items:center;justify-content:center;flex:none;padding:0 clamp(8px,1vw,16px)} .lpl-icon-row__i+.lpl-icon-row__i{border-inline-start:1px solid rgba(0,0,0,.12)} .lpl-icon-row__i img{width:clamp(52px,4.2vw,70px);height:clamp(52px,4.2vw,70px);object-fit:contain;flex:none} /* fragrance-note hover: Hebrew-name tooltip + scale-up with a soft white glow */ .lpl-note{position:relative;display:inline-flex;align-items:center;justify-content:center} .lpl-note img{transition:transform .28s cubic-bezier(.2,.7,.3,1),filter .28s ease} .lpl-note:hover img,.lpl-note:focus-visible img{transform:scale(1.16);filter:drop-shadow(0 0 5px rgba(255,255,255,.95)) drop-shadow(0 0 14px rgba(255,255,255,.6))} .lpl-note::after{content:attr(data-note);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(5px);background:var(--ink,#2A2620);color:#fff;font:600 12px/1 'Rubik',sans-serif;letter-spacing:.2px;white-space:nowrap;padding:6px 10px;border-radius:0;box-shadow:0 6px 18px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:20} .lpl-note::before{content:"";position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%) translateY(5px);border:5px solid transparent;border-top-color:var(--ink,#2A2620);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:20} .lpl-note:hover::after,.lpl-note:hover::before,.lpl-note:focus-visible::after,.lpl-note:focus-visible::before{opacity:1;transform:translateX(-50%) translateY(0)} /* flat cells already show the name in a caption — keep only the scale + glow */ .lpl-notes-flat__cell .lpl-note::after,.lpl-notes-flat__cell .lpl-note::before{content:none} @media (hover:none){.lpl-note::after,.lpl-note::before{display:none}} /* Story split section */ /* Fixed height (not content-driven): the real store photo is a tall 9:16 phone shot, and letting the grid size itself to the image's natural height was pushing this section past 100vh. object-fit:cover + a firm height lets it read as a wide banner instead. */ /* Flex, not grid: the image column sizes to the photo's own aspect ratio (via aspect-ratio + height:100%) instead of a fixed 50/50 split, so the full frame shows uncropped even though that leaves it narrower than half width on most screens. Text takes whatever space is left. */ .lpl-story{position:relative;background:linear-gradient(160deg,#2e2620 0%,#1c1815 55%,#141110 100%);color:var(--alabaster);display:flex;height:640px;overflow:hidden} .lpl-story__text{flex:1} .lpl-story__img{position:relative;overflow:hidden;height:100%;flex:0 0 auto;aspect-ratio:1300/1271} .lpl-story__img img:first-child{width:100%;height:100%;object-fit:contain;display:block} .lpl-story__video{width:100%;height:100%;object-fit:cover;display:block} .lpl-story__text{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:0 clamp(28px,5vw,80px)} .lpl-story__text h2{font:400 clamp(26px,3vw,38px)/1.3 'Noto Sans Hebrew',sans-serif;margin:0} .lpl-story__text p{font:400 15px/1.7 'Rubik',sans-serif;color:#C7C7C0;max-width:460px} .lpl-story__text .lpl-link{color:var(--alabaster);align-self:flex-start} /* Product grid + cards (shop archive, related products) */ .lpl-grid-section{background:var(--parchment)} .lpl-product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px;max-width:1320px;margin-inline:auto} /* shop grid: 4 per row on desktop (e-comm norm), 3 on laptops, then handled by the responsive block below (2 on tablet, 1 on phone) */ .lpl-product-grid--shop{grid-template-columns:repeat(4,1fr);max-width:1560px;margin-inline:0} /* .lpl-product-grid's own margin-inline:auto is for centering it as a standalone block (homepage grids); as a grid item inside .lpl-shop__layout that auto margin blocks the default stretch and the grid shrinks to a content-based width instead -- which then varies with which cards are visible (e.g. after filtering), producing wildly different card sizes depending on the active filter. Resetting the margin here lets it stretch to fill its column like a normal grid item. */ @media (max-width:1400px){.lpl-product-grid--shop{grid-template-columns:repeat(3,1fr)}} .lpl-product-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px} /* fixed portrait ratio so cards never stretch too wide on large screens */ .lpl-product-card__media{position:relative;width:100%;aspect-ratio:4/5;background:var(--parchment);overflow:hidden} .lpl-product-card__link{position:absolute;inset:0;z-index:1;font-size:0} .lpl-product-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:20px;pointer-events:none} .lpl-product-card__bar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;padding:10px;background:rgba(255,254,242,.96);border-top:1px solid rgba(51,51,51,.12);opacity:0;transition:opacity .2s ease;z-index:2} .lpl-product-card:hover .lpl-product-card__bar,.lpl-product-card:focus-within .lpl-product-card__bar,.lpl-product-card.lpl-touch-reveal .lpl-product-card__bar{opacity:1} .lpl-product-card__bar>a,.lpl-product-card__bar>.lpl-product-card__view,.lpl-product-card__bar a.add_to_cart_button,.lpl-product-card__bar .add_to_cart_button,.lpl-product-card__bar .added_to_cart{flex:1;box-sizing:border-box;min-height:38px;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 8px;font:700 12px 'Rubik',sans-serif;border:1px solid var(--ink);border-radius:0;background:var(--ink);color:var(--parchment);line-height:1} .lpl-product-card__bar .lpl-product-card__view{background:transparent;color:var(--ink)} .lpl-product-card__bar .added_to_cart{background:transparent;color:var(--ink)} .lpl-product-card__brand{font:700 11px 'Rubik',sans-serif;color:var(--ink);letter-spacing:.5px} .lpl-product-card__name{font:400 16px 'Rubik',sans-serif;color:var(--ink)} .lpl-product-card__notes{font:400 13px 'Rubik',sans-serif;color:var(--stone)} .lpl-product-card__price{font:600 14px 'Rubik',sans-serif;color:var(--ink);margin-top:auto} /* Hover-swap: on hover the featured image fades out and the first gallery image fades in */ .lpl-product-card__media,.lpl-crafted__bottle,.lpl-pi__bottle,.lpl-pd__media,.lpl-aesop-card__media{position:relative} .lpl-product-card__media img.lpl-hover-img,.lpl-crafted__bottle img.lpl-hover-img,.lpl-pi__bottle img.lpl-hover-img,.lpl-pd__media img.lpl-hover-img,.lpl-aesop-card__media img.lpl-hover-img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;opacity:0;transition:opacity .4s ease,transform .35s ease;z-index:3;pointer-events:none} .lpl-product-card__media img.lpl-hover-img{padding:26px;z-index:1}/* below the hover add-to-cart bar (z-index:2) */ /* The shared hover-img rule above sizes to its own intrinsic dimensions (width/height:auto, capped by max-width/max-height) so it doesn't stretch a differently-shaped image -- but that made it render smaller than the main photo here, since the main image is forced to fill the full box (width/height:100%) while the hover one only fills up to its own natural size. Matching that here makes both images read as the same size. */ .lpl-aesop-card__media img.lpl-hover-img{padding:20px;width:100%;height:100%} .lpl-pd__media img.lpl-hover-img{padding:34px;width:100%;height:100%} /* Crafted (Lumière) products only: the gallery photo is framed much looser than the primary shot (more surrounding negative space), so object-fit:contain still let it render visibly smaller inside the same box. object-fit:cover fills the box completely instead, matching the primary image's visual weight. Designer products' primary/gallery photos are already consistently framed, so they're left on contain (untouched). */ .lpl-aesop-card--crafted .lpl-aesop-card__media img.lpl-hover-img, .lpl-product-card--crafted .lpl-product-card__media img.lpl-hover-img, .lpl-pi__bottle img.lpl-hover-img{width:100%;height:100%;object-fit:cover;filter:drop-shadow(0 30px 40px rgba(0,0,0,.18))} .lpl-crafted__bottle img.lpl-hover-img{max-width:clamp(390px,34vw,540px);filter:drop-shadow(0 22px 30px rgba(0,0,0,.16))} /* base image: opacity transition so it fades out at the same rate the hover image fades in */ .lpl-product-card__media img:not(.lpl-hover-img),.lpl-crafted__bottle img:not(.lpl-hover-img),.lpl-pi__bottle img:not(.lpl-hover-img),.lpl-pd__media img:not(.lpl-hover-img),.lpl-aesop-card__media img:not(.lpl-hover-img){transition:opacity .4s ease,transform .35s ease} .lpl-product-card:hover img.lpl-hover-img,.lpl-crafted__bottle:hover img.lpl-hover-img,.lpl-pi__bottle:hover img.lpl-hover-img,.lpl-pd__media:hover img.lpl-hover-img,.lpl-aesop-card:hover img.lpl-hover-img,.lpl-product-card.lpl-touch-reveal img.lpl-hover-img,.lpl-aesop-card.lpl-touch-reveal img.lpl-hover-img,.lpl-pd__media.lpl-touch-reveal img.lpl-hover-img,.lpl-pi__bottle.lpl-touch-reveal img.lpl-hover-img{opacity:1} .lpl-product-card:hover .lpl-product-card__media:has(img.lpl-hover-img) img:not(.lpl-hover-img), .lpl-crafted__bottle:has(img.lpl-hover-img):hover img:not(.lpl-hover-img), .lpl-pi__bottle:has(img.lpl-hover-img):hover img:not(.lpl-hover-img), .lpl-pd__media:has(img.lpl-hover-img):hover img:not(.lpl-hover-img), .lpl-aesop-card:hover .lpl-aesop-card__media:has(img.lpl-hover-img) img:not(.lpl-hover-img), .lpl-product-card.lpl-touch-reveal .lpl-product-card__media:has(img.lpl-hover-img) img:not(.lpl-hover-img), .lpl-aesop-card.lpl-touch-reveal .lpl-aesop-card__media:has(img.lpl-hover-img) img:not(.lpl-hover-img), .lpl-pd__media.lpl-touch-reveal:has(img.lpl-hover-img) img:not(.lpl-hover-img), .lpl-pi__bottle.lpl-touch-reveal:has(img.lpl-hover-img) img:not(.lpl-hover-img){opacity:0} /* Spotlight/crafted-bottle (homepage) hover images stay primary-photo-only on touch (no room to reveal a second image there); product cards, aesop cards, and the single-product main photo (both the designer .lpl-pd__media and the crafted .lpl-pi__bottle) get a tap-to-preview instead (see theme.js), since a hidden second photo there is a missed sale on mobile, which is most of this site's traffic. */ @media (hover:none){ .lpl-spotlight__media img.lpl-hover-img, .lpl-crafted__bottle img.lpl-hover-img{display:none} } /* kill the [add_to_cart] shortcode's default inline box, wherever it still appears */ .woocommerce p.add_to_cart_inline,p.add_to_cart_inline{border:0!important;padding:0!important;margin:0!important;display:contents} /* Marquee */ /* Pulled up over the preceding section's own bottom padding so the two bands of empty cream space don't stack into one dead gap before this strip. */ .lpl-marquee{position:relative;background:var(--parchment);padding:72px 0 68px;border-top:1px solid rgba(51,51,51,.1);border-bottom:1px solid rgba(51,51,51,.1)} .lpl-marquee__label{text-align:center;font:700 11px 'Rubik',sans-serif;letter-spacing:2px;color:var(--stone);margin-bottom:22px} /* Forced ltr: a wider-than-container block overflows per its *containing block's* direction, not its own -- on this rtl page that hugs the track to the right edge and overflows left, so translateX(-50%) would drag content further off-screen instead of sweeping it across. Logos carry no text direction, so scoping ltr to the viewport (not just the track) keeps the standard -50%-loop math correct. */ .lpl-marquee__viewport{direction:ltr;overflow:hidden;mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent)} .lpl-marquee__track{display:flex;gap:96px;width:max-content;align-items:center;animation:marquee 32s linear infinite} .lpl-marquee__track:hover{animation-play-state:paused} .lpl-marquee__link{display:flex;align-items:center;flex:none} .lpl-marquee__logo{height:88px;width:auto;object-fit:contain;filter:grayscale(1) opacity(.8);transition:filter .25s ease,opacity .25s ease} .lpl-marquee__logo:hover{filter:grayscale(0) opacity(1)} @media (prefers-reduced-motion: reduce){ .lpl-marquee__track{animation:none} } /* FAQ accordion */ .lpl-faq__list{max-width:820px;margin:0 auto;border-top:1px solid rgba(0,0,0,.12)} .lpl-faq__item{border-bottom:1px solid rgba(0,0,0,.12)} .lpl-faq__q{width:100%;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px;font:600 16px 'Rubik',sans-serif;color:var(--ink)} .lpl-faq__icon{width:26px;height:26px;display:flex;align-items:center;justify-content:center;font:400 22px 'Rubik',sans-serif;transition:transform .3s ease} .lpl-faq__item.is-open .lpl-faq__icon{transform:rotate(45deg)} .lpl-faq__a{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .35s ease,opacity .3s ease} .lpl-faq__item.is-open .lpl-faq__a{grid-template-rows:1fr;opacity:1} .lpl-faq__a-inner{overflow:hidden;font:400 15px/1.8 'Rubik',sans-serif;color:#6B6255;padding:0 4px 22px} /* Shop filters sidebar */ .lpl-shop__tabsbar{display:flex;justify-content:space-between;align-items:center;padding:28px 5vw 22px;border-bottom:1px solid rgba(0,0,0,.1)} .lpl-shop__count{font:700 12px 'Rubik',sans-serif;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase} .lpl-filters-toggle{display:none} .lpl-shop__layout{display:grid;grid-template-columns:260px 1fr;gap:40px;padding:72px 5vw 90px} .lpl-shop__loadmore{display:none;align-items:center;justify-content:center;gap:10px;grid-column:1/-1;padding:36px 0;font:600 13px 'Rubik',sans-serif;letter-spacing:.5px;color:var(--muted)} .lpl-shop__loadmore.is-active{display:flex} .lpl-shop__loadmore-spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(0,0,0,.15);border-top-color:var(--ink);animation:lpl-spin .7s linear infinite} @keyframes lpl-spin{to{transform:rotate(360deg)}} .lpl-filters__group{margin-bottom:20px;border-bottom:1px solid rgba(0,0,0,.1);padding-bottom:20px} .lpl-filters__group:last-child{border-bottom:none} .lpl-filters__title{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;user-select:none;font:700 12px 'Rubik',sans-serif;letter-spacing:1.5px;color:var(--muted);margin-bottom:0;transition:color .2s ease} .lpl-filters__title:hover{color:var(--ink)} .lpl-filters__title::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s ease;flex:none} .lpl-filters__group.is-collapsed .lpl-filters__title::after{transform:translateY(1px) rotate(-135deg)} /* animated collapse: grid-template-rows 1fr <-> 0fr (no layout-thrashing height anim) */ .lpl-filters__body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .32s ease} .lpl-filters__body>*{min-height:0;overflow:hidden;padding-top:14px;transition:opacity .25s ease .04s} .lpl-filters__group.is-collapsed .lpl-filters__body{grid-template-rows:0fr} .lpl-filters__group.is-collapsed .lpl-filters__body>*{opacity:0;transition-delay:0s} .lpl-filters__row{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 2px;font:600 14px 'Rubik',sans-serif;color:#4A4438} .lpl-filters__row.is-active{color:var(--ink);font-weight:700} .lpl-radio{width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(0,0,0,.2)} .lpl-filters__row.is-active .lpl-radio{background:var(--ink);border-color:var(--ink)} .lpl-size-chips{display:flex;gap:10px} .lpl-chip{cursor:pointer;padding:11px 22px;border-radius:0;border:1.5px solid rgba(0,0,0,.14);background:#fff;color:#4A4438;font:600 13px 'Rubik',sans-serif} .lpl-chip.is-active{border-color:var(--ink);background:var(--ink);color:#F3EDE2;font-weight:700} .lpl-price-range{position:relative;height:24px;margin-bottom:14px} .lpl-price-range__track{position:absolute;top:11px;left:0;right:0;height:2px;background:rgba(0,0,0,.15)} .lpl-price-range__fill{position:absolute;height:2px;background:var(--ink)} input[type=range].price-slider{position:absolute;top:0;left:0;width:100%;height:24px;-webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;margin:0} input[type=range].price-slider::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--ink);border:3px solid #F3EDE2;box-shadow:0 1px 5px rgba(0,0,0,.35);cursor:pointer} input[type=range].price-slider::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--ink);border:3px solid #F3EDE2;cursor:pointer} .lpl-price-inputs{display:flex;align-items:center;gap:8px;font:600 13px 'Rubik',sans-serif} .lpl-price-inputs input{width:64px;padding:6px 8px;border:1px solid rgba(0,0,0,.15);border-radius:0;font:600 13px 'Rubik',sans-serif} /* Product page: see the .lpl-pi (crafted) and .lpl-pd (designer) blocks below */ /* ===== Breadcrumbs ===== */ .lpl-crumbs{padding:20px 5vw 0;font:400 13px 'Rubik',sans-serif;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap} .lpl-crumbs a:hover{color:var(--ink)} /* ===== Crafted product infographic (.lpl-pi) ===== */ .lpl-pi{padding:0 0 20px} .lpl-pi__card{position:relative;overflow:hidden;background:#F7F1E6;margin:20px 5vw 60px;padding:56px clamp(20px,5vw,72px);display:flex;flex-direction:column;align-items:center;text-align:center} .lpl-pi__bar{position:absolute;top:0;left:0;right:0;height:5px;background:var(--accent,var(--wood1))} .lpl-pi__hero{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:center;width:100%;max-width:1000px} .lpl-pi__bottle{display:flex;align-items:center;justify-content:center} .lpl-pi__bottle img{width:auto;max-width:100%;height:auto;max-height:clamp(420px,44vw,560px);object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.18))} .lpl-pi__head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px} .lpl-pi__label{font:600 13px 'Rubik',sans-serif;letter-spacing:6px;color:var(--accent,var(--wood1))} .lpl-pi__name{font:700 clamp(34px,4vw,52px) 'Noto Sans Hebrew',sans-serif;margin:6px 0;color:var(--ink)} .lpl-pi__tagline{font:600 15px 'Rubik',sans-serif;letter-spacing:3px;color:var(--accent,var(--wood1));margin-top:8px} .lpl-pi__diamond{display:flex;align-items:center;gap:6px;margin:14px 0} .lpl-pi__diamond span{display:block;width:24px;height:1px;background:var(--accent,var(--wood1));opacity:.6} .lpl-pi__diamond i{width:6px;height:6px;background:var(--accent,var(--wood1));transform:rotate(45deg)} .lpl-pi__desc{font:400 18px/1.95 'Rubik',sans-serif;color:#4A453D;max-width:560px;margin-top:8px} .lpl-pi__desc p{margin:0 0 10px} .lpl-pi__section{width:100%;max-width:1120px;margin-top:28px;padding-top:36px;border-top:1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;align-items:center} /* sectioned notes: TOP / HEART / BASE columns, each = label + icon row + names line */ .lpl-notes-sec{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 0;width:100%;margin-top:10px} .lpl-notes-sec__col{display:flex;flex-direction:column;align-items:center;gap:16px;padding:0 22px;text-align:center} .lpl-notes-sec__col+.lpl-notes-sec__col{border-inline-start:1px solid rgba(0,0,0,.1)} .lpl-notes-sec__label{font:700 13px 'Rubik',sans-serif;letter-spacing:1.4px;color:var(--ink)} .lpl-notes-sec__icons{display:flex;gap:16px;flex-wrap:wrap;justify-content:center} .lpl-notes-sec__icons img{width:66px;height:66px;object-fit:contain} .lpl-notes-sec__line{font:600 12px/1.6 'Rubik',sans-serif;letter-spacing:.4px;color:var(--muted2)} /* flat notes (products with no sections): one centered row, icon + name */ .lpl-notes-flat{display:flex;justify-content:center;flex-wrap:wrap;margin-top:6px} .lpl-notes-flat__cell{display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 15px 16px;margin:0;width:126px;flex:0 0 auto} .lpl-notes-flat__cell+.lpl-notes-flat__cell{border-inline-start:1px solid rgba(0,0,0,.1)} .lpl-notes-flat__cell img{width:74px;height:74px;object-fit:contain} .lpl-notes-flat__cell figcaption{font:700 11.5px/1.35 'Rubik',sans-serif;letter-spacing:.4px;color:var(--ink);text-align:center;white-space:normal} .lpl-infogrid{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:24px 0;text-align:center} .lpl-infogrid__col{flex:1;min-width:170px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 18px} .lpl-infogrid__col+.lpl-infogrid__col{border-inline-start:1px solid rgba(0,0,0,.1)} .lpl-infogrid__t{font:700 15px 'Rubik',sans-serif;color:var(--ink)} .lpl-infogrid__i{font:400 14px 'Rubik',sans-serif;color:#6B6255} .lpl-meters{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:20px 0} .lpl-meter{text-align:center;padding:0 30px} .lpl-meter+.lpl-meter{border-inline-start:1px solid rgba(0,0,0,.1)} .lpl-meter__t{font:700 13px 'Rubik',sans-serif;letter-spacing:1px;color:var(--accent,var(--wood1));margin-bottom:8px} .lpl-meter__l{font:400 14px 'Rubik',sans-serif;color:var(--ink);margin-bottom:12px} .lpl-meter__q{font:400 italic 15px/1.8 'Rubik',sans-serif;color:#4A453D;max-width:340px} .lpl-meter--quote{max-width:340px} .lpl-dots{display:flex;gap:6px;justify-content:center} .lpl-dot{width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,.14)} .lpl-pi__buy{margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:14px} .lpl-pi__price{font:700 22px 'Rubik',sans-serif;color:var(--accent,var(--green2))} .lpl-pi__footer-tl{font:600 13px 'Rubik',sans-serif;letter-spacing:3px;color:var(--ink);margin-top:12px} /* Sticky mini buy-bar (single product): hidden at the top of the page, slides down once html.is-scrolled is set (theme.js) -- top offset is set inline by theme.js so it docks exactly under the header stack even as the announcement bar above it opens/closes. */ .lpl-pi-stickybar{position:fixed;left:0;right:0;top:0;z-index:45;background:var(--parchment);border-bottom:1px solid rgba(51,51,51,.12);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 5vw;transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform .35s ease,opacity .3s ease,top .35s ease} html.is-scrolled .lpl-pi-stickybar{transform:translateY(0);opacity:1;pointer-events:auto} .lpl-pi-stickybar__info{display:flex;align-items:center;gap:14px;min-width:0} .lpl-pi-stickybar__thumb{width:44px;height:44px;object-fit:contain;background:var(--parchment);flex:none} .lpl-pi-stickybar__text{display:flex;flex-direction:column;gap:2px;min-width:0} .lpl-pi-stickybar__name{font:600 14px 'Rubik',sans-serif;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lpl-pi-stickybar__notes{font:400 12px 'Rubik',sans-serif;color:var(--stone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lpl-pi-stickybar__buy{display:flex;align-items:center;gap:16px;flex:none} .lpl-pi-stickybar__buy .lpl-size-chips{flex-wrap:nowrap} .lpl-pi-stickybar__buy .lpl-chip{padding:7px 14px;font-size:12px} .lpl-pi-stickybar__price{font:600 15px 'Rubik',sans-serif;color:var(--ink);white-space:nowrap} @media (max-width:700px){.lpl-pi-stickybar__notes,.lpl-pi-stickybar__buy .lpl-size-chips{display:none}} /* Product page tabs (ingredients / packaging & recycling) */ .lpl-pdp-tabs{width:100%} .lpl-pdp-tabs__nav{display:flex;gap:32px;margin-bottom:28px;border-bottom:1px solid rgba(51,51,51,.15)} .lpl-pdp-tabs__btn{background:none;border:none;padding:0 0 14px;font:600 13px 'Rubik',sans-serif;letter-spacing:.5px;color:var(--stone);cursor:pointer;position:relative;transition:color .2s ease} .lpl-pdp-tabs__btn::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transition:transform .25s ease} .lpl-pdp-tabs__btn.is-active{color:var(--ink)} .lpl-pdp-tabs__btn.is-active::after{transform:scaleX(1)} .lpl-pdp-tabs__panel[hidden]{display:none} .lpl-pdp-tabs__prose{font:400 15px/1.8 'Rubik',sans-serif;color:var(--stone);max-width:560px} .lpl-pdp-tabs__prose p{margin:0 0 14px} .lpl-pdp-tabs__prose p:last-child{margin-bottom:0} /* How to use: half image, half text — same split pattern as the homepage story section */ .lpl-howto{display:flex;flex-wrap:wrap;background:var(--parchment)} .lpl-howto__media{flex:1 1 400px;min-width:0;aspect-ratio:4/5;overflow:hidden} .lpl-howto__media img{width:100%;height:100%;object-fit:cover;display:block} .lpl-howto__text{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:64px 6vw} .lpl-howto__text h2{font:400 clamp(24px,2.6vw,34px) 'Noto Sans Hebrew',sans-serif;margin:0;color:var(--ink-black)} .lpl-howto__text p{font:400 15px/1.8 'Rubik',sans-serif;color:var(--stone);margin:0;max-width:460px} .lpl-howto--craft{background:var(--parchment)} /* size chips (decorative on simple products) -- two-line size+price boxes, Aesop-style */ .lpl-size-chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center} .lpl-size-chips .lpl-chip{cursor:default;padding:9px 20px;border-radius:0;border:1.5px solid rgba(0,0,0,.18);font:600 13px 'Rubik',sans-serif;color:#4A4438;background:#fff;user-select:none;transition:background .15s ease,border-color .15s ease,color .15s ease;display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1.3} .lpl-size-chips .lpl-chip.is-active{background:var(--ink);border-color:var(--ink);color:#F3EDE2} .lpl-chip__price{font:400 11px 'Rubik',sans-serif;opacity:.65} .lpl-chip__price,.lpl-chip__price *{font-size:11px;font-family:inherit;color:inherit;line-height:inherit} .lpl-pi-stickybar__buy .lpl-chip__price{display:none} /* single product: chips ARE the size selector — make them pressable, hide WooCommerce's own