/* TV Café v9 — self-contained layered luxury glass cards.
   Image -> clip -> photo -> darkening -> reusable transparent glass SVG -> real HTML text.
   The reflection lives OUTSIDE the clipped face and does not contain photo pixels.
   Swap only the img source when real product photography arrives. */

.category-section {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  align-items:start !important;
  gap:18px !important;
  margin-top:5px !important;
  margin-bottom:40px !important;
  position:relative;
  z-index:4;
}
.category-card,.category-card:hover,.category-card:focus-visible {
  display:block !important;
  position:relative !important;
  isolation:isolate !important;
  overflow:visible !important;
  min-width:0 !important;
  height:190px !important;
  border:0 !important;
  border-radius:20px !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  aspect-ratio:auto !important;
  text-decoration:none;
  transform:none;
  transition:transform .22s ease,filter .22s ease;
}
.category-card:hover,.category-card:focus-visible { transform:translateY(-3px) !important; }
.category-card::before,.category-card::after { content:none !important;display:none !important; }
/* Legacy CSS from earlier revisions hid children. This is our new isolated face. */
.category-card > .category-face,.category-card > .category-reflection {display:block !important;}
.category-face {
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  overflow:hidden;
  border-radius:20px;
  isolation:isolate;
  background:#100e0b;
  border:1px solid rgba(233,178,94,.77);
  box-shadow:inset 0 1px 0 rgba(255,244,209,.30),inset 0 -2px 5px rgba(243,168,65,.26),0 3px 12px rgba(0,0,0,.7);
  -webkit-mask-image:-webkit-radial-gradient(white,black); /* prevents transformed child bleed in Chrome */
  contain:paint; /* no photo pixels or glow escapes rounded edge during hover */
  clip-path:inset(0 round 20px); /* firm GPU clip for high-DPI / hover scaling */
}
.category-photo {
  position:absolute;
  inset:0;
  display:block;
  width:100%; height:100%;
  object-fit:cover;object-position:center 45%;
  border:0;
  z-index:0;
  transform:scale(1);
  transform-origin:center;
  backface-visibility:hidden;
  transition:transform .32s cubic-bezier(.2,.7,.25,1),filter .3s ease;
  filter:brightness(.93) saturate(1.05);
  user-select:none;
  pointer-events:none;
}
.category-card:hover .category-photo,.category-card:focus-visible .category-photo {
  transform:scale(1.026);
  filter:brightness(1.02) saturate(1.07);
}
.category-darken {
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(5,3,2,.88) 0%,rgba(6,4,3,.40) 31%,transparent 72%),
             linear-gradient(90deg,rgba(0,0,0,.13),transparent 36%);
}
.category-glass {
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:url('../assets/luxury-glass-wide.svg') center/100% 100% no-repeat;
  opacity:1;
  transition:opacity .25s ease;
}
.category-card:hover .category-glass,.category-card:focus-visible .category-glass {opacity:1;}
.category-caption {
  position:absolute;z-index:3;bottom:17px;left:17px;
  display:flex;align-items:center;gap:10px;
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;line-height:1;
  color:#fff6e9;
  font-size:clamp(20px,1.85vw,27px);
  text-shadow:0 3px 5px rgba(0,0,0,.93),0 0 12px rgba(0,0,0,.65);
}
.category-caption .icon {width:30px;height:30px;color:#f7cc7e;flex:none;stroke-width:1.45;filter:drop-shadow(0 1px 3px #000b);}
.category-next {position:absolute;z-index:3;right:13px;bottom:18px;width:25px;height:25px;color:#f9cc78;stroke-width:2;filter:drop-shadow(0 2px 3px #000);}
.category-reflection {
  position:absolute;z-index:1;pointer-events:none;
  left:-1%;width:102%;top:calc(100% - 5px);height:58px;
  background:url('../assets/luxury-gold-underlight.png') center top/100% 100% no-repeat;
  opacity:.95;
  filter:none;
  transition:opacity .3s ease;
}
.category-card:hover .category-reflection {opacity:1;}

@media (min-width:1081px) and (max-width:1330px){
  .category-card,.category-card:hover,.category-card:focus-visible {height:165px !important;}
  .category-caption{font-size:21px;left:13px;bottom:13px;gap:7px;}
  .category-caption .icon{width:25px;height:25px;}
}
@media (min-width:761px) and (max-width:1080px){
  .category-section{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:34px 20px !important; margin-bottom:35px !important;}
  .category-card,.category-card:hover,.category-card:focus-visible {height:200px !important;}
  .category-caption{font-size:28px;}
}
@media (max-width:760px){
  .category-section{grid-template-columns:1fr !important;gap:23px !important;margin-top:5px !important;margin-bottom:23px !important;}
  .category-card,.category-card:hover,.category-card:focus-visible {height:136px !important;border-radius:16px !important;}
  .category-face{border-radius:16px;clip-path:inset(0 round 16px);}
  .category-glass{background-image:url('../assets/luxury-glass-mobile.svg');}
  .category-caption{font-size:26px;left:21px;bottom:14px;gap:12px;}
  .category-caption .icon{width:30px;height:30px;}
  .category-next{right:16px;bottom:17px;}
  .category-reflection{top:calc(100% - 4px);height:39px;}
}
@media (max-width:360px){
  .category-card,.category-card:hover,.category-card:focus-visible {height:122px !important;}
  .category-caption{font-size:23px;left:16px;bottom:12px;}
}
@media (prefers-reduced-motion:reduce){
 .category-card:hover,.category-card:focus-visible {transform:none !important;}
 .category-photo{transition:none;}
 .category-card:hover .category-photo,.category-card:focus-visible .category-photo {transform:none;}
}

/* Small menu thumbnails also use one restrained, consistent underlight. */
.menu-item-thumb::after{background:url('../assets/luxury-gold-underlight.png') center/100% 100% no-repeat !important;opacity:.60 !important;}