/* Rich attributes (package 27): notes timeline / tiles / chips on the product page and value pages. RTL. */
.ra-wrap{direction:rtl;text-align:right}
.ra-group{margin:0 0 22px}
.ra-group-title{margin:0 0 12px;font-size:1.05rem;font-weight:700;color:#333}
.ra-notes{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 4px;margin:0;padding:0;list-style:none}
.ra-notes>li{margin:0;padding:0;list-style:none}
.ra-note{display:flex;flex-direction:column;align-items:center;width:104px;padding:6px 2px 8px;border-radius:14px;color:#333;text-decoration:none;transition:background-color .2s}
a.ra-note:hover,a.ra-note:focus-visible{background:#fff0f1;color:#b3475d}
a.ra-note:focus-visible{outline:3px solid #ffa6a8;outline-offset:1px}
.ra-stage{position:relative;display:block;width:84px;height:92px;perspective:420px}
.ra-float{position:absolute;left:6px;top:0;width:72px;height:72px;display:block;transform-style:preserve-3d;will-change:transform}
.ra-img{display:block;width:72px!important;height:72px!important;max-width:none!important;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.18))}
.ra-shadow{position:absolute;left:50%;bottom:2px;width:46px;height:9px;margin-left:-23px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.28),rgba(0,0,0,0));display:block}
.ra-name{margin-top:2px;font-size:.84rem;line-height:1.5;text-align:center}
.ra-note-text{font-size:.72rem;color:#888;text-align:center}
/* Floating: up/down with a limited tilt (a full 360° spin of a flat image looks fake), shadow shrinks when higher. */
.ra-anim .ra-float{animation:ra-bob 4.6s ease-in-out infinite;animation-delay:var(--ra-d,0s)}
.ra-anim .ra-shadow{animation:ra-shadow 4.6s ease-in-out infinite;animation-delay:var(--ra-d,0s)}
@keyframes ra-bob{0%,100%{transform:translateY(0) rotateY(-18deg) rotateX(4deg)}50%{transform:translateY(-11px) rotateY(18deg) rotateX(-3deg)}}
@keyframes ra-shadow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.68);opacity:.55}}
.ra-anim a.ra-note:hover .ra-float,.ra-anim a.ra-note:focus-visible .ra-float{animation-play-state:paused;transform:translateY(-6px) scale(1.12)}
.ra-anim a.ra-note:hover .ra-shadow,.ra-anim a.ra-note:focus-visible .ra-shadow{animation-play-state:paused}
.ra-paused .ra-float,.ra-paused .ra-shadow{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.ra-anim .ra-float,.ra-anim .ra-shadow{animation:none}}
/* ---- Timeline of tiered groups (top → middle → base). Wraps, never hides notes. ---- */
.ra-tl{--ra-c1:#e9b43a;--ra-c2:#df7397;--ra-c3:#8d6e63;--ra-c0:#a7a7a7;padding:16px 14px 8px;border-radius:16px;background:#fff;border:1px solid #f3e3e4}
.ra-tl-bar{position:relative;display:grid;grid-template-columns:repeat(var(--ra-n,3),minmax(0,1fr));gap:14px;padding-top:34px}
.ra-tl-bar::before{content:"";position:absolute;top:14px;right:3%;left:3%;height:6px;border-radius:6px;background:linear-gradient(270deg,var(--ra-c1),var(--ra-c2) 50%,var(--ra-c3))}
.ra-tl-tier{--ra-c:var(--ra-c0);position:relative;min-width:0;text-align:center}
.ra-tone-1{--ra-c:var(--ra-c1)}.ra-tone-2{--ra-c:var(--ra-c2)}.ra-tone-3{--ra-c:var(--ra-c3)}
.ra-tl-tier::before{content:"";position:absolute;top:-26px;right:50%;width:16px;height:16px;margin-right:-8px;border-radius:50%;background:#fff;border:4px solid var(--ra-c);box-sizing:border-box}
.ra-tl-head{margin-bottom:8px}
.ra-tl-label{display:block;font-weight:700;font-size:.95rem;color:var(--ra-c)}
.ra-tl-time{display:block;font-size:.72rem;color:#8a8a8a}
.ra-tl-notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:12px 6px;justify-items:center;margin:0;padding:0;list-style:none}
.ra-tl-notes>li{margin:0;padding:0;list-style:none;min-width:0}
.ra-tl-note{display:block;width:84px;padding:4px 0 6px;border-radius:12px;text-align:center;color:#333;text-decoration:none}
a.ra-tl-note:hover,a.ra-tl-note:focus-visible{background:#fff4f5;color:#b3475d}
a.ra-tl-note:focus-visible{outline:3px solid #ffa6a8;outline-offset:1px}
.ra-tl-name{display:block;margin-top:4px;font-size:.82rem;font-weight:600;line-height:1.5}
.ra-tl-en{display:block;font-size:.66rem;color:#8a8a8a;line-height:1.4}
.ra-tl-note-text{display:block;font-size:.68rem;color:#8a8a8a;line-height:1.4}
/* transparent cut-out + shine masked by the image itself */
.ra-pic{position:relative;display:block;width:68px;height:68px;margin:0 auto;filter:drop-shadow(0 8px 8px rgba(0,0,0,.18))}
.ra-pic .ra-img{width:100%!important;height:100%!important;max-width:none!important;object-fit:contain;filter:none}
.ra-gloss{position:absolute;inset:0;-webkit-mask:var(--ra-m) center/contain no-repeat;mask:var(--ra-m) center/contain no-repeat;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.9) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:150% 0;animation:ra-gloss 4.2s ease-in-out infinite;animation-delay:var(--ra-d,0s);pointer-events:none}
.ra-anim .ra-pic{animation:ra-tl-bob 4.6s ease-in-out infinite;animation-delay:var(--ra-d,0s)}
@keyframes ra-gloss{0%{background-position:150% 0}40%,100%{background-position:-50% 0}}
@keyframes ra-tl-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (hover:hover){a.ra-tl-note .ra-pic{transition:transform .25s}a.ra-tl-note:hover .ra-pic{animation-play-state:paused;transform:perspective(300px) rotateY(-14deg) rotateX(6deg) scale(1.08)}}
.ra-paused .ra-pic,.ra-paused .ra-gloss{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.ra-gloss,.ra-anim .ra-pic{animation:none!important}}
@media (max-width:700px){
 .ra-tl{padding:14px 10px 6px}
 .ra-tl-bar{grid-template-columns:1fr;padding-top:0;gap:16px}
 .ra-tl-bar::before,.ra-tl-tier::before{display:none}
 .ra-tl-tier{text-align:right;border-right:5px solid var(--ra-c);padding-right:10px}
 .ra-tl-head{margin-bottom:4px}
 .ra-tl-label,.ra-tl-time{display:inline}
 .ra-tl-time{margin-right:8px}
 .ra-tl-notes{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
 .ra-tl-note{width:72px}
 .ra-pic{width:58px;height:58px}
}
.ra-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ra-chips-title{font-weight:700;margin-left:4px}
.ra-chip{display:inline-block;padding:3px 12px;border-radius:999px;background:#f5f5f5;color:#444;font-size:.85rem;text-decoration:none}
a.ra-chip:hover{background:#ffe3e5;color:#b3475d}
@media (max-width:767px){
 .ra-notes{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px;-webkit-overflow-scrolling:touch}
 .ra-notes>li{scroll-snap-align:start;flex:0 0 auto}
 .ra-note{width:88px}
 .ra-stage{width:72px;height:80px}.ra-float{left:6px;width:60px;height:60px}.ra-img{width:60px!important;height:60px!important}
}
/* Value page header (AdvancedProductSearch) */
.ra-landing{display:flex;gap:18px;align-items:flex-start;margin:6px 0 18px;padding:16px;border:1px solid #f0e4e5;border-radius:16px;background:#fffafa;direction:rtl;text-align:right}
.ra-landing .ra-stage{width:120px;height:132px;flex:0 0 auto}
.ra-landing .ra-float{width:104px;height:104px;left:8px}
.ra-landing .ra-img{width:104px!important;height:104px!important}
.ra-landing .ra-shadow{width:66px;margin-left:-33px}
.ra-landing-body{flex:1 1 auto;min-width:0;line-height:1.9}
.ra-landing-en{color:#999;font-size:.85rem;margin:0 0 6px}
.ra-landing-text{margin:0 0 8px}
.ra-facts{margin:6px 0 0;padding:10px 14px;border-radius:12px;background:#fff;border:1px dashed #ecd3d6;list-style:none}
.ra-facts li{margin:0 0 4px;padding:0;list-style:none}
.ra-facts a{color:#b3475d}
@media (max-width:767px){.ra-landing{flex-direction:column;align-items:center;text-align:center}.ra-landing .ra-facts{text-align:right}}