@import url("/css/pages/catalog-base.css");

.ok-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:0 5vw 100px}
.ok-cat-card{background:#fff;border:1px solid rgba(11,11,12,.08);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px;transition:transform .25s,box-shadow .25s;min-height:150px;overflow:hidden}
.ok-cat-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.08)}
.ok-cat-emoji{font-size:30px;line-height:1}
.ok-cat-title{font-size:17px;font-weight:700;color:var(--ok-black)}
.ok-cat-count{font-size:12.5px;color:#8a887f}
.ok-cat-card.has-photo{padding:0}
/* QA request (Sep 10, 2026): "remove the white gap above and below the
   picture." First fix tried object-fit:cover on a fixed 220px box, but
   that crops these banner images (which have their own text/logos baked
   in right up to the edge) - user follow-up: "all the picture have been
   crop. i don't like this... resize the icon box to adjust all the white
   background gap." So instead of forcing the image into a fixed-height
   box, the box itself now sizes to the image: no fixed height, no
   object-fit, just width:100% with the browser scaling height to match
   each image's own aspect ratio - the box is exactly as tall as the
   (uncropped) image, so there's no leftover white strip above or below
   it. Card heights will vary slightly row to row since these banners
   aren't all the same aspect ratio - that's expected here, not a bug. */
.ok-cat-photo-wrap{position:relative;line-height:0}
/* QA follow-up (Sep 17, 2026): the .32 scrim first tried here (to mute
   the flyer's own baked-in text) made the whole photo read as flat/murky,
   since - unlike the homepage service cards - nothing is overlaid on top
   of this image; the title/count sit in a separate white area below it.
   Dropped way down to a bare touch of contrast instead. */
.ok-cat-photo-wrap::after{content:'';position:absolute;inset:0;background:rgba(11,11,12,.08)}
.ok-cat-photo{width:100%;height:auto;display:block;background:#fff}
.ok-cat-card.has-photo .ok-cat-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px}
.ok-cat-card.has-photo .ok-cat-emoji{display:none}
.ok-catalog-search{display:flex;gap:10px;max-width:480px;margin:0 5vw 36px}
.ok-catalog-search input{width:100%;padding:13px 16px;border-radius:999px;border:1.5px solid rgba(11,11,12,.15);font-size:14.5px;font-family:'Poppins',sans-serif}
.ok-catalog-search button{padding:13px 24px;border-radius:999px;border:none;background:linear-gradient(120deg,var(--ok-orange-text),var(--ok-orange-2));color:#fff;font-weight:700;font-size:14px;cursor:pointer}

@media (max-width: 880px){ .ok-cat-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 480px){ .ok-cat-grid{grid-template-columns:1fr} }