/* Mobile-only tweaks for the store grid and container */
@media (max-width: 767px) {
  .store-container { padding-left: 8px; padding-right: 8px; }

  /* Phones: 2 kolommen i.p.v. 1 voor betere informatie-dichtheid */
  .store-products {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem; /* compacter zodat twee kaarten netjes passen */
  }

  /* Kaarten compacter maken zodat ze in twee kolommen passen zonder overflow */
  .store-product {
    padding: 1rem 1rem 1.2rem 1rem;
    min-height: 0; /* laat hoogte auto meegroeien; vaste min-height desktop niet nodig */
    max-height: none; /* verwijder desktop max-height beperking op mobiel */
  }

  /* Afbeelding kleiner voor 2 kolommen */
  .store-product-image {
    max-width: 120px;
    max-height: 120px;
    margin-bottom: 0.9rem;
  }

  /* Titel iets kleiner zodat er geen overflow is in smalle kolommen */
  .store-product-title { font-size: 1.02em; margin-top: 0.5rem; }

  /* Beschrijving beperken tot 3 regels voor consistente kaart hoogtes */
  .store-product-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 0; /* laat line-clamp hoogte bepalen */
    margin-bottom: 0.45rem; /* iets minder zodat knoppen hoger komen */
  }

  /* Levertijd blok iets compacter */
  .store-product-meta-block { min-height: 2.2em; margin-bottom: 0.25em; }
  .store-product-delivery { max-height: 2.2em; }

  /* Knoppenrij compacter en geen teveel verticale ruimte */
  .store-product-buttons-row { margin-top: 0.3rem; gap: 8px; }

  /* Icon button: behoud 40px (≥44 kan krap zijn bij 2 kolommen); focus ring blijft */
  .store-product-button { width: 40px !important; height: 40px !important; font-size: 18px !important; }

  /* Verberg levertijd op mobiel om kaart korter te houden */
  .store-product-delivery { display: none !important; }
  /* Verminder gereserveerde ruimte indien levertijd verborgen is */
  .store-product-meta-block { min-height: 1.2em; }

  /* Tekst toggling voor bekijk-knop */
  .store-product-bekijk-btn .text-desktop { display: none !important; }
  .store-product-bekijk-btn .text-mobile { display: inline !important; }

  /* Maak 'Meer info' knop zelfde hoogte als icon button */
  .store-product-bekijk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 14px; /* horizontale padding voor tekst */
    line-height: 1;
    font-size: 0.92rem;
    box-sizing: border-box;
    border-radius: 8px; /* match icon button */
    white-space: nowrap;
  }

  /* Ruimte boven de knoppen verder reduceren door stock/meta marges te verkleinen */
  .store-product-stock { margin-bottom: 0.25rem !important; }
  .store-product-meta-block { margin-bottom: 0.1rem; }
}