/* Site-wide motion, gestures, the saved ritual drawer and the compact header. Hidden start states only apply under .mx (set by interactions.js when motion is allowed). */
:root{--mx-ease:cubic-bezier(.16,1,.3,1);--mx-curtain:cubic-bezier(.77,0,.18,1)}
main:not([hidden]){animation:view-in .7s var(--mx-ease)}

/* Reading progress */
.scroll-progress{position:fixed;z-index:70;inset:0 0 auto;height:2px;pointer-events:none}.scroll-progress span{display:block;height:100%;background:#2d3027;transform:scaleX(0);transform-origin:left}body.modal-open .scroll-progress{opacity:0}

/* Reveals: images open bottom-to-top, headings rise line by line, content fades up */
.mx .mx-img{clip-path:inset(100% 0 0 0);translate:0 64px;scale:1.12;opacity:.01;transition:clip-path 1.3s var(--mx-curtain) var(--mx-d,0s),translate 1.5s var(--mx-ease) var(--mx-d,0s),scale 1.8s var(--mx-ease) var(--mx-d,0s),opacity .5s ease var(--mx-d,0s)}
.mx .mx-img.mx-in{clip-path:inset(0 0 0 0);translate:0 0;scale:1;opacity:1}
.mx .mx-up{opacity:0;translate:0 38px;transition:opacity .9s ease var(--mx-d,0s),translate 1.15s var(--mx-ease) var(--mx-d,0s)}
.mx .mx-up.mx-in{opacity:1;translate:0 0}
.mx-line{display:block;overflow:hidden;padding:.08em .06em .12em;margin:-.08em -.06em -.12em}.mx-line>span{display:block}
.mx .mx-split .mx-line>span{translate:0 112%;rotate:2.5deg;transform-origin:0 100%;transition:translate 1.15s var(--mx-ease),rotate 1.15s var(--mx-ease);transition-delay:calc(var(--mx-d,0s) + var(--i,0) * 90ms)}
.mx .mx-split.mx-in .mx-line>span{translate:0 0;rotate:0deg}
.rose-application{overflow:hidden}.mx .mx-par,.mx .mx-img.mx-par,.mx .mx-img.mx-par.mx-in{translate:0 var(--shift,0px);scale:1.08}.mx .mx-img.mx-par{transition:clip-path 1.3s var(--mx-curtain) var(--mx-d,0s),opacity .5s ease var(--mx-d,0s)}

/* Hero drifts apart as you scroll into the page */
.mx .hero .headline{translate:0 calc(var(--hero-shift,0) * -110px);opacity:calc(1 - var(--hero-shift,0) * 1.15)}
.mx .hero .photo{translate:0 calc(var(--hero-shift,0) * var(--rise,-100px))}
.mx .photo-woman{--rise:-130px}.mx .photo-man{--rise:-210px}.mx .photo-body{--rise:-80px}.mx .photo-detail{--rise:-170px}.mx .photo-ritual{--rise:-250px}
.mx .hero-note,.mx .discover,.mx .hero-index{translate:0 calc(var(--hero-shift,0) * -50px)}

/* Cursor companion with contextual labels (fine pointers only) */
.mx-cursor{position:fixed;z-index:95;left:0;top:0;width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid #24241f73;border-radius:50%;pointer-events:none;display:grid;place-items:center;opacity:0;transition:width .45s var(--mx-ease),height .45s var(--mx-ease),margin .45s var(--mx-ease),background .35s,border-color .35s,opacity .3s,scale .25s}
.mx-cursor.is-on{opacity:1}.mx-cursor span{font-size:9px;letter-spacing:.14em;color:#fff;opacity:0;transition:opacity .25s;text-transform:uppercase;white-space:nowrap}
.mx-cursor.is-link{width:54px;height:54px;margin:-27px 0 0 -27px;border-color:#24241f40;background:#24241f0d}
.mx-cursor.is-label{width:84px;height:84px;margin:-42px 0 0 -42px;background:#1b1c17e0;border-color:transparent}.mx-cursor.is-label span{opacity:1}
.mx-cursor.is-down{scale:.86}body.modal-open .mx-cursor{opacity:0}

/* Pointer tilt with a soft sheen on photographs */
.mx-tilt{transition:transform .7s var(--mx-ease)}.mx-tilt.is-tilting{transition:transform .15s ease-out}.product-stage.mx-tilt{transition:transform .7s var(--mx-ease),background .65s}.product-stage.mx-tilt.is-tilting{transition:transform .15s ease-out,background .65s}
.mx-sheen{position:absolute;z-index:1;inset:0;pointer-events:none;background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),#ffffff66,transparent 48%);mix-blend-mode:soft-light;opacity:0;transition:opacity .45s}.is-tilting>.mx-sheen{opacity:1}.related-card>div{position:relative}
@media(hover:hover) and (pointer:fine){.solid-cta{transition:background .25s,color .25s,transform .25s,translate .5s var(--mx-ease)}.round-cta{transition:transform .3s,background .3s,translate .5s var(--mx-ease)}.product-pager button,.pdp-switcher button{transition:background .2s,translate .5s var(--mx-ease)}.footer-back,.care-orbit-controls button,.shop-link,.whatsapp-float{transition:translate .5s var(--mx-ease)}}

/* Swipeable surfaces */
.mx-swipe{touch-action:pan-y;-webkit-user-select:none;user-select:none}.mx-swipe img{-webkit-user-drag:none}
@media(hover:none){.product-stage.mx-swipe:before{content:'SWIPE ← →';position:absolute;z-index:3;top:17px;right:17px;font-size:7px;letter-spacing:.14em;color:#6e7167;animation:fade-in 1s 1.2s both}}

/* Product ticker */
.ticker{position:relative;background:#fafaf7;border-top:1px solid #dcdcd3;border-bottom:1px solid #dcdcd3;overflow:hidden;padding:20px 0}
.ticker:before,.ticker:after{content:'';position:absolute;z-index:1;top:0;bottom:0;width:7%;pointer-events:none}.ticker:before{left:0;background:linear-gradient(90deg,#fafaf7,transparent)}.ticker:after{right:0;background:linear-gradient(270deg,#fafaf7,transparent)}
.ticker-track{display:flex;width:max-content}.mx .ticker-track{animation:ticker 52s linear infinite}.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
.ticker-group{display:flex;align-items:center}
.ticker a{display:flex;align-items:center;gap:18px;padding-right:44px;text-decoration:none;font-size:clamp(30px,3.4vw,56px);letter-spacing:-.05em;line-height:1.1;white-space:nowrap;color:#24241f;transition:color .35s}
.ticker a:before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:#b9b8ad;margin-right:26px}
.ticker a img{flex:none;width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:center 42%;background:#ebe6e0;transition:transform .6s var(--mx-ease)}
.ticker a small{align-self:flex-start;font-size:9px;letter-spacing:.12em;color:#8a8b7e;margin-top:6px}
.ticker a:hover{color:#80826f}.ticker a:hover img{transform:rotate(-10deg) scale(1.1)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* Wishlist hearts and feedback */
.header .primary-links,.page-header .primary-links{margin-right:30px}
.product-header-actions{justify-self:end;display:flex;align-items:center;gap:6px}.product-header-actions .product-menu{justify-self:auto}
.save-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px}
.save-toggle [data-save-icon]{display:inline-block;font-size:17px;line-height:1;transition:transform .45s var(--mx-ease),color .3s}.save-toggle[aria-pressed=true] [data-save-icon]{color:#8b3a4b}.save-toggle em{font-style:normal}
.save-toggle.is-burst [data-save-icon],.rose-save.is-burst span{animation:heart-pop .7s var(--mx-ease)}
.save-toggle.is-burst:after,.rose-save.is-burst:after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid #c0848f;pointer-events:none;animation:heart-ring .7s ease-out forwards}.rose-save{position:relative}
@keyframes heart-pop{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}@keyframes heart-ring{from{opacity:1;transform:scale(.7)}to{opacity:0;transform:scale(1.7)}}
.product-pager .pager-save[aria-pressed=true]{background:#f0e1e3;border-color:#d4aab2}
.catalogue-card{position:relative}.card-save{position:absolute;z-index:2;top:12px;right:12px;width:42px;height:42px;border-radius:50%;background:#fffc;backdrop-filter:blur(6px);box-shadow:0 4px 14px #2a2a2014}.card-save[aria-pressed=true]{background:#f3e3e5}
.pdp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin:18px 0 4px}
.ask-naish{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:10px 0;font-size:12px;border-bottom:1px solid #aaa99e;text-align:left}.ask-naish i{flex:none;width:7px;height:7px;border-radius:50%;background:#6f8a5e;animation:mx-live 2.2s ease-out infinite}.ask-naish>span{font-size:16px;transition:transform .3s}.ask-naish:hover>span{transform:translate(3px,-3px)}
.faq-intro .ask-naish{display:flex;width:max-content;margin-top:6px}.pdp-copy .ask-naish{font-size:11px}
@keyframes mx-live{0%{box-shadow:0 0 0 0 #6f8a5e66}80%,100%{box-shadow:0 0 0 9px #6f8a5e00}}
.footer-ask{font-size:13px;min-height:30px;padding:5px 0;border-bottom:1px solid transparent;text-align:left}.footer-ask:hover{border-color:#6d715f}
.pdp-dock{display:none}

/* Collection tabs: a sliding underline, and copy that rises in on change */
.product-tabs.has-ink{position:relative}.product-tabs.has-ink button[aria-selected=true]:after{opacity:0}
.tab-ink{position:absolute;left:0;bottom:0;width:0;height:2px;background:#171914;pointer-events:none;transition:translate .6s var(--mx-ease),width .6s var(--mx-ease)}
.featured-copy.is-swapping>*{animation:mx-rise .75s var(--mx-ease) both}.featured-copy.is-swapping>:nth-child(2){animation-delay:.05s}.featured-copy.is-swapping>:nth-child(3){animation-delay:.1s}.featured-copy.is-swapping>:nth-child(4){animation-delay:.15s}.featured-copy.is-swapping>:nth-child(5){animation-delay:.2s}.featured-copy.is-swapping>:nth-child(6){animation-delay:.25s}
.ingredient-pills button{display:inline-flex;align-items:center;min-height:36px;font-size:10px;padding:8px 11px;border:1px solid #dadbd3;color:#66695c;transition:background .25s,border-color .25s,color .25s}.ingredient-pills button:hover{background:#fff;border-color:#9a9d8c;color:#23261d}
@media(min-width:1800px){.ingredient-pills button{font-size:14px}}
@media(max-width:700px){.ingredient-pills button{font-size:9px}}

/* Nourish. Hydrate. Soften. — words, callouts and the lotion all respond to one selection */
.ritual-heading{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .3em}
.ritual-word{position:relative;font:inherit;letter-spacing:inherit;line-height:inherit;padding:0 0 .06em;color:#9aa291;transition:color .45s}
.ritual-word:hover,.ritual-word[aria-pressed=true]{color:#24241f}.ritual-word:focus-visible{outline-offset:4px}
.ritual-word:after{content:'';position:absolute;left:0;right:.2em;bottom:0;height:2px;background:#4b5a3f;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--mx-ease)}.ritual-word[aria-pressed=true]:after{transform:scaleX(1)}
.ritual-product img{transition:rotate 1.1s var(--mx-ease),translate 1.1s var(--mx-ease)}
.ritual-orbit[data-focus=shea] .ritual-product img{rotate:-3deg;translate:-12px 0}.ritual-orbit[data-focus=aloe] .ritual-product img{rotate:3deg;translate:12px 0}.ritual-orbit[data-focus=vitamin] .ritual-product img{rotate:-2deg;translate:-8px 6px}.ritual-orbit[data-focus=rose] .ritual-product img{rotate:2deg;translate:8px 6px}
.orbit-lines g.is-hover{stroke:#56644a;stroke-width:1.2}.ingredient-callout.is-hover strong{color:#324927}
.orbit-lines g path{stroke-dasharray:420}.orbit-lines g.active path{animation:mx-draw 1.1s var(--mx-ease)}
.js .ritual-orbit .orbit-lines>circle{stroke-dasharray:1510;stroke-dashoffset:1510;transition:stroke-dashoffset 2.4s var(--mx-ease) .2s}.js .ritual-orbit.is-visible .orbit-lines>circle{stroke-dashoffset:0}
@keyframes mx-draw{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}
.ingredient-detail{display:grid;grid-template-columns:190px minmax(0,1fr) auto;align-items:center;gap:30px;max-width:900px;min-height:0;padding-top:26px;touch-action:pan-y}
.ingredient-visual{position:relative;margin:0;overflow:hidden;border-radius:3px;aspect-ratio:16/10.5;background:#dde2d5}.ingredient-visual img{width:100%;height:100%;object-fit:cover}.ingredient-visual img.is-swapping{animation:mx-curtain 1s var(--mx-curtain)}
.ingredient-detail-copy>span{display:block;font-size:9px;color:#738067;letter-spacing:.1em;margin-bottom:10px}
.ingredient-nav{display:flex;align-items:center;gap:8px}.ingredient-nav-hint{display:none}
.ingredient-nav button{width:44px;height:44px;border:1px solid #b5bba9;border-radius:50%;display:grid;place-items:center;font-size:18px;transition:background .25s,translate .5s var(--mx-ease)}.ingredient-nav button:hover{background:#dfe3d7}

/* Your skin. Your daily ritual. */
.skin-step-panel{touch-action:pan-y}
.skin-step-panel.is-changing .skin-panel-image img{animation:mx-curtain 1s var(--mx-curtain)}
.skin-step-panel.is-changing .skin-panel-copy>*{animation:mx-rise .8s var(--mx-ease) both}.skin-step-panel.is-changing .skin-panel-copy>:nth-child(2){animation-delay:.05s}.skin-step-panel.is-changing .skin-panel-copy>:nth-child(3){animation-delay:.1s}.skin-step-panel.is-changing .skin-panel-copy>:nth-child(4){animation-delay:.15s}.skin-step-panel.is-changing .skin-panel-copy>:nth-child(5){animation-delay:.2s}
.skin-person[role=button]{cursor:pointer;border-radius:12px}.skin-person[role=button]>img{transition:scale .8s var(--mx-ease)}.skin-person[role=button]:hover>img{scale:1.025}.skin-person[role=button]:focus-visible{outline-offset:2px}
.skin-person[role=button]:hover .skin-person-caption{color:#3f3550}
.skin-stage:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle 240px at var(--lx,50%) var(--ly,40%),#ffffff73,transparent 70%);mix-blend-mode:soft-light;opacity:0;transition:opacity .5s}.skin-stage.is-lit:after{opacity:1}
.care-orbit{cursor:grab}.care-orbit[data-dragging=true]{cursor:grabbing}.care-orbit[data-dragging=true] .care-circle{pointer-events:none}

/* Rose finale */
.rose-blend-scene{touch-action:pan-y}.rose-blend-scene>img{transition:rotate 1.4s var(--mx-ease)}
.rose-blend-scene[data-active="1"]>img{rotate:90deg}.rose-blend-scene[data-active="2"]>img{rotate:180deg}.rose-blend-scene[data-active="3"]>img{rotate:270deg}
.rose-ingredient[aria-pressed=true] strong:before{animation:mx-pulse 1.9s ease-out infinite}
@keyframes mx-pulse{0%{box-shadow:0 0 0 0 #bd939566}70%,100%{box-shadow:0 0 0 10px #bd939500}}

/* The essentials now follow the skin guide, so they open with a full section rhythm */
.essentials{padding-top:110px}

/* Compact header that returns when you scroll up */
.mini-bar{position:fixed;z-index:40;inset:0 0 auto;display:flex;align-items:center;gap:20px;height:64px;padding:0 4.5%;background:#f6f4efeb;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid #dcdad199;translate:0 -101%;transition:translate .5s var(--mx-ease)}
.mini-bar.is-shown{translate:0 0}.mini-bar .brand{width:96px}.mini-bar .brand img{mix-blend-mode:multiply}
.mini-bar-label{margin-right:auto;font-size:9px;letter-spacing:.14em;color:#7a7b70;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-bar-actions{display:flex;align-items:center}body.modal-open .mini-bar{translate:0 -101%}


/* Confirmation toast */
.mx-toast{position:fixed;z-index:120;left:50%;bottom:28px;display:flex;align-items:center;gap:14px;padding:10px 10px 10px 18px;border-radius:40px;background:#1c1d18;color:#fff;font-size:12px;box-shadow:0 18px 40px #1c1d1833;translate:-50% 30px;opacity:0;visibility:hidden;transition:translate .55s var(--mx-ease),opacity .35s,visibility 0s .55s}
.mx-toast.is-shown{translate:-50% 0;opacity:1;visibility:visible;transition:translate .55s var(--mx-ease),opacity .35s,visibility 0s}.mx-toast p{margin:0;white-space:nowrap}.mx-toast-icon{color:#e7b7c0}
.mx-toast a{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border:1px solid #ffffff4d;border-radius:30px;font-size:11px;color:#fff;text-decoration:none;white-space:nowrap;transition:background .25s}.mx-toast a:hover{background:#ffffff1f}

/* Menu entrance */
#menu[open] .navigation-link{animation:mx-rise .75s var(--mx-ease) both}#menu[open] .navigation-link:nth-child(2){animation-delay:.07s}#menu[open] .navigation-link:nth-child(3){animation-delay:.14s}#menu[open] .navigation-link:nth-child(4){animation-delay:.21s}
#menu[open] .navigation-photo{animation:mx-curtain 1.2s var(--mx-curtain) .1s both}#menu[open] .navigation-bottom{animation:fade-in .8s .35s both}

@keyframes mx-curtain{from{clip-path:inset(100% 0 0 0);scale:1.1}to{clip-path:inset(0 0 0 0);scale:1}}
@keyframes mx-rise{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes view-in{from{opacity:0}to{opacity:1}}

@media(min-width:1800px){.essentials{padding-top:150px}.ticker a{font-size:64px}.ticker a img{width:72px;height:72px}}
@media(max-width:1050px){.ingredient-detail{grid-template-columns:150px minmax(0,1fr) auto;gap:22px}}
@media(max-width:760px){
  .product-header-actions{gap:0}
  .mini-bar{height:58px;padding:0 6%}.mini-bar .brand{width:88px}.mini-bar-label{display:none}.mini-bar-actions{margin-left:auto}
  .mx .mx-up{translate:0 24px}.mx .mx-img{translate:0 40px}
  .essentials{padding-top:70px}
  .ticker{padding:15px 0}.ticker a{font-size:30px;gap:13px;padding-right:30px}.ticker a:before{margin-right:18px}.ticker a img{width:44px;height:44px}.ticker a small{font-size:7px;margin-top:3px}.mx .ticker-track{animation-duration:36s}
  .ingredient-detail{grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:start;padding-top:22px}
  .ingredient-nav{grid-column:1/-1;justify-content:space-between}.ingredient-nav-hint{display:block;font-size:7px;letter-spacing:.14em;color:#8a917e}
  .card-save{top:8px;right:8px;width:38px;height:38px;min-height:38px}
  .pdp-actions{margin-top:14px;gap:4px 18px}
  .pdp-dock{position:fixed;z-index:35;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:grid;grid-template-columns:auto 1fr;gap:8px;padding:7px;background:#f6f4efeb;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid #dcdad1;border-radius:40px;box-shadow:0 12px 30px #2a2a2014}
  .dock-save{padding:0 16px;border:1px solid #c8c6bb;border-radius:30px;font-size:11px;min-height:46px}.dock-save[aria-pressed=true]{background:var(--product-soft,#efe2e3)}
  .product-view{padding-bottom:84px}body.modal-open .pdp-dock{opacity:0;pointer-events:none}
  .mx-toast{bottom:calc(84px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px)}.mx-toast p{white-space:normal}
  .footer-ask{font-size:12px;min-height:34px}
}
@media(hover:none){
  .story-card:active .story-card-visual,.catalogue-picture:active,.intro-thumb:active,.related-card:active>div,.solid-cta:active,.round-cta:active,.save-toggle:active,.ritual-word:active,.ingredient-callout:active{scale:.97}
  .story-card-visual,.catalogue-picture,.intro-thumb,.related-card>div,.solid-cta,.round-cta,.save-toggle,.ritual-word,.ingredient-callout{transition:scale .2s}
}
@media(prefers-reduced-motion:reduce){.ticker{overflow-x:auto}.mini-bar,.mx-toast{transition:none}}