/* MOWO category gallery — a single visual system for photographs and MOWO scenes. */
.category-grid{
  display:grid!important;
  gap:14px!important;
  grid-auto-columns:auto!important;
  grid-auto-flow:row!important;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr))!important;
  overflow:visible!important;
  padding:5px 0 16px!important;
  scroll-snap-type:none!important;
  width:100%;
}

.category-list-card{
  --category-accent:#2f6fed;
  --category-accent-glow:rgba(47,111,237,.16);
  appearance:none;
  background:#fff!important;
  border:1px solid #e1e8f3!important;
  border-radius:19px!important;
  box-shadow:0 5px 16px rgba(23,51,105,.065)!important;
  color:#172c55!important;
  display:grid!important;
  grid-template-rows:minmax(100px,1fr) auto!important;
  isolation:isolate;
  min-height:164px!important;
  min-width:0!important;
  overflow:hidden;
  padding:6px!important;
  position:relative;
  text-align:left!important;
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s cubic-bezier(.2,.85,.3,1),background .22s ease!important;
  width:100%!important;
}

.category-list-card::before{
  background:radial-gradient(circle at 91% 8%,var(--category-accent-glow),transparent 35%);
  content:"";
  inset:0;
  pointer-events:none;
  position:absolute;
  z-index:-1;
}

.category-list-card.active{
  background:#fff!important;
  border-color:var(--category-accent)!important;
  box-shadow:0 0 0 2px var(--category-accent-glow),0 9px 22px rgba(23,51,105,.1)!important;
  transform:none!important;
}

