/* ============================================================
   Lucky House — faithful recreation of the real Vitrynx/Orynx
   V2 public site (theme: Sunset · brand gold #fbbf24).
   Scoped under .lh-root so it can't leak into the landing page.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bellefair&family=Sacramento&display=swap');

.mini-site.lh-host{ background:#241a14; }

.lh-root{
  --b:#fbbf24;            /* brand gold */
  --b-text:#831843;       /* wine (text on gold) */
  --tx:#ffffff;
  --tx2:rgba(253,186,116,0.95);
  --surface:rgba(66,61,47,0.8);
  --bord:rgba(251,191,36,0.3);
  --rad:16px;
  --f-disp:'Bellefair', Georgia, serif;
  --f-body:'Heebo', system-ui, sans-serif;
  position:relative; width:100%; min-height:100%;
  display:flex; flex-direction:column;
  color:var(--tx); font-family:var(--f-body); direction:rtl;
  background:
    radial-gradient(120% 70% at 50% 0%, #6b3b5e 0%, transparent 55%),
    radial-gradient(140% 80% at 50% 100%, #e08a3c 0%, rgba(224,138,60,0) 55%),
    linear-gradient(180deg, #2a2030 0%, #3a2a2c 42%, #5a3a2a 74%, #7c4a26 100%);
}
.lh-root *{ box-sizing:border-box; }

/* warm glass overlay sheen */
.lh-root::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(100% 40% at 50% 8%, rgba(255,220,150,0.12), transparent 60%);
}

/* ---------- HERO ---------- */
.lh-hero{ position:relative; z-index:1; padding:34px 18px 22px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px; }
.lh-logo{ width:78px; height:78px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,0.5); box-shadow:0 10px 30px rgba(0,0,0,0.45); background:#1d1510; }
.lh-name{ font-family:var(--f-disp); font-size:31px; font-weight:400; letter-spacing:0.02em; line-height:1; margin-top:3px; white-space:nowrap; }
.lh-sub{ font-size:12.5px; color:var(--tx2); font-weight:500; }
.lh-desc{ font-size:10.5px; line-height:1.65; color:rgba(255,255,255,0.74); max-width:96%; white-space:pre-line; }
.lh-cta{ margin-top:6px; display:inline-flex; align-items:center; gap:7px; background:var(--b); color:var(--b-text);
  font-family:var(--f-body); font-weight:800; font-size:12.5px; padding:9px 20px; border-radius:999px;
  box-shadow:0 10px 26px -8px rgba(251,191,36,0.6); }

/* ---------- MAP strip (compact) ---------- */
.lh-map{ position:relative; z-index:1; margin:6px 16px 0; }
.lh-map h3{ font-family:var(--f-disp); font-weight:400; font-size:16px; text-align:center; margin-bottom:9px; }
.lh-map-img{ position:relative; height:120px; border-radius:var(--rad); overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,0.35); }
.lh-map-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.lh-map-pin{ position:absolute; bottom:9px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:6px;
  background:var(--b); color:var(--b-text); font-size:10px; font-weight:800; padding:6px 12px; border-radius:999px; white-space:nowrap;
  box-shadow:0 8px 18px rgba(0,0,0,0.3); }

/* ---------- FEATURED bento ---------- */
.lh-feat{ position:relative; z-index:1; padding:22px 16px 8px; }
.lh-feat h2{ font-family:var(--f-disp); font-weight:400; font-size:19px; line-height:1.15; margin-bottom:12px; }
.lh-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:1fr; gap:7px; }
.lh-card{ position:relative; aspect-ratio:1/1; border-radius:var(--rad); overflow:hidden;
  background:var(--surface); border:1px solid var(--bord); box-shadow:0 8px 18px -6px rgba(0,0,0,0.4); }
.lh-card img{ width:100%; height:100%; object-fit:cover; display:block; }

