.zaringcatg-wrap{ position:relative; width:100%; margin:0 0 20px; direction:rtl; } .zaringcatg-scroller{ overflow-x:auto; overflow-y:hidden; padding:6px 2px 12px; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#a9a9a9 #efefef; } .zaringcatg-scroller::-webkit-scrollbar{ height:6px; } .zaringcatg-scroller::-webkit-scrollbar-track{ background:#efefef; border-radius:999px; } .zaringcatg-scroller::-webkit-scrollbar-thumb{ background:#a9a9a9; border-radius:999px; } .zaringcatg-scroller::-webkit-scrollbar-thumb:hover{ background:#8f8f8f; } .zaringcatg-track{ display:grid; grid-auto-flow:column; grid-auto-columns:132px; gap:12px; min-width:max-content; align-items:stretch; } .zaringcatg-card{ position:relative; display:block; text-decoration:none !important; color:#1f1f1f; outline:none; border-radius:10px; transition:transform .22s ease; } .zaringcatg-card:hover{ transform:translateY(-2px); } .zaringcatg-card__inner{ position:relative; display:block; width:100%; aspect-ratio:1/1; background:#fff; border:1px solid #ece7d8; border-radius:10px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.04); transition:border-color .25s ease, box-shadow .25s ease, background .25s ease; } .zaringcatg-card__base{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px; gap:10px; } .zaringcatg-card__media{ width:100%; height:58%; display:flex; align-items:center; justify-content:center; } .zaringcatg-card__iconbox{ width:64px; height:64px; border-radius:12px; background:#ffd84d; display:flex; align-items:center; justify-content:center; transition:transform .25s ease, background .25s ease, box-shadow .25s ease; box-shadow:0 6px 14px rgba(255,216,77,.26); } .zaringcatg-card__iconsvg{ width:30px; height:30px; color:#7f6200; display:flex; align-items:center; justify-content:center; } .zaringcatg-card__iconsvg svg{ width:100%; height:100%; display:block; } .zaringcatg-card__content{ width:100%; min-height:42%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:5px; } .zaringcatg-card__title{ font-size:13px; font-weight:600; line-height:1.8; color:#202020; margin:0; } .zaringcatg-card__meta{ position:relative; min-height:20px; display:flex; align-items:center; justify-content:center; width:100%; } .zaringcatg-card__count, .zaringcatg-card__cta-inline{ position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:11px; line-height:1.7; transition:all .24s ease; } .zaringcatg-card__count{ color:#7a7a7a; opacity:1; } .zaringcatg-card__cta-inline{ color:#c79a00; opacity:0; transform:translateX(-50%) translateY(6px); font-weight:500; } .zaringcatg-card:hover .zaringcatg-card__inner, .zaringcatg-card:focus .zaringcatg-card__inner, .zaringcatg-card:focus-visible .zaringcatg-card__inner, .zaringcatg-card.zaringcatg-card--active .zaringcatg-card__inner{ border-color:#ffd84d; box-shadow:0 8px 18px rgba(255,216,77,.18); background:#fff; } .zaringcatg-card:hover .zaringcatg-card__iconbox, .zaringcatg-card:focus .zaringcatg-card__iconbox, .zaringcatg-card:focus-visible .zaringcatg-card__iconbox{ transform:scale(1.04); background:#ffe266; box-shadow:0 8px 18px rgba(255,216,77,.34); } .zaringcatg-card:hover .zaringcatg-card__count, .zaringcatg-card:focus .zaringcatg-card__count, .zaringcatg-card:focus-visible .zaringcatg-card__count{ opacity:0; transform:translateX(-50%) translateY(-6px); } .zaringcatg-card:hover .zaringcatg-card__cta-inline, .zaringcatg-card:focus .zaringcatg-card__cta-inline, .zaringcatg-card:focus-visible .zaringcatg-card__cta-inline{ opacity:1; transform:translateX(-50%) translateY(0); } .zaringcatg-card.zaringcatg-card--active .zaringcatg-card__inner{ border-color:#ffd84d; background:#fffef7; } .zaringcatg-card.zaringcatg-card--active .zaringcatg-card__title{ color:#6f5b16; } .zaringcatg-card.zaringcatg-card--active .zaringcatg-card__count{ color:#8b7b48; } @media (min-width:1200px){ .zaringcatg-track{ grid-auto-columns:140px; gap:12px; } } @media (max-width:1024px){ .zaringcatg-track{ grid-auto-columns:126px; gap:10px; } } @media (max-width:767px){ .zaringcatg-scroller{ padding-bottom:10px; } .zaringcatg-track{ grid-auto-columns:116px; gap:9px; } .zaringcatg-card__inner{ border-radius:9px; } .zaringcatg-card__base{ padding:10px; gap:8px; } .zaringcatg-card__iconbox{ width:56px; height:56px; border-radius:10px; } .zaringcatg-card__iconsvg{ width:26px; height:26px; } .zaringcatg-card__title{ font-size:12px; } .zaringcatg-card__count, .zaringcatg-card__cta-inline{ font-size:10px; } }