/* Compact, colourful 3D category tiles.  The visual language is intentionally
   closer to a product picker than a gallery: one object, one colour, one label. */
.category-media-3d-tile{
  --grocery-grid:url('/static/images/categories/3d/grocery-category-grid-v2.png');
  --restaurant-grid:url('/static/images/categories/3d/restaurant-category-grid-v2.png');
  background-image:var(--category-grid);
  background-position:var(--category-position,0 0);
  background-repeat:no-repeat;
  background-size:var(--category-size,600% 400%);
}
.category-media-3d-tile::after{display:none}

/* Sprite cells are square. Let their width determine their height instead of
   stretching them into the fixed-height gallery row on different screens. */
.category-list-card{
  grid-template-rows:auto auto!important;
  align-content:start;
  min-height:0!important;
}
.category-list-card .category-media-3d-tile{
  aspect-ratio:1 / 1;
  height:auto!important;
  min-height:0!important;
  align-self:start;
  padding:0!important;
}

/* Grocery: six columns, four rows. */
.category-media-3d-tile[data-category-sprite="all"]{--category-grid:var(--grocery-grid);--category-position:0% 0%}
.category-media-3d-tile[data-category-sprite="discounts"]{--category-grid:var(--grocery-grid);--category-position:20% 0%}
.category-media-3d-tile[data-category-sprite="dairy"]{--category-grid:var(--grocery-grid);--category-position:40% 0%}
.category-media-3d-tile[data-category-sprite="bakery"]{--category-grid:var(--grocery-grid);--category-position:60% 0%}
.category-media-3d-tile[data-category-sprite="fresh"]{--category-grid:var(--grocery-grid);--category-position:80% 0%}
.category-media-3d-tile[data-category-sprite="meat"]{--category-grid:var(--grocery-grid);--category-position:100% 0%}
.category-media-3d-tile[data-category-sprite="pantry"]{--category-grid:var(--grocery-grid);--category-position:0% 33.333%}
.category-media-3d-tile[data-category-sprite="drinks"]{--category-grid:var(--grocery-grid);--category-position:20% 33.333%}
.category-media-3d-tile[data-category-sprite="fish"]{--category-grid:var(--grocery-grid);--category-position:40% 33.333%}
.category-media-3d-tile[data-category-sprite="sweets"]{--category-grid:var(--grocery-grid);--category-position:60% 33.333%}
.category-media-3d-tile[data-category-sprite="frozen"]{--category-grid:var(--grocery-grid);--category-position:80% 33.333%}
.category-media-3d-tile[data-category-sprite="pet"],.category-media-3d-tile[data-category-sprite="petshop"]{--category-grid:var(--grocery-grid);--category-position:100% 33.333%}
.category-media-3d-tile[data-category-sprite="pharmacy"]{--category-grid:var(--grocery-grid);--category-position:0% 66.667%}
.category-media-3d-tile[data-category-sprite="stationery"]{--category-grid:var(--grocery-grid);--category-position:20% 66.667%}
.category-media-3d-tile[data-category-sprite="books"]{--category-grid:var(--grocery-grid);--category-position:40% 66.667%}
.category-media-3d-tile[data-category-sprite="beauty"]{--category-grid:var(--grocery-grid);--category-position:60% 66.667%}
.category-media-3d-tile[data-category-sprite="kids"]{--category-grid:var(--grocery-grid);--category-position:80% 66.667%}
.category-media-3d-tile[data-category-sprite="gifts"]{--category-grid:var(--grocery-grid);--category-position:100% 66.667%}
.category-media-3d-tile[data-category-sprite="auto"]{--category-grid:var(--grocery-grid);--category-position:0% 100%}
.category-media-3d-tile[data-category-sprite="home-diy"]{--category-grid:var(--grocery-grid);--category-position:20% 100%}
.category-media-3d-tile[data-category-sprite="sports"]{--category-grid:var(--grocery-grid);--category-position:40% 100%}
.category-media-3d-tile[data-category-sprite="personal"]{--category-grid:var(--grocery-grid);--category-position:60% 100%}
.category-media-3d-tile[data-category-sprite="household"]{--category-grid:var(--grocery-grid);--category-position:80% 100%}
.category-media-3d-tile[data-category-sprite="appliances"]{--category-grid:var(--grocery-grid);--category-position:100% 100%}
/* These two have dedicated artwork until their matching colour tiles are
   added to the next illustration batch. */
.category-media-3d-tile[data-category-sprite="electronics"]{--category-grid:url('/static/images/categories/3d/electronics-v1.png');--category-position:center;--category-size:cover}
.category-media-3d-tile[data-category-sprite="accessories"]{--category-grid:url('/static/images/categories/mowo-realistic-scenes/accessories.svg');--category-position:center;--category-size:cover}

/* Restaurant: three columns, three rows. */
.category-media-3d-tile[data-category-sprite="fastfood"]{--category-grid:var(--restaurant-grid);--category-position:0% 0%;--category-size:300% 300%}
.category-media-3d-tile[data-category-sprite="georgian"]{--category-grid:var(--restaurant-grid);--category-position:50% 0%;--category-size:300% 300%}
.category-media-3d-tile[data-category-sprite="shawarma"]{--category-grid:var(--restaurant-grid);--category-position:100% 0%;--category-size:300% 300%}
.category-media-3d-tile[data-category-sprite="pizza"]{--category-grid:var(--restaurant-grid);--category-position:0% 50%;--category-size:300% 300%}
.category-media-3d-tile[data-category-sprite="burger"]{--category-grid:var(--restaurant-grid);--category-position:50% 50%;--category-size:300% 300%}
.category-media-3d-tile[data-category-sprite="asian"]{--category-grid:var(--restaurant-grid);--category-position:100% 50%;--category-size:300% 300%}
.category-media-3d-tile[data-category-sprite="salads"]{--category-grid:var(--restaurant-grid);--category-position:0% 100%;--category-size:300% 300%}
.category-media-3d-tile[data-category-sprite="desserts"]{--category-grid:var(--restaurant-grid);--category-position:50% 100%;--category-size:300% 300%}
.category-media-3d-tile[data-category-sprite="coffee"]{--category-grid:var(--restaurant-grid);--category-position:100% 100%;--category-size:300% 300%}

@media(max-width:700px){
  .category-grid,html[data-customer-view="grocery"] .catalog-section .category-grid{gap:11px!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;padding:4px 0 18px!important}
  .category-list-card{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;grid-template-rows:auto minmax(34px,auto)!important;min-height:0!important;overflow:visible!important;padding:0!important;text-align:center!important}
  .category-list-card::before{display:none}
  .category-list-card.active{background:transparent!important;box-shadow:none!important}
  .category-media{border-radius:19px!important;box-shadow:0 6px 15px rgba(13,23,48,.16)!important;min-height:78px!important}
  .category-label{align-self:start;font-size:11px!important;font-weight:800!important;line-height:1.18!important;min-height:34px!important;padding:7px 2px 0!important;text-align:center!important}
  .category-list-card.active .category-media{box-shadow:0 0 0 2px var(--category-accent),0 7px 17px rgba(13,23,48,.18)!important}
  .category-list-card.active::before{display:flex;inset:4px 4px auto auto}
}

/* Keep category names legible on the dark customer theme. */
html[data-theme="dark"] .category-list-card .category-label{
  color:#f6f8ff!important;
  font-weight:900!important;
  text-shadow:0 1px 8px rgba(0,0,0,.55);
}
html[data-theme="dark"] .category-list-card.active .category-label{color:#fff!important}