/* big card: image top + info below */
.lh-big{ display:flex; flex-direction:column; }
.lh-big .lh-imgwrap{ flex:1; min-height:0; overflow:hidden; background:rgba(0,0,0,0.12); }
.lh-info{ padding:8px 9px 9px; display:flex; flex-direction:column; gap:3px; }
.lh-info .nm{ font-family:var(--f-disp); font-weight:400; font-size:13.5px; line-height:1.1; }
.lh-info .ds{ font-size:9px; line-height:1.3; color:rgba(255,255,255,0.6);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lh-info .pr{ align-self:flex-start; margin-top:1px; background:color-mix(in oklab, var(--b) 18%, transparent);
  color:var(--b); font-weight:800; font-size:11px; padding:3px 9px; border-radius:999px; }

/* small card: full image + bottom overlay */
.lh-small .lh-ov{ position:absolute; inset-inline:0; bottom:0; padding:8px 9px;
  background:linear-gradient(to top, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.66) 40%, transparent 100%);
  display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.lh-small .nm{ font-family:var(--f-disp); font-weight:400; font-size:11.5px; color:#fff; line-height:1.1;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lh-small .pr{ background:var(--b); color:var(--b-text); font-weight:800; font-size:10px; padding:2px 8px; border-radius:999px; }

/* ---------- CONTACT ---------- */
.lh-contact{ position:relative; z-index:1; padding:18px 16px 4px; display:flex; flex-direction:column; gap:8px; }
.lh-crow{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:13px;
  background:var(--surface); border:1px solid var(--bord); box-shadow:0 6px 14px -6px rgba(0,0,0,0.4); }
.lh-cic{ width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--b); color:var(--b-text); }
.lh-cic svg{ width:17px; height:17px; }
.lh-crow span{ font-size:12px; font-weight:600; }

/* ---------- FOOTER ---------- */
.lh-foot{ position:relative; z-index:1; margin-top:14px; padding:16px; text-align:center;
  background:rgba(0,0,0,0.28); }
.lh-foot .fn{ font-family:var(--f-disp); font-size:16px; }
.lh-foot .fs{ font-size:9.5px; color:rgba(255,255,255,0.55); margin-top:3px; }

/* side-menu + agent FABs (decorative, like the real site) */
.lh-fab{ position:absolute; z-index:3; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--b); color:var(--b-text); box-shadow:0 6px 16px rgba(0,0,0,0.35); }
.lh-fab.menu{ top:12px; inset-inline-start:12px; }
.lh-fab svg{ width:16px; height:16px; }
.lh-lang{ position:absolute; z-index:3; top:12px; inset-inline-end:12px; display:inline-flex; align-items:center; gap:5px;
  background:var(--surface); border:1px solid var(--bord); color:#fff; font-size:10px; font-weight:700; padding:5px 10px; border-radius:999px; }
.lh-lang svg{ width:11px; height:11px; }

/* ============================================================
   MENU PAGE (categories grid) — faithful to the V2 menu route.
   Scoped under .lhm-root.
   ============================================================ */
.lhm-root{
  --b:#fbbf24; --b-text:#831843; --tx:#fff; --tx2:rgba(253,186,116,0.95);
  --surface:rgba(66,61,47,0.92); --bord:rgba(251,191,36,0.3); --rad:16px;
  --f-disp:'Bellefair', Georgia, serif; --f-body:'Heebo', system-ui, sans-serif;
  position:absolute; inset:0; overflow:hidden;
  color:var(--tx); font-family:var(--f-body); direction:rtl;
  background:
    radial-gradient(120% 60% at 50% 100%, #e08a3c 0%, rgba(224,138,60,0) 55%),
    linear-gradient(180deg, #2a2030 0%, #3a2a2c 46%, #5a3a2a 78%, #7c4a26 100%);
}
.lhm-root *{ box-sizing:border-box; }

/* the scrolling content (translated by the JS driver) */
.lhm-scroll{ position:absolute; top:0; left:0; right:0; will-change:transform; }

/* persistent top buttons */
.lhm-search, .lhm-side{ position:absolute; z-index:6; top:14px; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; background:var(--b); color:var(--b-text); box-shadow:0 6px 16px rgba(0,0,0,0.45); }
.lhm-search{ inset-inline-end:14px; } .lhm-side{ inset-inline-start:14px; }
.lhm-search svg, .lhm-side svg{ width:19px; height:19px; }

/* collapsing compact bar — fades in as you scroll */
.lhm-compact{ position:absolute; top:0; left:0; right:0; height:56px; z-index:5; opacity:0; will-change:opacity,transform;
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--surface); border-bottom:1px solid var(--bord); -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  box-shadow:0 8px 24px rgba(0,0,0,0.4); }
.lhm-compact img{ width:36px; height:36px; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }
.lhm-compact span{ font-family:var(--f-disp); font-size:18px; line-height:1; white-space:nowrap; }

/* hero cover */
.lhm-cover{ position:relative; height:188px; overflow:hidden; }
.lhm-cover .cv{ position:absolute; inset:-30px 0 0 0; background-size:cover; background-position:center; will-change:transform;
  -webkit-mask-image:linear-gradient(#000 0, #000 62%, transparent 100%);
  mask-image:linear-gradient(#000 0, #000 62%, transparent 100%); }

/* identity card overlapping cover bottom */
.lhm-id{ position:relative; z-index:3; margin:-46px 16px 0; display:flex; align-items:center; gap:13px;
  background:var(--surface); border:1px solid var(--bord); border-radius:var(--rad);
  box-shadow:0 18px 50px rgba(0,0,0,0.5); padding:14px 16px; }
.lhm-id img{ width:58px; height:58px; object-fit:contain; flex:none; filter:drop-shadow(0 4px 12px rgba(0,0,0,0.4)); }
.lhm-id .nm{ font-family:var(--f-disp); font-size:24px; line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lhm-id .sb{ font-size:11px; color:var(--tx2); margin-top:3px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lhm-id > div{ min-width:0; }

/* categories grid */
.lhm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; padding:18px 16px 180px; }
.lhm-cat{ position:relative; aspect-ratio:1/1; border-radius:var(--rad); overflow:hidden;
  box-shadow:0 8px 18px -6px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.05); }
.lhm-cat img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lhm-cat .gr{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.42) 45%, rgba(0,0,0,0.74) 100%); }
.lhm-badge{ position:absolute; top:9px; inset-inline-end:9px; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; background:var(--surface); border:1px solid rgba(255,255,255,0.2);
  box-shadow:0 6px 14px rgba(0,0,0,0.4); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); z-index:2; }
.lhm-badge svg{ width:18px; height:18px; stroke:#fff; fill:none; }
.lhm-badge .emo{ font-size:17px; }
.lhm-cap{ position:absolute; inset-inline:0; bottom:0; z-index:2; padding:11px 9px 12px; text-align:center;
  display:flex; flex-direction:column; gap:3px; align-items:center; }
.lhm-cap h3{ font-size:14px; font-weight:800; color:#fff; line-height:1.1; text-shadow:0 2px 8px rgba(0,0,0,0.8);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lhm-cap p{ font-size:9.5px; color:rgba(255,255,255,0.9); line-height:1.25; text-shadow:0 1px 4px rgba(0,0,0,0.8);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* ---------- demo view toggle (under the phone) ---------- */
.demo-tabs{ display:inline-flex; gap:4px; padding:5px; border-radius:999px; margin-top:22px;
  background:rgba(255,255,255,0.05); border:1px solid var(--border); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 14px 34px -18px rgba(0,0,0,0.9); position:relative; z-index:4; }
.demo-tabs button{ font-family:var(--f-head); font-weight:700; font-size:13.5px; color:var(--tx-mid);
  background:none; border:none; cursor:pointer; padding:9px 22px; border-radius:999px;
  transition:color .2s, background .25s, box-shadow .25s; -webkit-tap-highlight-color:transparent; }
.demo-tabs button.on{ background:linear-gradient(180deg,#8B79FF,#5B4BD0); color:#fff;
  box-shadow:0 10px 24px -8px rgba(108,92,231,0.7); }
.demo-tabs button:not(.on):hover{ color:#fff; }

/* ============================================================
   CATEGORY DETAIL PAGE (drill-down) — scoped .lhc-root
   ============================================================ */
.lh-stack{ position:absolute; inset:0; }
.lhc-root{
  --b:#fbbf24; --b-text:#831843; --tx:#fff; --tx2:rgba(253,186,116,0.95);
  --surface:rgba(66,61,47,0.92); --bord:rgba(251,191,36,0.3); --rad:16px;
  --f-disp:'Bellefair', Georgia, serif; --f-body:'Heebo', system-ui, sans-serif;
  position:absolute; inset:0; overflow:hidden; opacity:0; pointer-events:none;
  transform:translateX(26px); color:var(--tx); font-family:var(--f-body); direction:rtl;
  background:
    radial-gradient(120% 60% at 50% 100%, #e08a3c 0%, rgba(224,138,60,0) 55%),
    linear-gradient(180deg, #2a2030 0%, #3a2a2c 46%, #5a3a2a 78%, #7c4a26 100%);
}
.lhc-root *{ box-sizing:border-box; }
.lhc-bar{ position:absolute; top:0; left:0; right:0; height:56px; z-index:5; display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--surface); border-bottom:1px solid var(--bord); -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%); box-shadow:0 8px 24px rgba(0,0,0,0.4); }
.lhc-bar img{ width:36px; height:36px; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }
.lhc-bar span{ font-family:var(--f-disp); font-size:18px; line-height:1; white-space:nowrap; }
.lhc-side, .lhc-search{ position:absolute; z-index:6; top:14px; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; background:var(--b); color:var(--b-text); box-shadow:0 6px 16px rgba(0,0,0,0.45); }
.lhc-search{ inset-inline-end:14px; } .lhc-side{ inset-inline-start:14px; }
.lhc-search svg, .lhc-side svg{ width:19px; height:19px; }
.lhc-scroll{ position:absolute; top:0; left:0; right:0; padding:66px 16px 40px; will-change:transform; }
.lhc-back{ display:inline-flex; align-items:center; gap:5px; background:none; border:none; cursor:pointer;
  color:var(--b); font-family:var(--f-body); font-weight:700; font-size:12.5px; padding:4px 0; margin-bottom:2px; }
.lhc-back svg{ width:15px; height:15px; }
.lhc-title{ font-family:var(--f-disp); font-size:25px; font-weight:400; margin:2px 0 13px; }
.lhc-list{ display:flex; flex-direction:column; gap:10px; }
.lhc-item{ display:flex; align-items:center; gap:11px; padding:9px;
  background:var(--surface); border:1px solid var(--bord); border-radius:14px; box-shadow:0 6px 16px -8px rgba(0,0,0,0.5); }
.lhc-item .th{ width:62px; height:62px; border-radius:11px; overflow:hidden; flex:none; background:rgba(0,0,0,0.2); }
.lhc-item .th img{ width:100%; height:100%; object-fit:cover; }
.lhc-item .info{ flex:1; min-width:0; }
.lhc-item .info b{ display:block; font-family:var(--f-disp); font-size:15px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lhc-item .info p{ font-size:10.5px; color:rgba(255,255,255,0.72); line-height:1.3; margin-top:3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lhc-item .pr{ flex:none; background:var(--b); color:var(--b-text); font-weight:800; font-size:12.5px; padding:7px 12px; border-radius:11px; }

/* pressed feedback on the tapped category card */
.lhm-cat.pressed{ transform:scale(0.93); transition:transform .18s ease; }
.lhc-item.pressed{ transform:scale(0.97); transition:transform .16s ease; }

/* ---------- product detail bottom-sheet (drawer) ---------- */
.lhs-overlay{ position:absolute; inset:0; z-index:18; background:rgba(0,0,0,0.45); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); opacity:0; pointer-events:none; }
.lhs-sheet{ position:absolute; left:0; right:0; bottom:0; z-index:19; max-height:82%; display:flex; flex-direction:column; overflow:hidden;
  background:rgba(52,47,36,0.97); -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%); border-top:1px solid var(--bord);
  border-radius:20px 20px 0 0; box-shadow:0 -16px 50px rgba(0,0,0,0.55); transform:translateY(100%); }
.lhs-grip{ width:90px; height:5px; border-radius:99px; background:rgba(255,255,255,0.28); margin:9px auto 2px; flex:none; }
.lhs-scroll{ overflow:hidden; }
.lhs-img{ position:relative; width:100%; aspect-ratio:4/3; }
.lhs-img img{ width:100%; height:100%; object-fit:cover; }
.lhs-img .grad{ position:absolute; left:0; right:0; bottom:0; height:60px; background:linear-gradient(transparent, rgba(52,47,36,0.97)); }
.lhs-tag{ position:absolute; top:11px; inset-inline-end:11px; display:inline-flex; align-items:center; gap:5px;
  background:#f59e0b; color:#fff; font-weight:700; font-size:11px; padding:5px 11px; border-radius:999px; box-shadow:0 6px 14px rgba(0,0,0,0.3); }
.lhs-tag svg{ width:13px; height:13px; }
.lhs-body{ padding:6px 17px 18px; }
.lhs-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.lhs-title{ font-size:18px; font-weight:800; color:#fff; line-height:1.15; }
.lhs-desc{ font-size:11.5px; color:var(--tx2); line-height:1.5; margin-top:6px; white-space:pre-line; }
.lhs-price{ flex:none; font-size:21px; font-weight:800; color:var(--b); white-space:nowrap; padding-top:2px; }
.lhs-wa{ margin-top:15px; display:inline-flex; align-items:center; gap:8px; background:#25D366; color:#fff;
  font-family:var(--f-body); font-weight:700; font-size:13px; padding:11px 16px; border-radius:13px; }
.lhs-wa svg{ width:16px; height:16px; }
.lhs-foot{ flex:none; padding:13px 17px 16px; }
.lhs-close{ width:100%; background:var(--b); color:var(--b-text); border:none; border-radius:15px;
  font-family:var(--f-body); font-weight:700; font-size:14px; padding:13px; cursor:pointer; }