/* ═══════════════════════════════════════════════════════════════
   LUX — depth, glass and glow for FRYBIRD
   Same palette as before: red, cream, near-black. Nothing new added.
   This layer only changes surface, depth and light.
   ═══════════════════════════════════════════════════════════════ */

.style-lux{
  --panel:rgba(255,255,255,.62);
  --panel-2:rgba(255,255,255,.86);
  --stroke:rgba(11,10,9,.10);
  --stroke-2:rgba(11,10,9,.16);
  --shadow-sm:0 2px 10px rgba(11,10,9,.05);
  --shadow:0 18px 44px -22px rgba(11,10,9,.42);
  --shadow-lg:0 30px 70px -32px rgba(11,10,9,.5);
  --radius:20px;
  position:relative;
}

/* Warm light in the corners, brand red only, very low opacity. */
.style-lux::before{
  content:"";
  position:fixed;inset:-20vh -10vw;z-index:0;pointer-events:none;
  background:
    radial-gradient(40vw 40vw at 8% 4%,   color-mix(in srgb, var(--red) 22%, transparent), transparent 60%),
    radial-gradient(34vw 34vw at 94% 30%, color-mix(in srgb, var(--red) 14%, transparent), transparent 62%),
    radial-gradient(44vw 44vw at 50% 98%, color-mix(in srgb, var(--red) 12%, transparent), transparent 66%);
  filter:blur(30px);
  opacity:.5;
}

.style-lux .site-content,
.style-lux .nav,
.style-lux .ticker,
.style-lux .menubar,
.style-lux .loc,
.style-lux .footer,
.style-lux .mobile-bar{position:relative;z-index:1}

/* ── glass sticky bars, still cream ── */
.style-lux .nav{
  background:color-mix(in srgb, var(--cream) 78%, transparent);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid var(--stroke-2);
  box-shadow:var(--shadow-sm);
}
.style-lux .menubar{
  background:color-mix(in srgb, var(--cream) 82%, transparent);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--stroke);
}

/* ── buttons: lit red, rounded ── */
.style-lux .btn{
  border-radius:999px;
  border:1px solid transparent;
  background:linear-gradient(135deg, var(--red), color-mix(in srgb, var(--red) 78%, #000));
  color:#fff;
  box-shadow:0 12px 30px -14px var(--red), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .18s ease, box-shadow .25s ease;
}
.style-lux .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 42px -14px var(--red), inset 0 1px 0 rgba(255,255,255,.42);
}
.style-lux .btn-ghost{
  background:transparent;border:1px solid currentColor;box-shadow:none;
}
.style-lux .add-btn{
  border-radius:999px;border:1px solid var(--stroke-2);
  background:var(--panel);
  transition:background .2s ease,border-color .2s ease,transform .18s ease,box-shadow .25s ease;
}
.style-lux .add-btn:hover{
  background:var(--red);border-color:var(--red);color:#fff;
  transform:translateY(-1px);box-shadow:0 12px 26px -12px var(--red);
}

/* ── hero: same ink panel, deeper light ── */
.style-lux .hero h1 .r{
  filter:drop-shadow(0 8px 34px color-mix(in srgb, var(--red) 55%, transparent));
}
.style-lux .hero-shot{position:relative}
.style-lux .hero-shot::before{
  content:"";position:absolute;left:50%;top:50%;
  width:76%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle, color-mix(in srgb, var(--red) 65%, transparent), transparent 68%);
  filter:blur(50px);z-index:0;
}
.style-lux .hero-shot img,
.style-lux .hero-photo{position:relative;z-index:1;filter:drop-shadow(0 26px 40px rgba(0,0,0,.55))}

