/*
ROMEX — AVNZOR-STYLE CATEGORY SECTION
Goal:
- Keep the single hero image untouched.
- Make the category cards share the SAME outer container width as the hero.
- Desktop: 4 cards in one row.
- Mobile: 2 x 2.
- Cards fill the available container width.
- Small, consistent gaps.
- Rounded corners like AVNZOR.
- No horizontal overflow.
- Does not touch the hero/slider.
*/

/* ---------- Shared category-section container ---------- */
.ab-categories,
.ab-category-section,
.ab-categories-section,
.ab-home-categories,
section:has(.ab-category-card),
section:has(.ab-category-item),
section:has(.ab-category) {
  width: min(100%, 80rem) !important;
  max-width: 80rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
}

/* ---------- Category grid ---------- */
.ab-categories-grid,
.ab-category-grid,
.ab-categories-list,
.ab-category-list,
.ab-categories > div,
.ab-category-section > div {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- Individual cards ---------- */
.ab-category-card,
.ab-category-item,
.ab-category,
.ab-categories a {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

/* Images inside category cards */
.ab-category-card img,
.ab-category-item img,
.ab-category img,
.ab-categories a img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  object-fit: cover !important;
  margin: 0 !important;
  border-radius: inherit !important;
}

/* If the card uses a fixed image wrapper, make it proportional */
.ab-category-card picture,
.ab-category-item picture,
.ab-category picture,
.ab-categories a picture {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
}

/* ---------- Desktop: four equal cards ---------- */
@media (min-width: 769px) {
  .ab-categories,
  .ab-category-section,
  .ab-categories-section,
  .ab-home-categories,
  section:has(.ab-category-card),
  section:has(.ab-category-item),
  section:has(.ab-category) {
    width: min(calc(100% - 32px), 80rem) !important;
    max-width: 80rem !important;
  }

  .ab-categories-grid,
  .ab-category-grid,
  .ab-categories-list,
  .ab-category-list,
  .ab-categories > div,
  .ab-category-section > div {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .ab-category-card img,
  .ab-category-item img,
  .ab-category img,
  .ab-categories a img {
    aspect-ratio: 1.15 / 1 !important;
    object-fit: cover !important;
  }
}

/* ---------- Mobile: two cards per row ---------- */
@media (max-width: 768px) {
  .ab-categories,
  .ab-category-section,
  .ab-categories-section,
  .ab-home-categories,
  section:has(.ab-category-card),
  section:has(.ab-category-item),
  section:has(.ab-category) {
    width: calc(100% - 16px) !important;
    max-width: none !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    padding: 0 !important;
  }

  .ab-categories-grid,
  .ab-category-grid,
  .ab-categories-list,
  .ab-category-list,
  .ab-categories > div,
  .ab-category-section > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .ab-category-card,
  .ab-category-item,
  .ab-category,
  .ab-categories a {
    border-radius: 15px !important;
  }

  .ab-category-card img,
  .ab-category-item img,
  .ab-category img,
  .ab-categories a img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 0.98 / 1 !important;
    object-fit: cover !important;
  }
}

/* Very small phones */
@media (max-width: 390px) {
  .ab-categories,
  .ab-category-section,
  .ab-categories-section,
  .ab-home-categories,
  section:has(.ab-category-card),
  section:has(.ab-category-item),
  section:has(.ab-category) {
    width: calc(100% - 12px) !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
  }

  .ab-categories-grid,
  .ab-category-grid,
  .ab-categories-list,
  .ab-category-list,
  .ab-categories > div,
  .ab-category-section > div {
    gap: 5px !important;
  }
}

/* Safety: never allow the category block to create horizontal scrolling */
html,
body {
  overflow-x: hidden !important;
}