.category-list-card:active{transform:translateY(0) scale(.98)!important}
.category-list-card:focus-visible{outline:3px solid #8fb2ff!important;outline-offset:2px!important}

.category-list-card.active::before{
  align-items:center;
  background:linear-gradient(135deg,#2167ff,#5a3fe5);
  border:2px solid #fff;
  border-radius:50%;
  box-shadow:0 3px 9px rgba(23,67,185,.34);
  color:#fff;
  content:"✓";
  display:flex;
  font-size:11px;
  font-weight:950;
  height:20px;
  inset:9px 9px auto auto;
  justify-content:center;
  line-height:1;
  position:absolute;
  width:20px;
  z-index:5;
}

.category-media{
  background:linear-gradient(145deg,#eaf1ff,#d6e2fb);
  border:0;
  border-radius:14px;
  box-shadow:none;
  display:block;
  min-height:100px;
  overflow:hidden;
  position:relative;
  width:100%;
  z-index:1;
}

.category-media::after{
  background:linear-gradient(180deg,transparent 42%,rgba(4,18,48,.20) 100%);
  content:"";
  inset:0;
  pointer-events:none;
  position:absolute;
  z-index:2;
}

.category-illustration{
  display:block;
  height:100%;
  transform-origin:50% 55%;
  transition:filter .35s ease,transform .4s cubic-bezier(.2,.8,.26,1);
  width:100%;
}

.category-illustration-photo{object-fit:cover;object-position:center}

/* Category names sit below the image, so retain natural detail instead of
   applying a dark scene treatment to genuine product photography. */
.category-media-photo::after{background:linear-gradient(180deg,transparent 64%,rgba(4,18,48,.11) 100%)}

.category-media-graphic{
  align-items:center;
  background:radial-gradient(circle at 28% 16%,#ffffffdc,transparent 34%),linear-gradient(145deg,var(--category-accent-soft,#edf3ff),#fff);
  border-color:color-mix(in srgb,var(--category-accent) 22%,#fff);
  display:flex;
  justify-content:center;
}

.category-media-graphic .category-illustration:not(.category-illustration-scene){
  filter:drop-shadow(0 8px 8px var(--category-accent-glow));
  height:78px;
  width:78px;
}

/* Retail categories use their own full MOWO scenes instead of small, isolated glyphs. */
.category-media-scene{background:var(--category-accent-soft,#edf3ff)}
.category-media-scene .category-illustration-scene{
  filter:saturate(1.04) contrast(1.01);
  object-fit:cover;
  object-position:center;
  transform:scale(1.01);
}

/* Hand-drawn scene artwork stays bright: its own illustrated background
   replaces the generic photo-overlay treatment without changing the layout. */
.category-media-mowo-scene{background:#eef1fb}
.category-media-mowo-scene::after{background:linear-gradient(180deg,transparent 58%,rgba(54,50,96,.12) 100%)}
.category-media-mowo-scene .category-illustration-scene{filter:saturate(1.06) contrast(1.01);transform:scale(1.035)}

/* Semi-realistic editorial scenes supply their own light and contact shadows.
   Let the painted material stay bright instead of treating it like a photo. */
.category-media-mowo-realistic-scene{background:#f2f4fa}
.category-media-mowo-realistic-scene::after{background:none}
.category-media-mowo-realistic-scene .category-illustration-scene{
  filter:saturate(1.04) contrast(1.015);
  object-position:center;
  transform:scale(1.025);
}

.category-label{
  align-self:center;
  color:#1d2f4d;
  display:-webkit-box!important;
  font-size:13px!important;
  font-weight:800!important;
  letter-spacing:-.01em;
  line-height:1.25!important;
  min-height:46px!important;
  overflow:hidden;
  padding:10px 8px 8px!important;
  text-align:left!important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.category-list-card.active .category-label{color:#194dbb}

.discount-category-card .category-media::before{
  align-items:center;
  background:linear-gradient(135deg,#ff6a41,#ec3e56);
  border:2px solid #fff;
  border-radius:50%;
  box-shadow:0 3px 9px rgba(196,58,51,.22);
  color:#fff;
  content:"%";
  display:flex;
  font-size:14px;
  font-weight:950;
  height:25px;
  justify-content:center;
  left:7px;
  line-height:1;
  position:absolute;
  top:7px;
  width:25px;
  z-index:4;
}

.category-list-card[data-category-art="discounts"],.category-list-card[data-category-art="fastfood"],.category-list-card[data-category-art="burger"],.category-list-card[data-category-art="pizza"],.category-list-card[data-category-art="shawarma"]{--category-accent:#f15b3d;--category-accent-soft:#fff0e9;--category-accent-glow:rgba(241,91,61,.20)}
.category-list-card[data-category-art="fresh"],.category-list-card[data-category-art="salads"],.category-list-card[data-category-art="pet"],.category-list-card[data-category-art="petshop"],.category-list-card[data-category-art="pharmacy"],.category-list-card[data-category-art="personal"],.category-list-card[data-category-art="household"]{--category-accent:#219b7b;--category-accent-soft:#e9faf3;--category-accent-glow:rgba(33,155,123,.18)}
.category-list-card[data-category-art="sweets"],.category-list-card[data-category-art="beauty"],.category-list-card[data-category-art="kids"],.category-list-card[data-category-art="asian"],.category-list-card[data-category-art="desserts"],.category-list-card[data-category-art="coffee"],.category-list-card[data-category-art="books"]{--category-accent:#6a4fe0;--category-accent-soft:#f0edff;--category-accent-glow:rgba(106,79,224,.18)}
.category-list-card[data-category-art="bakery"],.category-list-card[data-category-art="pantry"],.category-list-card[data-category-art="gifts"],.category-list-card[data-category-art="sports"],.category-list-card[data-category-art="georgian"],.category-list-card[data-category-art="home-diy"]{--category-accent:#db8b22;--category-accent-soft:#fff7e7;--category-accent-glow:rgba(219,139,34,.18)}

@media (hover:hover) and (pointer:fine){
  .category-list-card:hover{
    background:#fff!important;
    border-color:var(--category-accent)!important;
    box-shadow:0 9px 22px rgba(23,51,105,.11)!important;
    transform:translateY(-2px)!important;
  }
  .category-list-card:hover .category-illustration{filter:saturate(1.05) contrast(1.01);transform:scale(1.025)}
}

@media(max-width:700px){
  .category-grid,html[data-customer-view="grocery"] .catalog-section .category-grid{
    gap:8px!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    padding:3px 0 12px!important;
  }
  .category-list-card{
    border-radius:15px!important;
    grid-template-rows:74px minmax(37px,auto)!important;
    min-height:119px!important;
    padding:4px!important;
    text-align:left!important;
  }
  .category-media{border-radius:11px;min-height:74px}
  .category-media-graphic .category-illustration:not(.category-illustration-scene){height:60px;width:60px}
  .category-label{font-size:11px!important;line-height:1.18!important;min-height:37px!important;overflow-wrap:anywhere;padding:6px 5px 4px!important}
  .category-list-card.active::before{height:18px;inset:6px 6px auto auto;width:18px}
  .discount-category-card .category-media::before{font-size:11px;height:20px;left:5px;top:5px;width:20px}
}

@media(max-width:420px){
  .category-grid,html[data-customer-view="grocery"] .catalog-section .category-grid{gap:7px!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media(max-width:359px){
  .category-grid,html[data-customer-view="grocery"] .catalog-section .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .category-list-card{grid-template-rows:78px minmax(40px,auto)!important;min-height:126px!important}
  .category-media{min-height:78px}
  .category-label{min-height:40px!important}
}

@media(prefers-reduced-motion:reduce){
  .category-list-card,.category-illustration{animation:none!important;transition:none!important}
  .category-list-card:active{transform:none!important}
}