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

/* QA request (Sep 17, 2026): "i want you also to put a back button here" -
   same outline-pill treatment as the service detail page's .ok-back-link
   (see catalog-show.css), reused here for the category services-listing
   page's own back-to-Browse-Services link above the breadcrumb. */
.ok-back-link{display:inline-flex;align-items:center;gap:6px;padding:7px 14px 7px 12px;border-radius:999px;border:1.5px solid rgba(11,11,12,.15);background:#fff;font-size:13px;font-weight:700;color:var(--ok-black);margin-bottom:14px;transition:background .15s,border-color .15s,transform .08s}
.ok-back-link:hover{background:#FAFAF8;border-color:rgba(11,11,12,.3);color:var(--ok-orange-text)}
.ok-back-link:active{transform:scale(.96)}
.ok-back-link-arrow{font-size:14px;transition:transform .15s}
.ok-back-link:hover .ok-back-link-arrow{transform:translateX(-2px)}

.ok-item-card.has-photo{padding:0;overflow:hidden}
/* QA request (Sep 10, 2026): "remove the white gap above and below the
   picture every category and services." Follow-up after object-fit:cover
   cropped these banner images ("i don't like this... resize the icon box
   to adjust all the white background gap"): same fix as .ok-cat-photo in
   catalog-categories.css - no fixed height/object-fit, the box just
   sizes to width:100% and lets height follow the image's own aspect
   ratio, so it's exactly as tall as the uncropped image. */
.ok-item-photo{width:100%;height:auto;display:block;background:#fff}
.ok-item-body{display:flex;flex-direction:column;justify-content:space-between;gap:14px;height:100%}
.ok-item-card.has-photo .ok-item-body{padding:16px 20px 20px}