/* ==========================================================================
   SHAHAZ.com — Top Ranking landing page (/rankings/) — ZIP-283
   archive-shahaz_ranking.php. Banner = owner's silk background + trolley (ZIP-429), service strip,
   ranking cards, all ranked products (shared sort / filter bar + canonical cards, compact here).
   Everything is scoped to .shz-rank-landing.
   ========================================================================== */
.shz-rank-landing{--rkl-navy:#2a0a1c;--rkl-muted:#75636b; /* ZIP-430: dark maroon ink to match the magenta banner */background:#fff;padding-bottom:28px;overflow-x:clip}

/* ---------- Banner (ZIP-429) ----------
   The owner's magenta silk background (cover) + his cosmetics trolley on the right. Left: "Top" / "Ranking" in
   white with a thin gold rule, one tag line, one slim white 3D pill. No kicker, no seal, no shadow, no blur. */
.shz-rkl-hero{position:relative;overflow:hidden;color:#fff;background:#b0004f var(--rkl-bg-s) center/cover no-repeat}
@media (min-width:800px){.shz-rkl-hero{background-image:var(--rkl-bg-l)}}
.shz-rkl-hero__in{position:relative;max-width:1240px;margin:0 auto;min-height:clamp(178px,34vw,380px);display:flex;align-items:center;padding:clamp(14px,3vw,40px) clamp(14px,4vw,56px) clamp(32px,4.4vw,58px)}
.shz-rkl-hero__copy{position:relative;z-index:2;width:52%;max-width:520px}
.shz-rkl-title{display:flex;flex-direction:column;margin:0;font-family:Poppins,Inter,"Segoe UI",sans-serif;font-weight:800;line-height:.9;letter-spacing:-.025em;color:#fff}
.shz-rkl-title__top{font-size:clamp(20px,5.4vw,46px);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#ffe3f0}
.shz-rkl-title__rank{position:relative;padding-bottom:clamp(7px,1.1vw,14px);font-size:clamp(36px,10.4vw,96px)}
.shz-rkl-title__rank::after{content:"";position:absolute;left:0;bottom:0;width:clamp(46px,9vw,120px);height:2px;border-radius:2px;background:linear-gradient(90deg,#ffe7a6,#e6b04a 60%,rgba(230,176,74,0))}
.shz-rkl-tags{display:flex;flex-wrap:wrap;align-items:center;gap:.2em .55em;margin:clamp(8px,1.3vw,16px) 0 0;font-size:clamp(10.5px,2.2vw,19px);font-weight:500;line-height:1.25;color:#ffe9f3}
.shz-rkl-tags i{display:block;width:.3em;height:.3em;border-radius:50%;background:#ffd6e9}
.shz-rkl-cta{display:inline-flex;align-items:center;gap:.45em;margin-top:clamp(10px,1.7vw,22px);padding:clamp(7px,1.1vw,13px) clamp(13px,2.2vw,28px);border:1px solid #fff;border-bottom:3px solid #ffb3d4;border-radius:999px;background:#fff;color:#c4005f!important;font-size:clamp(11px,2.1vw,18px);font-weight:700;letter-spacing:.01em;text-decoration:none!important;box-shadow:none;transition:transform .12s ease,border-bottom-width .12s ease}
.shz-rkl-cta svg{width:1.1em;height:1.1em}
.shz-rkl-cta:hover{transform:translateY(-1px)}
.shz-rkl-cta:active{transform:translateY(2px);border-bottom-width:1px}
.shz-rkl-hero__art{position:absolute;z-index:1;right:clamp(4px,3vw,60px);bottom:clamp(20px,2.6vw,34px);width:clamp(170px,47vw,470px);aspect-ratio:840/676}
.shz-rkl-hero__art img{display:block;width:100%;height:100%;object-fit:contain}
@media (min-width:600px) and (max-width:1023px){.shz-rkl-hero__copy{width:50%}.shz-rkl-hero__art{width:34vw;bottom:32px}}
@media (min-width:1024px){.shz-rkl-hero__art{right:5%;bottom:40px;width:clamp(340px,31vw,420px)}}
@media (prefers-reduced-motion:reduce){.shz-rkl-cta{transition:none}}

/* ---------- Service strip (glass, overlaps the banner edge) ---------- */
.shz-rkl-perks{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:1100px;margin:-22px auto 0;width:calc(100% - 20px);padding:clamp(8px,1.2vw,14px) clamp(6px,1.5vw,20px);list-style:none;border-radius:clamp(14px,2vw,22px);
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#ff8cc4,#e6b04a 50%,#ff3d9a) border-box; /* ZIP-429: matches the magenta banner */border:1.5px solid transparent;box-shadow:none}
.shz-rkl-perks li{display:flex;align-items:center;justify-content:center;gap:clamp(4px,1vw,12px);min-width:0;padding:0 4px;color:var(--rkl-navy);font-size:clamp(10px,1.9vw,16px);line-height:1.15}
.shz-rkl-perks li+li{border-left:1px solid #e6e2fb}
.shz-rkl-perks b{font-weight:800}
.shz-rkl-perk__ico{flex:0 0 auto;display:block;width:clamp(20px,3.6vw,38px)}
.shz-rkl-perk__ico svg{display:block;width:100%;height:auto}
@media (max-width:520px){
  .shz-rkl-perks li{flex-direction:column;text-align:center;gap:3px}
}

/* ---------- Sections ---------- */
/* Same side gap as the other product pages (6px), every screen. */
.shz-rkl-section{padding:0}
.shz-rkl-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:clamp(20px,3vw,36px) 8px clamp(10px,1.5vw,16px)}
.shz-rkl-head h2{margin:0;color:var(--rkl-navy);font-size:clamp(18px,3.4vw,30px);font-weight:800;letter-spacing:.01em;text-transform:uppercase;line-height:1.15}
.shz-rkl-head span{flex:0 0 auto;color:var(--rkl-muted);font-size:clamp(12px,1.8vw,16px);font-weight:600}

/* Category cards (ZIP-430): "All" (hot-magenta heart) first, then the real categories of the ranked products — one
   row, swiped sideways; picture + name only. The chosen card has a magenta frame and a magenta name pill. */
.shz-rkl-cats{scroll-margin-top:calc(var(--shz-header-h,66px) + 10px);display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;margin:clamp(14px,2.4vw,26px) 0 0;padding:2px 8px 8px;scroll-padding:0 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.shz-rkl-cats::-webkit-scrollbar{display:none}
.shz-rkl-cat{flex:0 0 clamp(72px,21vw,118px);scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden;border:1.5px solid #f6cfe2;border-radius:12px;background:#fff;color:#17131a!important;text-decoration:none!important;transition:border-color .15s ease,transform .15s ease;-webkit-tap-highlight-color:transparent}
.shz-rkl-cat:hover{border-color:#ff8cc4}
.shz-rkl-cat:active{transform:translateY(1px)}
.shz-rkl-cat__img{display:block;aspect-ratio:1;overflow:hidden;background:#fdeef6}
.shz-rkl-cat__img img{display:block;width:100%;height:100%;object-fit:cover}
.shz-rkl-cat__img.is-all{display:grid;place-items:center;background:linear-gradient(180deg,#fff7fb 0%,#ffe6f2 100%)}
.shz-rkl-cat__img.is-all svg{display:block;width:56%;max-width:62px;height:auto}
.shz-rkl-cat__name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;height:calc(2 * 1.15em + 6px);padding:3px 4px;overflow:hidden;font-size:clamp(10.5px,2.7vw,13px);font-weight:700;line-height:1.15;text-align:center;overflow-wrap:anywhere}
.shz-rkl-cat.is-on{border-color:#e1007e}
.shz-rkl-cat.is-on .shz-rkl-cat__name{background:linear-gradient(180deg,#ff4fb0 0%,#e1007e 100%);color:#fff}

/* ---------- Product cards: the canonical card, compact on this page ----------
 * One-line title, price and rating below; the cart at the bottom-right (ZIP-566). */
.shz-rkl-grid{margin-top:12px}
.shz-rank-landing .shz-cc__features,
.shz-rank-landing .shz-cc__divider,
.shz-rank-landing .shz-cc__perks{display:none!important}
.shz-rank-landing .shz-cc__body{position:relative}
/* ZIP-566 (owner): the cart sits at the very bottom-right of the card (next to the rating / sold line), not up by the
 * title; the title uses the full width, the rating line keeps room for the cart */
.shz-rank-landing .shz-cc__title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.3}
.shz-rank-landing .shz-cc__cart{position:absolute;top:auto;bottom:clamp(5px,3cqi,14px);right:clamp(5px,3cqi,18px);width:clamp(28px,15cqi,52px);height:clamp(28px,15cqi,52px)}
.shz-rank-landing .shz-cc__meta{padding-right:calc(clamp(28px,15cqi,52px) + clamp(5px,3cqi,18px) + 4px);min-height:clamp(28px,15cqi,52px)}