/* ── surfaces ── */
.style-lux .tiles{background:transparent;gap:16px}
.style-lux .tile{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:24px;
  transition:transform .25s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.style-lux .tile:hover{
  transform:translateY(-5px);
  background:var(--red);
  border-color:var(--red);
  box-shadow:0 28px 60px -28px var(--red);
}
.style-lux .tile img{filter:drop-shadow(0 14px 22px rgba(11,10,9,.22))}

.style-lux .pick{
  border:1px solid var(--stroke-2);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:var(--shadow-sm);
  padding:22px;
  transition:transform .25s ease, box-shadow .3s ease;
}
.style-lux .pick:hover{transform:translateY(-4px);box-shadow:var(--shadow)}

/* ── menu cards: glow behind the food ── */
.style-lux .card{transition:transform .25s ease}
.style-lux .card:hover{transform:translateY(-4px)}
.style-lux .card .shot{
  border-radius:var(--radius);
  background:var(--panel-2);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;min-height:190px;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.style-lux .card:hover .shot{
  border-color:color-mix(in srgb, var(--red) 45%, transparent);
  box-shadow:0 26px 56px -30px var(--red);
}
.style-lux .card .shot::after{
  content:"";position:absolute;left:50%;bottom:-32%;
  width:72%;aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(circle, color-mix(in srgb, var(--red) 30%, transparent), transparent 70%);
  filter:blur(30px);opacity:.75;
}
.style-lux .card .shot img{position:relative;z-index:1;filter:drop-shadow(0 14px 20px rgba(11,10,9,.25))}

.style-lux .mx,
.style-lux .boxcard{
  border-radius:var(--radius);
  border:1px solid var(--stroke-2);
  background:var(--panel);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform .25s ease, box-shadow .3s ease;
}
.style-lux .mx:hover,
.style-lux .boxcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.style-lux .mx .shot,
.style-lux .boxcard .shot{background:transparent}
.style-lux .mx h3{border-radius:0}
.style-lux .boxcard{border-color:color-mix(in srgb, var(--red) 35%, transparent)}

.style-lux .sauce{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;padding:18px 12px;
}
.style-lux .sauce img{filter:drop-shadow(0 10px 16px rgba(0,0,0,.4))}

/* ── grids and bands ── */
.style-lux .grid3{border:0;gap:16px}
.style-lux .grid3 > div{
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius);
  background:rgba(255,255,255,.07);
  padding:26px;
}
.style-lux .why{box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}

/* ── search and controls ── */
.style-lux .fb-search input,
.style-lux .fb-sort select,
.style-lux .vegtoggle{border-radius:999px}
.style-lux .fb-search input{background:var(--panel-2)}

/* ── basket ── */
.style-lux .fb-basket-inner{border-radius:24px 24px 0 0;box-shadow:var(--shadow-lg)}
.style-lux .fb-basket-row button{border-radius:50%}
.style-lux .fb-mode:first-child{border-radius:999px 0 0 999px}
.style-lux .fb-mode:last-child{border-radius:0 999px 999px 0}
.style-lux .fb-fields input,
.style-lux .fb-fields textarea{border-radius:12px}
.style-lux .fb-basket-tab{border-radius:999px;box-shadow:0 14px 36px -14px var(--veg)}
.style-lux .mobile-bar{
  background:color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}

.style-lux .gshot{border-radius:18px;border:1px solid var(--stroke);background:var(--panel)}

/* Fallback: no backdrop-filter, use solid panels. */
@supports not (backdrop-filter: blur(2px)){
  .style-lux .nav,
  .style-lux .menubar{background:var(--cream)}
  .style-lux .tile,
  .style-lux .pick,
  .style-lux .mx,
  .style-lux .boxcard{background:rgba(255,255,255,.9)}
}

/* Phones: blur is the expensive part, so cut it right down. */
@media(max-width:820px){
  .style-lux::before{filter:blur(24px);opacity:.4}
  .style-lux .tile,
  .style-lux .mx,
  .style-lux .boxcard{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.72)}
}

@media (prefers-reduced-motion:reduce){
  .style-lux .tile,
  .style-lux .pick,
  .style-lux .card,
  .style-lux .mx,
  .style-lux .boxcard,
  .style-lux .btn{transition:none}
  .style-lux .tile:hover,
  .style-lux .pick:hover,
  .style-lux .card:hover,
  .style-lux .mx:hover,
  .style-lux .boxcard:hover,
  .style-lux .btn:hover{transform:none}
}