/* YAZD MOKAMEL SHOP — VERSION 8
   Category artwork is shown fully inside a rounded, frosted-glass square. */
.category-tile{
  min-height:248px;
  padding:17px 14px;
  gap:10px;
  justify-content:center;
}
.category-image-frame{
  position:relative;
  z-index:2;
  order:1;
  display:grid;
  place-items:center;
  flex:0 0 136px;
  width:136px;
  height:136px;
  padding:7px;
  overflow:hidden;
  border-radius:29px;
  border:1px solid rgba(255,255,255,.86);
  background:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.98),transparent 42%),
    linear-gradient(145deg,rgba(255,255,255,.78),rgba(225,240,250,.48));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(190,214,232,.35),
    0 13px 30px rgba(12,43,91,.12),
    0 0 0 5px rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(16px) saturate(1.18);
  backdrop-filter:blur(16px) saturate(1.18);
  transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .55s ease,border-color .4s ease;
}
.category-image-frame::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:27px;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.48),transparent 42%,rgba(255,255,255,.12));
  z-index:1;
}
.category-image{
  position:relative;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  flex:none;
  object-fit:contain;
  object-position:center;
  border:0;
  border-radius:21px;
  padding:0;
  margin:0;
  background:transparent;
  mix-blend-mode:normal;
  opacity:1;
  mask-image:none;
  box-shadow:none;
  transform:translateZ(0);
  transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s ease;
}
.category-tile--dam .category-image-frame{
  background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.98),transparent 42%),linear-gradient(145deg,rgba(244,251,255,.9),rgba(215,235,247,.66));
}
.category-tile--aqua .category-image-frame{
  background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.98),transparent 42%),linear-gradient(145deg,rgba(239,251,255,.9),rgba(203,235,247,.68));
}
.category-tile--poultry .category-image-frame{
  background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.98),transparent 42%),linear-gradient(145deg,rgba(255,253,247,.94),rgba(245,235,215,.66));
}
.category-tile--premix .category-image-frame{
  background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.98),transparent 42%),linear-gradient(145deg,rgba(250,253,246,.94),rgba(226,240,210,.68));
}
.category-tile:hover .category-image-frame{
  transform:translateY(-4px) scale(1.035);
  border-color:rgba(255,255,255,.98);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 18px 36px rgba(12,43,91,.16),0 0 0 6px rgba(255,255,255,.3);
}
.category-tile:hover .category-image{
  transform:scale(1.035);
  filter:saturate(1.06) contrast(1.02);
}
.category-tile__copy{position:relative;z-index:2;order:2}
.category-tile h3{font-size:14px;font-weight:800}
.category-tile p{font-size:8px;line-height:1.8}
.category-arrow{z-index:3}
html[data-theme="dark"] .category-image-frame{
  border-color:rgba(198,220,240,.36);
  background:linear-gradient(145deg,rgba(38,62,86,.84),rgba(20,42,65,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 30px rgba(0,0,0,.3),0 0 0 5px rgba(120,160,190,.08);
}
html[data-theme="dark"] .category-image-frame::before{
  background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 42%,rgba(255,255,255,.04));
}
@media(max-width:900px){
  .category-tile{min-height:224px}
  .category-image-frame{width:116px;height:116px;flex-basis:116px;border-radius:25px;padding:6px}
  .category-image-frame::before{border-radius:23px}
  .category-image{border-radius:19px}
}
@media(max-width:560px){
  .category-tile{min-height:190px;padding:12px 8px;gap:7px}
  .category-image-frame{width:96px;height:96px;flex-basis:96px;border-radius:22px;padding:5px}
  .category-image-frame::before{border-radius:20px}
  .category-image{border-radius:16px}
  .category-tile h3{font-size:12px}
  .category-tile p{font-size:7px;line-height:1.65}
}
@media(max-width:360px){
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .category-tile{min-height:182px}
  .category-image-frame{width:88px;height:88px;flex-basis:88px}
}
@media(prefers-reduced-motion:reduce){
  .category-image-frame,.category-image,.category-tile{transition:none!important}
}


/* VERSION 10 — additional category variants */
.category-tile--horse .category-image-frame{background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.98),transparent 42%),linear-gradient(145deg,rgba(255,248,240,.94),rgba(244,228,205,.7));}
.category-tile--pet .category-image-frame{background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.98),transparent 42%),linear-gradient(145deg,rgba(250,248,255,.94),rgba(229,224,246,.7));}
.category-tile--bee .category-image-frame{background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.98),transparent 42%),linear-gradient(145deg,rgba(255,251,238,.95),rgba(248,229,172,.72));}
.category-tile--enzyme .category-image-frame{background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.98),transparent 42%),linear-gradient(145deg,rgba(244,250,255,.94),rgba(215,232,247,.72));}
.category-tile--potasil .category-image-frame{background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.98),transparent 42%),linear-gradient(145deg,rgba(255,250,240,.95),rgba(239,223,175,.72));}
@media(min-width:901px){.category-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}