/* RAYA Motion Pack — "alive" storefront (ticker, glass header, hairline, aurora hero, pulsing product cards,
   scroll reveal, brand marquee, floating help button, ripple, fly-to-bag, countdown).
   Rules: transform/opacity only where possible, everything off for prefers-reduced-motion / Data Saver,
   paused when the tab is hidden, and never active on cart / checkout / payment-result pages. */
:root{--ra-pulse:#C8A97E;--ra-ease:cubic-bezier(.22,.8,.24,1)}
.st{--ra-pulse:var(--ac,#C8A97E)}
html.ra-paused *,html.ra-paused *::before,html.ra-paused *::after{animation-play-state:paused!important}

/* ---------- 1) Ticker: endless marquee ---------- */
.ra-ticker.is-marquee{overflow:hidden;padding:0;text-align:start}
.ra-ticker__track{display:flex;width:max-content;direction:ltr;padding:8px 0;animation:raMarq var(--ra-marq,34s) linear infinite;will-change:transform}
.ra-ticker__item{display:inline-flex;align-items:center;white-space:nowrap;padding-inline-end:64px;unicode-bidi:plaintext}
.ra-ticker:hover .ra-ticker__track,.ra-ticker:active .ra-ticker__track{animation-play-state:paused}
.ra-ticker i{animation:raDot 2.2s ease-in-out infinite}
@keyframes raMarq{to{transform:translate3d(-50%,0,0)}}
@keyframes raDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.55}}

/* ---------- 2) Glass header + gold hairline + drifting glow behind the logo ---------- */
#topNav.ra-header{background:rgba(250,248,245,.66)!important;-webkit-backdrop-filter:saturate(1.7) blur(20px);backdrop-filter:saturate(1.7) blur(20px);transition:background .35s,box-shadow .35s}
#topNav.ra-header.is-scrolled{background:rgba(250,248,245,.84)!important;box-shadow:0 10px 30px rgba(18,17,16,.09)!important}
#topNav.ra-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--ra-gold),var(--ra-gold-lt),#fff,var(--ra-gold-lt),var(--ra-gold),transparent);background-size:220% 100%;animation:raHair 6.5s linear infinite}
.ra-header__bar{position:relative}
.ra-header__bar>*{position:relative;z-index:1}
.ra-header__bar::before{content:"";position:absolute;left:50%;top:50%;width:200px;height:112px;margin:-56px 0 0 -100px;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,222,165,.62),rgba(200,169,126,.2) 55%,transparent 74%);filter:blur(10px);animation:raGlow 9s ease-in-out infinite alternate}
@keyframes raHair{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes raGlow{from{transform:translate3d(-30px,-4px,0) scale(.9);opacity:.65}to{transform:translate3d(30px,5px,0) scale(1.16);opacity:1}}

/* ---------- 3) Hero: aurora light, slow zoom, floating product ---------- */
.ra-hero::after{content:"";position:absolute;inset:-25%;z-index:3;pointer-events:none;mix-blend-mode:soft-light;opacity:.9;
  background:radial-gradient(40% 35% at 25% 30%,rgba(255,222,165,.75),transparent 70%),
             radial-gradient(38% 34% at 78% 22%,rgba(224,120,170,.5),transparent 70%),
             radial-gradient(45% 40% at 62% 82%,rgba(80,130,240,.42),transparent 70%);
  animation:raAurora 24s ease-in-out infinite alternate;will-change:transform}
@keyframes raAurora{0%{transform:translate3d(-4%,-3%,0) rotate(0) scale(1)}50%{transform:translate3d(5%,3%,0) rotate(6deg) scale(1.1)}100%{transform:translate3d(-2%,5%,0) rotate(-5deg) scale(1.05)}}
.ra-hero .hs-slide.on img{animation:raKen 16s ease-out both}
.ra-hero .hs-slide.fit-contain.on img{animation:raFloat 6s ease-in-out infinite alternate}
@keyframes raKen{from{transform:scale(1)}to{transform:scale(1.09)}}
@keyframes raFloat{from{transform:translateY(-6px) scale(1)}to{transform:translateY(8px) scale(1.025)}}

/* ---------- 4) Product cards: reveal on scroll + pulsing gold outline ---------- */
html.js-motion .ra-card:not(.in),html.js-motion .ra-head:not(.in),html.js-motion .ra-brands:not(.in),html.js-motion .ra-comfort__it:not(.in){opacity:0;transform:translate3d(0,26px,0) scale(.97)}
html.js-motion .ra-card.in,html.js-motion .ra-head.in,html.js-motion .ra-brands.in,html.js-motion .ra-comfort__it.in{opacity:1;transform:none;transition:opacity .7s var(--ra-ease),transform .8s var(--ra-ease),box-shadow .35s;transition-delay:calc(var(--i,0)*70ms)}
html.js-motion .ra-card.rv-done{transition:box-shadow .35s,transform .35s var(--ra-ease),opacity .3s;transition-delay:0s}
.ra-card:active{transform:scale(.985)}
.ra-card.is-live::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 26px 3px rgba(200,169,126,.5);opacity:0;animation:raGlowO 3.6s ease-in-out infinite;animation-delay:calc(var(--p,0)*.4s)}
@keyframes raGlowO{0%,100%{opacity:0}50%{opacity:1}}
/* travelling light around the card edge (needs @property support, set by JS) */
html.ra-ang-ok:not(.ra-low) .ra-card.is-live::before,html.ra-ang-ok .ra-ring::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:2px;pointer-events:none;z-index:4;
  background:conic-gradient(from var(--ra-ang),transparent 0 56%,var(--ra-pulse) 72%,#fff 79%,var(--ra-pulse) 86%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:raSpin 6s linear infinite;animation-delay:calc(var(--p,0)*-.7s)}
@keyframes raSpin{to{--ra-ang:360deg}}
.ra-ring{position:relative}
html.ra-ang-ok .ra-ring::before{padding:2px}
/* skeleton shimmer while the product photo loads */
.ra-card__media.is-loading{background:linear-gradient(100deg,#f1ece2 30%,#fbf8f1 50%,#f1ece2 70%);background-size:200% 100%;animation:raSheen 1.3s linear infinite}
.ra-card__media.is-loading img{opacity:0}
.ra-card__media img{transition:opacity .45s,transform .5s}
@keyframes raSheen{to{background-position:-200% 0}}

/* ---------- 5) Buttons: press ripple + sweeping light on the gold CTA ---------- */
.ra-btn,.ra-card__add,.ra-pill{position:relative;overflow:hidden}
.ra-rip{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.5);transform:translate(-50%,-50%) scale(0);animation:raRip .65s ease-out forwards}
@keyframes raRip{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
.ra-btn--gold::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-60%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);animation:raSweep 4.8s ease-in-out infinite}
@keyframes raSweep{0%,58%{left:-60%}100%{left:135%}}
.ra-bump{animation:raBump .6s var(--ra-ease)}
@keyframes raBump{0%{scale:1}35%{scale:1.55}100%{scale:1}}

/* ---------- 6) Brand marquee strip ---------- */
.ra-brands{position:relative;background:var(--ra-bg);border-bottom:1px solid rgba(229,224,214,.7);overflow:hidden;padding:15px 0}
.ra-brands::before,.ra-brands::after{content:"";position:absolute;top:0;bottom:0;width:48px;z-index:2;pointer-events:none}
.ra-brands::before{left:0;background:linear-gradient(90deg,var(--ra-bg),transparent)}
.ra-brands::after{right:0;background:linear-gradient(270deg,var(--ra-bg),transparent)}
.ra-brands__scroll{overflow-x:auto;overflow-y:hidden;direction:ltr;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.ra-brands__scroll::-webkit-scrollbar{display:none}
.ra-brands__track{display:flex;width:max-content;direction:ltr}
.ra-brands__track a{padding:0 26px;font:700 14.5px var(--ra-sans);letter-spacing:.34em;text-transform:uppercase;color:#6a6a78;text-decoration:none;white-space:nowrap;transition:color .25s}
.ra-brands__track a:hover,.ra-brands__track a:active{color:var(--ra-gold)}
.ra-brands:hover .ra-brands__track,.ra-brands:active .ra-brands__track{animation-play-state:paused}

/* ---------- 7) Floating help button (WhatsApp) with expanding rings ---------- */
.ra-fab{position:fixed;inset-inline-end:14px;bottom:calc(80px + env(safe-area-inset-bottom,0px));z-index:95;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#25D366,#128C7E);color:#fff;text-decoration:none;box-shadow:0 8px 22px rgba(18,140,126,.45);transition:transform .35s var(--ra-ease),opacity .3s}
.ra-fab::before,.ra-fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(37,211,102,.6);pointer-events:none;animation:raRing 2.8s ease-out infinite}
.ra-fab::after{animation-delay:1.4s}
.ra-fab.is-away{transform:translateY(96px) scale(.8);opacity:0;pointer-events:none}
.ra-fab__tip{position:absolute;inset-inline-end:64px;top:50%;transform:translateY(-50%) scale(.9);transform-origin:right center;white-space:nowrap;background:#fff;color:#1A1918;font:600 12.5px var(--ra-sans);padding:9px 13px;border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:opacity .3s,transform .35s var(--ra-ease)}
.ra-fab.show-tip .ra-fab__tip{opacity:1;transform:translateY(-50%) scale(1)}
@keyframes raRing{from{transform:scale(1);opacity:.9}to{transform:scale(1.95);opacity:0}}
.lx-store-mode .ra-fab{display:none!important}

/* ---------- 8) Real-offer countdown inside the campaign bar ---------- */
.ra-cd{display:inline-flex;align-items:center;gap:3px;margin-inline-start:10px;font:700 12px var(--ra-sans);vertical-align:middle}
.ra-cd b{min-width:26px;padding:3px 5px;border-radius:6px;background:rgba(0,0,0,.28);color:inherit;text-align:center;font-variant-numeric:tabular-nums}
.ra-cd i{font-style:normal;opacity:.8}
.ra-cd__lb{font-weight:600;letter-spacing:.06em;margin-inline-end:4px;opacity:.9}

/* ---------- Respect people who asked for less motion ---------- */
@media (prefers-reduced-motion:reduce){
  .ra-ticker__track,.ra-brands__track,.ra-hero::after,.ra-hero .hs-slide img,.ra-header__bar::before,#topNav.ra-header::after,.ra-btn--gold::after,.ra-fab::before,.ra-fab::after,.ra-card::before,.ra-card::after,.ra-ring::before,.ra-ticker i{animation:none!important}
  html.js-motion .ra-card:not(.in),html.js-motion .ra-head:not(.in),html.js-motion .ra-brands:not(.in),html.js-motion .ra-comfort__it:not(.in){opacity:1;transform:none}
}
html.ra-calm .ra-ticker__track,html.ra-calm .ra-brands__track,html.ra-calm .ra-hero::after,html.ra-calm .ra-header__bar::before,html.ra-calm .ra-btn--gold::after,html.ra-calm .ra-fab::before,html.ra-calm .ra-fab::after{animation:none!important}

/* =====================================================================
   PROFILE (account page): Rewards card, clear share button, counters, product slider
   ===================================================================== */
.pf-card{position:relative;background:linear-gradient(145deg,#0F1B3C,#1d2f63 70%,#26397a);border-radius:22px;padding:22px 18px 18px;color:#fff;overflow:hidden;box-shadow:0 18px 40px rgba(15,27,60,.28)}
.pf-card::before{content:"";position:absolute;width:280px;height:280px;right:-100px;top:-120px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(200,169,126,.5),transparent 70%);animation:raGlow 10s ease-in-out infinite alternate}
.pf-top{position:relative;display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pf-tier{font:800 11px var(--ra-sans);letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.pf-brand{font:400 22px 'Cormorant Garamond',serif;letter-spacing:.02em}
.pf-points{position:relative;display:flex;align-items:baseline;gap:8px}
.pf-points b{font:600 46px/1 var(--ra-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pf-points span{font-size:14px;color:rgba(255,255,255,.7)}
.pf-bar{position:relative;height:9px;background:rgba(255,255,255,.14);border-radius:99px;overflow:hidden;margin:14px 0 8px}
.pf-bar i{display:block;height:100%;border-radius:99px;position:relative;overflow:hidden}
.pf-bar i::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);animation:raSweep 3.2s ease-in-out infinite}
html.js-motion .pf-bar i[data-w]{width:0!important;transition:width 1.5s var(--ra-ease)}
html.js-motion .pf-bar i.grown{width:var(--w)!important}
.pf-next{position:relative;font-size:12.5px;color:rgba(255,255,255,.75);margin:0 0 18px}
.pf-code{position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:16px 14px}
.pf-code__lbl{margin:0 0 10px;font:700 11.5px var(--ra-sans);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.pf-code__lbl span{display:block;margin-top:5px;color:#EBCB92;letter-spacing:.03em;text-transform:none;font-size:14px}
.pf-code__val{font:700 30px/1.1 'Courier New',monospace;letter-spacing:.3em;text-align:center;padding:14px 6px;border-radius:12px;background:rgba(0,0,0,.28);margin-bottom:14px;direction:ltr;-webkit-user-select:all;user-select:all}
.pf-share{position:relative;overflow:hidden;width:100%;min-height:56px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:14px;cursor:pointer;
  font:800 16.5px var(--ra-sans);letter-spacing:.03em;color:#1A1204;background:linear-gradient(135deg,#F6DFAE,#C8A97E 55%,#E3BC72);
  box-shadow:0 10px 26px rgba(200,169,126,.42),inset 0 1px 0 rgba(255,255,255,.6);animation:raShareGlow 2.6s ease-in-out infinite;-webkit-tap-highlight-color:transparent}
.pf-share::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-60%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:raSweep 3.6s ease-in-out infinite}
.pf-share:active{scale:.98}
@keyframes raShareGlow{0%,100%{box-shadow:0 10px 26px rgba(200,169,126,.4),0 0 0 0 rgba(235,203,146,.6),inset 0 1px 0 rgba(255,255,255,.6)}50%{box-shadow:0 12px 30px rgba(200,169,126,.55),0 0 0 10px rgba(235,203,146,0),inset 0 1px 0 rgba(255,255,255,.6)}}
.pf-sub{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.pf-ghost{min-height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.09);color:#fff;font:700 13.5px var(--ra-sans);cursor:pointer;-webkit-tap-highlight-color:transparent}
.pf-ghost:active{background:rgba(255,255,255,.18)}
.pf-how{font-size:12.5px;line-height:1.75;color:rgba(255,255,255,.68);margin:12px 0 0}
.pf-stats{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:16px}
.pf-stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px 4px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.pf-stat svg{color:#EBCB92}
.pf-stat b{font:700 23px/1.1 var(--ra-sans);font-variant-numeric:tabular-nums}
.pf-stat span{font-size:10.5px;line-height:1.3;color:rgba(255,255,255,.72)}
@media (max-width:360px){.pf-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* swipeable product slider */
.pf-sec{margin-top:22px}
.pf-sec__h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.pf-sec__h h3{font:400 25px 'Cormorant Garamond',serif;margin:0;color:#0F1B3C}
.pf-sec__h a{font-size:13px;color:#8B7355;text-decoration:none;font-weight:700}
.pf-slider{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:8px 2px 14px;scrollbar-width:none}
.pf-slider::-webkit-scrollbar{display:none}
.pf-slide{flex:0 0 min(64vw,240px);scroll-snap-align:center}
.pf-dots{display:flex;justify-content:center;gap:6px}
.pf-dots i{width:7px;height:7px;border-radius:99px;background:rgba(15,27,60,.18);transition:width .3s,background .3s}
.pf-dots i.on{width:24px;background:#C8A97E}
/* stat tiles: a clear 2-column grid with living numbers */
.lx-dash-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:visible!important}
.lx-dash-stat-card{flex:none!important;width:auto!important;min-width:0!important}
.lx-dash-stat-card__value{font-variant-numeric:tabular-nums}
.lx-dash-stat-card__icon{animation:raIcon 3.4s ease-in-out infinite}
@keyframes raIcon{0%,100%{scale:1}50%{scale:1.14}}

/* =====================================================================
   PRODUCT CARDS: framed photo (like COSKERA), living gradient, shine, vivid animated discount badge
   ===================================================================== */
.ra-card__media{padding:9px;border-radius:17px;background:linear-gradient(135deg,#F6EAD7,#F7DCE6 36%,#E9E2F8 66%,#DCEBFA);background-size:260% 260%}
.ra-card__media::before{content:"";position:absolute;inset:9px;border-radius:11px;background:#fff;z-index:0}
.ra-card__media img{position:relative;z-index:1}
.ra-card__media::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(110deg,transparent 36%,rgba(255,255,255,.6) 50%,transparent 64%);transform:translateX(-130%)}
.ra-card.is-live .ra-card__media{animation:raFrame 9s ease-in-out infinite;animation-delay:calc(var(--p,0)*-1s)}
.ra-card.is-live .ra-card__media::after{animation:raShine 5.5s ease-in-out infinite;animation-delay:calc(var(--p,0)*.55s)}
@keyframes raFrame{0%,100%{background-position:0% 40%}50%{background-position:100% 60%}}
@keyframes raShine{0%,66%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.ra-card__badge{top:15px;inset-inline-start:15px}
.ra-card__badge:not(.ra-card__badge--muted){overflow:hidden;font-size:12px;letter-spacing:.04em;padding:5px 12px;color:#fff;
  background:linear-gradient(135deg,#B3124F,#EE3F6E 55%,#FF8A4C);box-shadow:0 6px 16px rgba(190,24,80,.4)}
.ra-card__badge:not(.ra-card__badge--muted)::after{content:"";position:absolute;top:0;bottom:0;width:45%;left:-60%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg)}
.ra-card.is-live .ra-card__badge:not(.ra-card__badge--muted){animation:raBadge 2.6s ease-in-out infinite;animation-delay:calc(var(--p,0)*.3s)}
.ra-card.is-live .ra-card__badge:not(.ra-card__badge--muted)::after{animation:raBadgeShine 3.2s ease-in-out infinite;animation-delay:calc(var(--p,0)*.3s)}
@keyframes raBadge{0%,100%{scale:1}50%{scale:1.1}}
@keyframes raBadgeShine{0%,55%{left:-60%}100%{left:130%}}
/* a brighter, thicker travelling line around each card */
html.ra-ang-ok:not(.ra-low) .ra-card.is-live::before,html.ra-ang-ok .ra-ring::before{padding:2.5px;animation-duration:4.6s}

/* =====================================================================
   PAYMENT METHODS strip
   ===================================================================== */
.ra-sec--pay{padding:26px 16px 12px}
.ra-pay{text-align:center}
.ra-pay__t{display:flex;justify-content:center;align-items:center;gap:7px;font:700 12px var(--ra-sans);letter-spacing:.16em;text-transform:uppercase;color:#6E685F;margin:0 0 12px}
.ra-pay__row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ra-pay__b{display:inline-flex;transition:transform .3s var(--ra-ease)}
.ra-pay__b svg{display:block;border-radius:5px;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.ra-pay__b:hover,.ra-pay__b:active{transform:translateY(-3px)}
.ra-pay__n{font-size:12px;line-height:1.7;color:#8A857B;margin:12px auto 0;max-width:38ch}
.ra-pay--compact{margin:18px 0 6px}
.ra-pay--compact .ra-pay__t{color:rgba(255,255,255,.6)}

@media (prefers-reduced-motion:reduce){
  .pf-card::before,.pf-bar i::after,.pf-share,.pf-share::after,.lx-dash-stat-card__icon,.ra-card__media,.ra-card__media::after,.ra-card__badge,.ra-card__badge::after{animation:none!important}
  html.js-motion .pf-bar i[data-w]{width:var(--w)!important;transition:none}
}
html.ra-calm .pf-card::before,html.ra-calm .pf-bar i::after,html.ra-calm .pf-share,html.ra-calm .pf-share::after,html.ra-calm .lx-dash-stat-card__icon,html.ra-calm .ra-card__media,html.ra-calm .ra-card__media::after,html.ra-calm .ra-card__badge,html.ra-calm .ra-card__badge::after{animation:none!important}

/* =====================================================================
   PRODUCT PAGE: living frame around the main photo, vivid sale pill, auto-changing gallery
   ===================================================================== */
.lx-pdp__main-img-wrap{padding:12px!important;border-radius:26px!important;background:linear-gradient(135deg,#F6EAD7,#F7DCE6 36%,#E9E2F8 66%,#DCEBFA)!important;background-size:260% 260%;overflow:hidden;
  animation:raFrame 9s ease-in-out infinite,raPdpPulse 3.6s ease-in-out infinite}
.lx-pdp__main-img-wrap::before{content:"";position:absolute;inset:12px;border-radius:18px;background:#fff;z-index:0}
.lx-pdp__main-img-wrap img.lx-pdp__main-img{position:relative;z-index:1;border-radius:18px;transition:opacity .45s var(--ra-ease),transform .6s var(--ra-ease)}
.lx-pdp__main-img-wrap img.lx-pdp__main-img.ra-swap{opacity:0;transform:scale(1.03)}
.ra-pdp-shine{position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(110deg,transparent 36%,rgba(255,255,255,.6) 50%,transparent 64%);transform:translateX(-130%);animation:raShine 5.5s ease-in-out infinite}
.ra-pdp-ring{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;display:none}
html.ra-ang-ok:not(.ra-low) .ra-pdp-ring{display:block;padding:3px;background:conic-gradient(from var(--ra-ang),transparent 0 52%,var(--ra-pulse) 70%,#fff 78%,var(--ra-pulse) 86%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:raSpin 5s linear infinite}
@keyframes raPdpPulse{0%,100%{box-shadow:0 10px 30px rgba(15,27,60,.08),0 0 0 0 rgba(200,169,126,0)}50%{box-shadow:0 16px 40px rgba(200,169,126,.35),0 0 0 9px rgba(200,169,126,.16)}}
.lx-pdp__main-img-wrap .lx-pill--sale,.lx-pdp__main-img-wrap .lx-pill--oos{z-index:5}
.lx-pdp__main-img-wrap .lx-pill--sale{overflow:hidden;color:#fff!important;border:0!important;letter-spacing:.1em;font-weight:800;
  background:linear-gradient(135deg,#B3124F,#EE3F6E 55%,#FF8A4C)!important;box-shadow:0 8px 20px rgba(190,24,80,.42);animation:raBadge 2.6s ease-in-out infinite}
.lx-pdp__main-img-wrap .lx-pill--sale::after{content:"";position:absolute;top:0;bottom:0;width:45%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg);animation:raBadgeShine 3.2s ease-in-out infinite}
.ra-disc{display:inline-block;position:relative;overflow:hidden;margin-inline-start:8px;padding:4px 11px;border-radius:999px;color:#fff;font:800 13px var(--ra-sans);background:linear-gradient(135deg,#B3124F,#EE3F6E 55%,#FF8A4C);box-shadow:0 6px 16px rgba(190,24,80,.38);animation:raBadge 2.6s ease-in-out infinite}
.ra-disc::after{content:"";position:absolute;top:0;bottom:0;width:45%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg);animation:raBadgeShine 3.2s ease-in-out infinite}
.ra-pdp-dots{position:absolute;left:0;right:0;bottom:22px;z-index:5;display:flex;justify-content:center;gap:6px;pointer-events:none}
.ra-pdp-dots i{width:7px;height:7px;border-radius:99px;background:rgba(15,27,60,.25);transition:width .3s,background .3s}
.ra-pdp-dots i.on{width:24px;background:#C8A97E}
.lx-pdp__thumb.active{box-shadow:0 0 0 2px #C8A97E!important;border-color:#C8A97E!important}
/* a card that could not load its photo shows the brand name instead of an empty box */
.ra-ph{position:absolute;inset:9px;z-index:2;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;border-radius:11px;background:linear-gradient(145deg,#FBF6EC,#F3E9D6);color:#9B7B46;font:400 22px/1.2 'Cormorant Garamond',serif;letter-spacing:.12em;text-transform:uppercase}

/* =====================================================================
   PARTNER STORE: same living look, clean footer (payment cards only), full width
   ===================================================================== */
body.lx-store-mode .st-foot,body.lx-store-mode .sc-foot{margin-inline:calc(50% - 50vw);width:100vw;max-width:100vw;border-radius:0}
body.lx-store-mode{overflow-x:clip}
.st-foot .ra-pay,.sc-foot .ra-pay{padding:6px 20px 8px}
.st-foot .ra-pay__t,.sc-foot .ra-pay__t{color:var(--on,#fff);opacity:.75}
.st-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;padding:6px 20px 16px}
.st-legal a{display:inline!important;width:auto!important;font-size:12px!important;opacity:.7;padding:2px 0!important}
.st-foot .st-foot__in{padding-bottom:6px}

/* =====================================================================
   PROFILE: more life — aurora, floating sparks, glowing tier, pop-in counters (new royal midnight-violet colour)
   ===================================================================== */
.pf-card{background:linear-gradient(145deg,#100B38,#2A1B6B 52%,#4A2579)!important;box-shadow:0 20px 46px rgba(42,27,107,.38)!important}
.pf-card::before{width:340px!important;height:340px!important;right:-120px!important;top:-140px!important;background:radial-gradient(closest-side,rgba(235,203,146,.62),transparent 70%)!important}
.pf-aurora{position:absolute;inset:-30%;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:radial-gradient(34% 30% at 20% 75%,rgba(236,92,160,.55),transparent 70%),radial-gradient(36% 32% at 85% 60%,rgba(80,130,255,.45),transparent 70%);animation:raAurora 20s ease-in-out infinite alternate}
.pf-sparks{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pf-sparks i{position:absolute;bottom:-12px;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,#FFF3CF,#EBCB92 60%,transparent 72%);opacity:0;animation:raRise 7s linear infinite}
.pf-sparks i:nth-child(1){left:8%;animation-delay:0s}.pf-sparks i:nth-child(2){left:21%;animation-delay:1.6s;scale:.7}.pf-sparks i:nth-child(3){left:35%;animation-delay:3.1s}
.pf-sparks i:nth-child(4){left:49%;animation-delay:.8s;scale:1.3}.pf-sparks i:nth-child(5){left:63%;animation-delay:2.4s;scale:.8}.pf-sparks i:nth-child(6){left:77%;animation-delay:4.2s}
.pf-sparks i:nth-child(7){left:90%;animation-delay:1.1s;scale:.9}.pf-sparks i:nth-child(8){left:15%;animation-delay:5.2s;scale:1.1}
@keyframes raRise{0%{transform:translateY(0);opacity:0}12%{opacity:.95}100%{transform:translateY(-420px);opacity:0}}
.pf-top,.pf-points,.pf-bar,.pf-next,.pf-code,.pf-stats{position:relative;z-index:1}
.pf-tier{animation:raTier 2.8s ease-in-out infinite}
@keyframes raTier{0%,100%{box-shadow:0 0 0 0 rgba(235,203,146,.55)}50%{box-shadow:0 0 0 9px rgba(235,203,146,0)}}
.pf-points b{background:linear-gradient(180deg,#fff,#EBCB92);-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-stat{animation:raFloatY 5s ease-in-out infinite}
.pf-stat:nth-child(2){animation-delay:-1.2s}.pf-stat:nth-child(3){animation-delay:-2.4s}.pf-stat:nth-child(4){animation-delay:-3.6s}
@keyframes raFloatY{0%,100%{translate:0 0}50%{translate:0 -4px}}
.lx-dash-stat-card{position:relative;overflow:hidden}
.lx-dash-stat-card::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(200,169,126,.28),transparent);transform:skewX(-18deg);animation:raSweep 5.5s ease-in-out infinite}
.lx-dash-stat-card:nth-child(2)::after{animation-delay:.8s}.lx-dash-stat-card:nth-child(3)::after{animation-delay:1.6s}.lx-dash-stat-card:nth-child(4)::after{animation-delay:2.4s}

@media (prefers-reduced-motion:reduce){
  .lx-pdp__main-img-wrap,.ra-pdp-shine,.ra-pdp-ring,.lx-pill--sale,.lx-pill--sale::after,.ra-disc,.ra-disc::after,.pf-aurora,.pf-sparks i,.pf-tier,.pf-stat,.lx-dash-stat-card::after{animation:none!important}
}
html.ra-calm .lx-pdp__main-img-wrap,html.ra-calm .ra-pdp-shine,html.ra-calm .ra-pdp-ring,html.ra-calm .ra-disc,html.ra-calm .ra-disc::after,html.ra-calm .pf-aurora,html.ra-calm .pf-sparks i,html.ra-calm .pf-tier,html.ra-calm .pf-stat,html.ra-calm .lx-dash-stat-card::after{animation:none!important}

/* ---------- Category circles: travelling light ring + shine sweep (same look as product cards) ---------- */
.ra-pod__ring{position:relative}
html.ra-ang-ok .ra-pod__ring::before{content:"";position:absolute;inset:-2px;border-radius:50%;padding:3px;pointer-events:none;z-index:4;
  background:conic-gradient(from var(--ra-ang),transparent 0 52%,var(--ra-pulse) 70%,#fff 78%,var(--ra-pulse) 86%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:raSpin 5s linear infinite;animation-delay:calc(var(--pn,0)*-.8s)}
/* fallback when the browser has no @property: soft pulsing glow instead of the travelling line */
html:not(.ra-ang-ok) .ra-pod__ring{animation:raPodGlow 3.2s ease-in-out infinite;animation-delay:calc(var(--pn,0)*-.5s)}
@keyframes raPodGlow{0%,100%{box-shadow:0 3px 10px rgba(0,0,0,.06),0 0 0 0 rgba(200,169,126,0)}50%{box-shadow:0 3px 10px rgba(0,0,0,.06),0 0 14px 3px rgba(200,169,126,.45)}}
.ra-pod__in{position:relative}
.ra-pod__in::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:50%;
  background:linear-gradient(110deg,transparent 36%,rgba(255,255,255,.75) 50%,transparent 64%);transform:translateX(-130%);
  animation:raShine 5.5s ease-in-out infinite;animation-delay:calc(var(--pn,0)*.9s)}
.ra-pod:nth-child(1){--pn:0}.ra-pod:nth-child(2){--pn:1}.ra-pod:nth-child(3){--pn:2}.ra-pod:nth-child(4){--pn:3}.ra-pod:nth-child(5){--pn:4}
.ra-pod:nth-child(6){--pn:5}.ra-pod:nth-child(7){--pn:6}.ra-pod:nth-child(8){--pn:7}.ra-pod:nth-child(9){--pn:8}.ra-pod:nth-child(10){--pn:9}
@media (prefers-reduced-motion:reduce){.ra-pod__ring::before,.ra-pod__ring,.ra-pod__in::after{animation:none!important}.ra-pod__in::after{display:none}}
html.ra-calm .ra-pod__ring::before,html.ra-calm .ra-pod__ring,html.ra-calm .ra-pod__in::after{animation:none!important}
html.ra-calm .ra-pod__in::after{display:none}