:root{--gap: 16px; --radius: 18px; --border: rgba(17,24,39,.12); --shadow: 0 6px 14px rgba(0,0,0,.08); --shadowH: 0 10px 18px rgba(0,0,0,.12); --text: #111827; --cta-text-color: red;}
.grid-tiles{display: grid; gap: var(--gap);}
.grid-tiles--cats{grid-template-columns: repeat(4, minmax(0,1fr));}
.grid-tiles--brands{grid-template-columns: repeat(6, minmax(0,1fr));}
.tile{border: 1px solid var(--border); border-radius: var(--radius); background: #fff; padding: 14px; display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 14px; min-height: 120px; cursor: pointer; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
.tile:hover{transform: translateY(-1px); box-shadow: var(--shadowH); border-color: rgba(17,24,39,.22);}
.tile-media{width: 92px; height: 92px; border-radius: 16px; background: rgba(17,24,39,.03); border: 1px solid rgba(17,24,39,.08); display: grid; place-items: center; overflow: hidden;}
.tile-img{width: 100%; height: 100%; object-fit: cover;}
.tile-img--contain{object-fit: contain; padding: 10px;}
.tile-title{font-weight: 900; font-size: 15px; line-height: 1.2; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.tile--brand{grid-template-columns: 1fr; text-align: center;}
.tile--brand .tile-title{display: none;}
.tile--brand .tile-media{width: 100%; height: 120px; border: none; background: transparent;}
@media (hover:hover){.tile--brand{position: relative;}.tile--brand::after{content: attr(title); position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); padding: 6px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow); font-size: 12px; font-weight: 800; color: var(--text); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;}.tile--brand:hover::after{opacity: 1; transform: translateX(-50%) translateY(-2px);}}
.tile--cta{border: 1px dashed rgba(17,24,39,.18); background: rgba(17,24,39,.02); box-shadow: none;}
.tile.tile--cta .cta-link{color: var(--cta-text-color) !important; font-weight: 900; font-size: 20px;}
.cat-see-all{background: url("/images/right_finger.svg") no-repeat center / 28px 28px; width: 44px; overflow: hidden; text-indent: -9999px;}
@media (max-width: 1024px){.grid-tiles--cats{grid-template-columns: repeat(2, minmax(0,1fr));}.grid-tiles--brands{grid-template-columns: repeat(3, minmax(0,1fr));}}
@media (max-width: 520px){.tile{grid-template-columns: 1fr; text-align: center;}.tile-media{margin: 0 auto;}}
@media (max-width: 420px){.tile.tile--cta .cta-link{font-size: 18px;}}
.tile.tile--cta{display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 12px;}
.tile.tile--cta .cta-link{white-space: normal; line-height: 1.2; min-width: 0;}
.tile.tile--cta .cat-see-all{width: 44px; height: 44px; justify-self: end; flex-shrink: 0;}
.tile.tile--cta .cta-link{display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
@media (max-width: 360px){.grid-tiles--cats{grid-template-columns: repeat(2, 1fr); gap: 14px;}.tile{padding: 16px; min-height: 160px;}.tile-title{font-size: 15px;}}
@media (max-width: 360px){.tile--cta .cta-link{font-size: 18px;}}
@media (max-width: 360px){.label-main{font-size: 20px;}.label-sub{font-size: 13px;}}
@media (max-width: 360px){.page,
    .container,
    main{padding-left: 16px; padding-right: 16px;}}
.tile--brand .tile-media{display: grid; place-items: center;}
.tile--brand .tile-img{width: 100%; height: 100%; object-fit: contain; object-position: center; display: block;}
.tile--brand.is-active{outline: 2px solid rgba(17,24,39,.35); box-shadow: var(--shadowH); transform: translateY(-1px);}
@media (max-width: 520px){.grid-tiles--brands{gap: 12px;}.tile--brand{padding: 10px; min-height: 104px;}.tile--brand .tile-media{height: 86px;}.tile--brand .tile-img--contain{padding: 8px;}}
@media (max-width: 380px){.grid-tiles--brands{grid-template-columns: repeat(2, minmax(0,1fr));}.tile--brand .tile-media{height: 96px;}}
.tile--brand .tile-media{display: flex; align-items: center; justify-content: center;}
.tile--brand img,
.tile--brand svg{display: block; margin: auto; vertical-align: middle;}
.tile--brand img{width: 100%; height: 100%; object-fit: contain; object-position: center;}
.tile--brand svg{width: 100%; height: 100%; max-width: 200px; max-height: 200px;}
.tile--brand .tile-img--contain{padding: 6px;}