:root{
  --horeka-primary: #b71c27;
  --horeka-muted: #6b6b6b;
  --horeka-surface: #fff;
  --horeka-radius-pill: 999px;
}

/* Wrapper */
.horeka-cat-grid-wrap{ padding:12px; max-width:100%; box-sizing:border-box; font-family: "Helvetica Neue", Arial, sans-serif; }

/* Category chips (circular) */
.horeka-cat-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  justify-items:center;
  align-items:start;
  margin-bottom:12px;
}
.horeka-cat-item{ background:transparent; border:0; padding:6px; text-align:center; cursor:pointer; width:100%; max-width:120px; box-sizing:border-box; }
.horeka-cat-image-wrap{
  width:78px; height:78px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:#fff; box-shadow:0 8px 20px rgba(0,0,0,0.06); border:2px solid rgba(0,0,0,0.03);
}
.horeka-cat-image-wrap img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:center; -o-object-fit:cover;
  background-repeat:no-repeat; background-position:center center;
}
.horeka-cat-meta{ padding-top:6px; display:flex; flex-direction:column; gap:4px; align-items:center; }
.horeka-cat-title{ font-size:13px; color:#222; line-height:1.1; margin:0; max-height:2.6em; overflow:hidden; text-overflow:ellipsis; }
.horeka-cat-sub{ font-size:11px; color:var(--horeka-muted); }

/* ---------------------------
   Utility pills (2 per row)
   --------------------------- */
.horeka-utility-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-bottom:12px;
  align-items:flex-start;
}

/* Pill card */
.horeka-utility-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  width: calc(50% - 12px);     /* two per row */
  min-height:74px;
  padding:10px 16px 10px 84px; /* left padding reserves space for the circular image */
  border-radius: var(--horeka-radius-pill);
  background: var(--horeka-surface);
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
  transition: transform .12s ease, box-shadow .18s ease;
  overflow: visible;           /* allow the img to sit above visual ring */
  border: 2px solid transparent;
  box-sizing: border-box;
}

/* Center last pill if odd count */
.horeka-utility-row.odd-last .horeka-utility-card:last-child{
  width:70%;
  margin-left:auto;
  margin-right:auto;
  display:block;
  padding-left:94px;
}

/* Circular image inside pill */
.horeka-utility-card .utility-img{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  width:56px; height:56px;
  border-radius:50%;
  object-fit:cover;            /* critical: cover ensures the image fills and does not tile */
  object-position:center;
  -o-object-fit:cover;
  background-color:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,0.12);
  z-index:10;                  /* sit above ring / shadow */
  border: 3px solid #fff;     /* white ring to separate image from pill border */
  display:block;
}

/* Fallback if for some reason plugin renders background-image instead of <img> */
.horeka-utility-card .utility-img-fallback{
  width:56px;height:56px;border-radius:50%;
  background-size:cover;background-position:center center;background-repeat:no-repeat;
  position:absolute; left:18px; top:50%; transform:translateY(-50%); z-index:9; border:3px solid #fff;
}

/* text inside pill */
.horeka-utility-card .utility-text{ display:block; }
.horeka-utility-card .utility-title{ font-weight:700; font-size:15px; color:#222; margin-bottom:4px; }
.horeka-utility-card .utility-sub{ font-size:13px; color:var(--horeka-muted); }

/* Selected / highlighted pill (ring effect using box-shadow + border color) */
.horeka-utility-card.selected{
  transform: translateY(-3px);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.12),
    0 0 0 4px rgba(183,28,39,0.12); /* outer coloured ring */
  border-color: rgba(183,28,39,0.14);
}

/* ---------------------------
   Product cards (2-per row)
   --------------------------- */
.horeka-cat-products{ margin-top:12px; }
.horeka-utility-items{ display:flex; flex-wrap:wrap; gap:12px; }
.horeka-product-card{
  flex: 1 1 calc(50% - 12px);
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow:0 6px 18px rgba(0,0,0,0.04);
  display:block;
  box-sizing:border-box;
}
.horeka-product-image-wrap{ width:100%; height:160px; overflow:hidden; background:#f7f7f7; }
.horeka-product-image-wrap img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.horeka-product-meta{ padding:10px; }
.horeka-product-title{ font-size:14px; margin:0 0 6px 0; color:#222; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.horeka-product-prices{ display:flex; align-items:center; gap:8px; }
.horeka-product-prices .old-price{ color:#999; text-decoration:line-through; font-size:13px; }
.horeka-product-prices .sale-price{ color:var(--horeka-primary); font-weight:700; font-size:16px; }

/* small-screen adjustments */
@media (max-width:480px){
  .horeka-cat-grid{ grid-template-columns: repeat(3,1fr); gap:8px; }
  .horeka-utility-card{ width:100%; padding-left:78px; min-height:76px; }
  .horeka-utility-row.odd-last .horeka-utility-card:last-child{ width:100%; }
  .horeka-product-card{ flex:1 1 100%; }
  .horeka-product-image-wrap{ height:180px; }
}

/* Accessibility focus style */
.horeka-utility-card:focus{ outline: none; box-shadow: 0 10px 28px rgba(0,0,0,0.12), 0 0 0 4px rgba(183,28,39,0.12); }

/* defensive: ensure imgs inside pills don't repeat */
.horeka-utility-card img { background-repeat: no-repeat !important; background-size: cover !important; background-position: center !important; }