/* FMKE "Top Rated" banner (top-rated.php). Flat colours, no gradients.
   Motion: staggered card reveal, star fill + score count-up on first view, card hover lift. */
.fmke-tr-wrap{max-width:66.4989em;margin:0 auto;padding:0 2.617em;box-sizing:border-box}
@media(max-width:782px){.fmke-tr-wrap{padding:0 12px}}
@media(min-width:1025px){.fmke-tr-wrap{width:90vw;max-width:1800px;margin-left:calc(50% - 45vw);margin-right:calc(50% - 45vw);padding:0}}

.fmke-tr{display:grid;grid-template-columns:330px minmax(0,1fr);margin:28px 0;border:1px solid var(--fmke-border,#F0E4D8);border-radius:16px;overflow:hidden;background:#FFF9F2;box-shadow:0 6px 20px rgba(31,61,44,.08)}
.fmke-tr *{box-sizing:border-box}

/* ---- Intro panel ---- */
.fmke-tr__intro{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:30px 28px;background:var(--fmke-dark,#1F3D2C);color:#fff}
.fmke-tr__kicker{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fmke-primary,#FF6A00)}
.fmke-tr__kicker svg{display:block}
.fmke-tr .fmke-tr__title{margin:0;font-size:27px;line-height:1.15;font-weight:800;color:#fff;letter-spacing:-.01em}
.fmke-tr .fmke-tr__sub{margin:0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.72)}
.fmke-tr__score{display:flex;align-items:center;gap:14px;margin-top:2px}
.fmke-tr__num{font-size:46px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums;color:#fff}
.fmke-tr__scoremeta{display:flex;flex-direction:column;gap:5px}
.fmke-tr__scoremeta small{font-size:12px;color:rgba(255,255,255,.7)}
.fmke-tr__actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
.fmke-tr__cta{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:#fff;color:var(--fmke-dark,#1F3D2C)!important;font-size:13.5px;font-weight:700;text-decoration:none!important;white-space:nowrap;transition:background .2s,color .2s}
.fmke-tr__cta span{display:inline-block;transition:transform .2s}
.fmke-tr__cta:hover{background:var(--fmke-primary,#FF6A00);color:#fff!important}
.fmke-tr__cta:hover span{transform:translateX(3px)}
.fmke-tr__arrows{display:inline-flex;gap:8px}
.fmke-tr__arrow{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;cursor:pointer;transition:background .2s,border-color .2s,opacity .2s}
.fmke-tr__arrow:hover{background:rgba(255,255,255,.14);border-color:#fff}
.fmke-tr__arrow[disabled]{opacity:.35;cursor:default;background:transparent;border-color:rgba(255,255,255,.2)}
.fmke-tr__preview{align-self:flex-start;padding:4px 9px;border-radius:6px;background:rgba(255,255,255,.14);color:#fff;font-size:11px}

/* ---- Stars (two layers of the same star mask; --r = filled width) ---- */
.fmke-tr__stars{--s:15px;position:relative;display:inline-block;flex:0 0 auto;width:calc(var(--s)*5);height:var(--s);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E3DACE' d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3 6.1 20.6l1.3-6.6L2.5 9.4l6.6-.8z'/%3E%3C/svg%3E") repeat-x left center/var(--s) var(--s)}
.fmke-tr__stars--dark{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23496753' d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3 6.1 20.6l1.3-6.6L2.5 9.4l6.6-.8z'/%3E%3C/svg%3E")}
.fmke-tr__stars--lg{--s:19px}
.fmke-tr__stars::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--r,0%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF6A00' d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3 6.1 20.6l1.3-6.6L2.5 9.4l6.6-.8z'/%3E%3C/svg%3E") repeat-x left center/var(--s) var(--s);transition:width 1.1s cubic-bezier(.2,.8,.2,1) .25s}

/* ---- Product rail ---- */
.fmke-tr__rail{display:flex;gap:14px;padding:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:22px;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none}
.fmke-tr__rail::-webkit-scrollbar{display:none}
.fmke-tr__card{flex:0 0 200px;display:flex;flex-direction:column;scroll-snap-align:start;background:#fff;border:1px solid var(--fmke-border,#F0E4D8);border-radius:12px;overflow:hidden;color:var(--fmke-text,#1F3D2C)!important;text-decoration:none!important;transition:transform .28s ease,box-shadow .28s ease}
.fmke-tr__card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(31,61,44,.13)}
.fmke-tr__img{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#F6EFE6}
.fmke-tr__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.fmke-tr__card:hover .fmke-tr__img img{transform:scale(1.05)}
.fmke-tr__rank{position:absolute;top:9px;left:9px;padding:3px 9px;border-radius:999px;background:var(--fmke-dark,#1F3D2C);color:#fff;font-size:11px;font-weight:700;line-height:1.4}
.fmke-tr__body{display:flex;flex-direction:column;gap:5px;padding:12px 14px 14px;flex:1}
.fmke-tr__cat{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--fmke-muted,#767676)}
.fmke-tr__name{font-size:14px;line-height:1.3;font-weight:700;color:var(--fmke-text,#1F3D2C);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.fmke-tr__rate{display:flex;align-items:center;gap:6px;font-size:12px}
.fmke-tr__rate b{font-weight:700;color:var(--fmke-text,#1F3D2C)}
.fmke-tr__rate small{color:var(--fmke-muted,#767676);font-size:12px}
.fmke-tr__price{margin-top:auto;padding-top:4px;font-size:15px;font-weight:800;color:var(--fmke-text,#1F3D2C)}
.fmke-tr__price ins{text-decoration:none;background:none}
.fmke-tr__price del{margin-right:5px;font-size:12px;font-weight:400;opacity:.55}

/* ---- Reveal on first view (JS adds .is-armed, then .is-in) ---- */
.fmke-tr.is-armed:not(.is-in) .fmke-tr__intro>*,
.fmke-tr.is-armed:not(.is-in) .fmke-tr__card{opacity:0}
.fmke-tr.is-armed:not(.is-in) .fmke-tr__stars::after{width:0}
.fmke-tr.is-in .fmke-tr__intro>*{animation:fmke-tr-up .55s ease backwards}
.fmke-tr.is-in .fmke-tr__intro>:nth-child(2){animation-delay:.07s}
.fmke-tr.is-in .fmke-tr__intro>:nth-child(3){animation-delay:.14s}
.fmke-tr.is-in .fmke-tr__intro>:nth-child(4){animation-delay:.21s}
.fmke-tr.is-in .fmke-tr__intro>:nth-child(5){animation-delay:.28s}
.fmke-tr.is-in .fmke-tr__card{animation:fmke-tr-up .55s ease backwards;animation-delay:calc(var(--i)*70ms + .15s)}
@keyframes fmke-tr-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---- Mobile: intro on top, swipeable cards below ---- */
@media(max-width:782px){
 .fmke-tr{grid-template-columns:1fr;margin:20px 0}
 .fmke-tr__intro{padding:20px 16px;gap:10px}
 .fmke-tr .fmke-tr__title{font-size:22px}
 .fmke-tr .fmke-tr__sub{display:none}
 .fmke-tr__num{font-size:38px}
 .fmke-tr__arrows{display:none}
 .fmke-tr__actions{margin-top:0}
 .fmke-tr__score{justify-content:space-between}
 .fmke-tr__rail{padding:14px 12px 16px;gap:10px;scroll-padding-left:12px}
 .fmke-tr__card{flex-basis:152px}
 .fmke-tr__name{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
 .fmke-tr.is-in .fmke-tr__intro>*,.fmke-tr.is-in .fmke-tr__card{animation:none}
 .fmke-tr__stars::after,.fmke-tr__card,.fmke-tr__img img{transition:none}
}