.homepage-box.welcome-wrapper .welcome {
    padding: 0px;
    border-radius: 6px;
    background-color: #fff !important;
}

.hp-whole {
    padding: 30px !important;
    border-radius: 6px;
    background-color: #f5f5f5 !important;
    margin-top: 50px !important;
}

/* ── Wrapper max 1440px ── */
  .hpcat-wrapper {
    width: 100%;
    max-width: 1440px;
    padding: 40px 30px;
    font-family: 'Roboto', sans-serif;
  }
 
  /* ── Flex grid: 4 equal cols, 30px gaps ── */
  .hpcat-grid {
    display: flex;
    gap: 30px;
  }
 
  /* ── Card shell ── */
  .hpcat-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 270px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid var(--color);
    box-shadow: 0 4px 20px rgba(0,0,0,.13);
    transition:
      transform .38s cubic-bezier(.34,1.56,.64,1),
      box-shadow .38s ease;
  }
  .hpcat-card:hover {
    transform: translateY(-7px) scale(1.025);
    box-shadow: 0 18px 40px rgba(0,0,0,.22);
  }
 
  /* ── Background photo ── */
  .hpcat-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: filter .5s ease, transform .5s ease;
    will-change: filter, transform;
  }
  .hpcat-card:hover .hpcat-bg {
    filter: blur(3px) brightness(.6);
    transform: scale(1.08);
  }
 
  /* ── Wave blob: exactly 1/3 of 270px = 90px ── */
  .hpcat-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90px;
    background: var(--color);
    opacity: .85;
    border-radius: 55% 55% 0 0 / 38% 38% 0 0;
    transition: opacity .38s ease, transform .38s ease;
    transform-origin: bottom center;
  }
  .hpcat-card:hover .hpcat-wave {
    opacity: 0;
    transform: scaleY(0);
  }
 
  /* ── Full colour overlay on hover ── */
  .hpcat-overlay {
    position: absolute;
    inset: 0;
    background: var(--color);
    opacity: 0;
    transition: opacity .45s ease;
  }
  .hpcat-card:hover .hpcat-overlay {
    opacity: .60;
  }
 
  /* ── Icon block – hidden by default, appears on hover ── */
  .hpcat-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% - 4px));
    opacity: 0;
    transition:
      opacity .38s ease .08s,
      transform .42s cubic-bezier(.34,1.56,.64,1) .08s;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 3;
    pointer-events: none;
  }
  /* img icon — replace src with your own icon path */
  .hpcat-icon img {
    width: 52px;
    height: 52px;
    display: block;
    /* keep white icons visible over any background */
    filter: brightness(0) invert(1);
  }
  .hpcat-card:hover .hpcat-icon {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 4px)) translateY(-6px);
  }
 
  /* ── Label ── */
  .hpcat-label {
    position: absolute;
    bottom: 18px;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,.28);
    letter-spacing: .3px;
    z-index: 2;
    transition:
      font-size .38s cubic-bezier(.34,1.56,.64,1),
      bottom .38s cubic-bezier(.34,1.56,.64,1),
      transform .38s ease;
  }
  .hpcat-card:hover .hpcat-label {
    font-size: 38px;
    bottom: auto;
    top: 50%;
    transform: translateY(calc(-50% + 36px));
    left: 0;
  }
 
  /* ── Per-card colours + photos ── */
  .hpcat-card--drogerie  { --color: #4ec4c4; }
  .hpcat-card--kosmetika { --color: #f0a500; }
  .hpcat-card--domacnost { --color: #e84a6f; }
  .hpcat-card--potraviny { --color: #8b5fcf; }
 
  .hpcat-card--drogerie  .hpcat-bg { background-image: url('https://www.lavonio.co.uk/user/documents/upload/obrazky/bg-cleaning.jpg'); }
  .hpcat-card--kosmetika .hpcat-bg { background-image: url('https://www.lavonio.co.uk/user/documents/upload/obrazky/bg-cosmetics-2.jpg'); }
  .hpcat-card--domacnost .hpcat-bg { background-image: url('https://www.lavonio.co.uk/user/documents/upload/obrazky/bg-home.jpg'); }
  .hpcat-card--potraviny .hpcat-bg { background-image: url('https://www.lavonio.co.uk/user/documents/upload/obrazky/bg-food.jpg'); }
 
  /* ══════════════════════════════════════
     TABLET  — 2 cards per row (481–1024px)
  ══════════════════════════════════════ */
  @media (max-width: 1024px) and (min-width: 481px) {
    .hpcat-wrapper { padding: 30px 20px; }
 
    .hpcat-grid {
      flex-wrap: wrap;
      gap: 20px;
    }
 
    .hpcat-card {
      flex: 1 1 calc(50% - 10px);
      max-width: calc(50% - 10px);
      height: 240px;
    }
 
    .hpcat-wave { height: 80px; }
 
    .hpcat-label { font-size: 22px; bottom: 16px; }
    .hpcat-card:hover .hpcat-label { font-size: 28px; }
  }
 
  /* ══════════════════════════════════════
     MOBILE  — 1 card per row (≤ 480px)
  ══════════════════════════════════════ */
  @media (max-width: 480px) {
    .hpcat-wrapper { padding: 20px 16px; }
 
    .hpcat-grid {
      flex-direction: column;
      gap: 16px;
    }
 
    .hpcat-card {
      flex: none;
      width: 100%;
      height: 200px;
    }
 
    .hpcat-wave { height: 67px; }
 
    .hpcat-icon img { width: 40px; height: 40px; }
 
    .hpcat-label { font-size: 18px; bottom: 14px; }
    .hpcat-card:hover .hpcat-label { font-size: 24px; }
 
    .hpcat-card:hover { transform: translateY(-4px) scale(1.015); }
  }