/* 01-luckybear-catalog — mobile-first catalogue stylesheet. Prefix: .lbx-
   Palette: light parchment + amber. System fonts only, no web fonts. */
:root{
  --lbx-ink:#e8f0f5;
  --lbx-ink-2:#b8d4e0;
  --lbx-hint:#8aa8b8;
  --lbx-bg:#0d1821;
  --lbx-bg-2:#162838;
  --lbx-bg-3:#1e3545;
  --lbx-line:#2a4a5e;
  --lbx-line-2:#3d5f75;
  --lbx-amber:#4a9d8e;
  --lbx-amber-2:#5cb8a7;
  --lbx-amber-soft:#2d6a5e;
  --lbx-deep:#09111a;
  --lbx-ok:#2f7a4f;
  --lbx-radius:14px;
  --lbx-radius-2:10px;
  --lbx-wrap:1160px;
  --lbx-shadow:0 2px 0 var(--lbx-line);
  --lbx-th-egypt:#d9a441; --lbx-th-greek:#6b8ba4; --lbx-th-norse:#5a7a8a;
  --lbx-th-asia:#c4553f; --lbx-th-aztec:#a8813c; --lbx-th-adventure:#527a58;
  --lbx-th-fruit:#d4483c; --lbx-th-sweets:#d97ba8; --lbx-th-animals:#8a6a3a;
  --lbx-th-ocean:#2d6a82; --lbx-th-space:#3a4586; --lbx-th-horror:#6b4a5e;
  --lbx-th-holidays:#c04b4b; --lbx-th-music:#7a5a9a; --lbx-th-sport:#2e6a5a;
  --lbx-th-crime:#4a5268; --lbx-th-retro:#b07a3a; --lbx-th-magic:#5a4a8a;
  --lbx-th-military:#4a5a3a; --lbx-th-party:#b8567a;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;background:var(--lbx-bg);color:var(--lbx-ink);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  overflow-x:hidden;
}
body{
  margin:0;background:var(--lbx-bg);color:var(--lbx-ink);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
/* Long unbreakable strings (URLs, provider names, e-mail, slugs) must wrap on
   narrow phones instead of pushing the layout wider than the viewport. */
h1,h2,h3,h4,p,li,dd,dt,summary,b,span,em,i,a{overflow-wrap:break-word;word-wrap:break-word}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.2;letter-spacing:-.01em}
h1{font-size:clamp(1.6rem,4.4vw,2.5rem);font-weight:800}
h2{font-size:clamp(1.2rem,2.6vw,1.6rem);font-weight:750}
h3{font-size:1.06rem;font-weight:700}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.25em}
li{margin:0 0 .4em}
.lbx-wrap{width:100%;max-width:var(--lbx-wrap);margin:0 auto;padding:0 14px;min-width:0}
.lbx-skip{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lbx-skip:focus{left:8px;top:8px;z-index:99;background:var(--lbx-bg-3);color:var(--lbx-ink);padding:10px 14px;border-radius:8px}
.lbx-ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* topbar + header */
.lbx-topbar{background:var(--lbx-deep);color:#f3e2c6;font-size:.8rem}
.lbx-topbar-in{display:flex;gap:4px 10px;justify-content:space-between;align-items:center;min-height:34px;flex-wrap:wrap}
.lbx-topbar b{color:var(--lbx-amber-2)}
.lbx-head{background:var(--lbx-bg-2);border-bottom:1px solid var(--lbx-line);position:sticky;top:0;z-index:20}
.lbx-head-in{display:flex;align-items:center;gap:8px;min-height:56px;flex-wrap:nowrap}
.lbx-brand{display:flex;align-items:center;flex:0 0 auto;min-width:0;max-width:100%;margin-right:auto;padding:6px 0}
/* The source logo is 640x213. On a 320px screen it must stay well inside the
   viewport even with the two header buttons beside it, so it is capped both by
   viewport share (38vw) and by an absolute ceiling per breakpoint. */
.lbx-logo{display:block;width:clamp(112px,38vw,190px);max-width:100%;height:auto;object-fit:contain}

/* Burger toggle — hidden from 900px up where the inline nav takes over. */
.lbx-burger{display:inline-flex;align-items:center;justify-content:center;gap:0;
  width:44px;height:44px;padding:0;flex:0 0 auto;background:var(--lbx-bg-3);color:var(--lbx-ink);
  border:1px solid var(--lbx-line-2);border-radius:10px;cursor:pointer;font:inherit}
.lbx-burger:hover{background:var(--lbx-line)}
.lbx-burger .lbx-burger-x{display:none}
.lbx-burger[aria-expanded=true] .lbx-burger-o{display:none}
.lbx-burger[aria-expanded=true] .lbx-burger-x{display:inline-flex}

.lbx-nav{display:none;gap:2px;flex-wrap:wrap}
.lbx-nav a{padding:7px 9px;border-radius:8px;font-size:.86rem;font-weight:600;color:var(--lbx-ink-2)}
.lbx-nav a:hover{background:var(--lbx-bg-3)}
.lbx-nav a[aria-current=page]{background:var(--lbx-amber);color:#fff}
.lbx-head-btns{display:flex;gap:8px;align-items:center;flex:0 0 auto;min-width:0}
.lbx-btn-tg{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;
  padding:6px 12px;background:var(--lbx-bg-3);color:var(--lbx-ink);border-radius:22px;font-size:.8rem;
  font-weight:600;border:1px solid var(--lbx-line-2);transition:all .18s ease;flex:0 0 auto}
.lbx-btn-tg:hover{background:var(--lbx-line);transform:translateY(-1px)}
.lbx-btn-tg svg{flex:0 0 auto;width:20px;height:20px}
.lbx-btn-tg span{display:none}
.lbx-btn-reg{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;
  background:var(--lbx-amber);color:#fff;border-radius:22px;font-size:.82rem;font-weight:700;
  box-shadow:var(--lbx-shadow);transition:all .18s ease;white-space:nowrap;flex:0 0 auto}
.lbx-btn-reg:hover{background:var(--lbx-amber-2);transform:translateY(-1px)}

/* --- Burger panel: below 900px the nav collapses into a full-width, scrollable
   drawer. It is a normal flow element inside the sticky header (not a fixed
   overlay), so nothing is ever covered. ------------------------------------- */
@media(max-width:899px){
  .lbx-nav{display:none;order:10;width:100%;flex-basis:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;
    max-height:min(60vh,340px);overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;padding:10px 0 12px;border-top:1px solid var(--lbx-line)}
  .lbx-head-in{flex-wrap:wrap}
  .lbx-nav.lbx-open{display:grid}
  .lbx-nav a{padding:12px 10px;font-size:.9rem;min-height:46px;
    display:flex;align-items:center;justify-content:center;text-align:center;
    background:var(--lbx-bg-3);border:1px solid var(--lbx-line)}
  .lbx-nav a[aria-current=page]{background:var(--lbx-amber);border-color:var(--lbx-amber)}
}
@media(min-width:900px){.lbx-nav{display:flex}.lbx-burger{display:none}.lbx-btn-tg span{display:inline}}
@media(min-width:1150px){.lbx-nav a{font-size:.9rem;padding:8px 11px}}

/* Below 380px there is no room for two 44px controls plus a logo: drop the
   Регистрация label to a compact pill and shrink the logo further. */
@media(max-width:379px){
  .lbx-logo{width:clamp(96px,32vw,124px)}
  .lbx-btn-reg{padding:8px 10px;font-size:.76rem;min-height:44px}
  .lbx-head-btns{gap:6px}
  .lbx-head-in{gap:6px}
}

/* crumbs */
.lbx-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:.78rem;color:var(--lbx-hint);padding:12px 0 0;max-width:100%}
.lbx-crumbs a{color:var(--lbx-ink-2);text-decoration:underline;text-decoration-color:var(--lbx-line-2)}
.lbx-crumbs i{font-style:normal;color:var(--lbx-line-2)}
.lbx-crumbs span[aria-current]{color:var(--lbx-ink);font-weight:600}

/* hero */
.lbx-hero{background:linear-gradient(180deg,var(--lbx-bg-2),var(--lbx-bg));border-bottom:1px solid var(--lbx-line)}
.lbx-hero-in{display:grid;gap:16px;padding:18px 14px 30px;max-width:100%}
.lbx-eyebrow{display:inline-block;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--lbx-amber);margin-bottom:10px}
.lbx-lede{font-size:1.02rem;color:var(--lbx-ink-2);max-width:62ch}
.lbx-hero-a{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.lbx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--lbx-amber);color:#fff;font-weight:750;padding:12px 18px;min-height:46px;border-radius:11px;font-size:.94rem;text-align:center}
.lbx-btn:hover{background:var(--lbx-amber-2)}
.lbx-btn-2{background:transparent;color:var(--lbx-deep);border:1.5px solid var(--lbx-line-2)}
.lbx-btn-2:hover{background:var(--lbx-bg-3)}
.lbx-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:6px}
.lbx-kpis>div{background:var(--lbx-bg-2);border:1px solid var(--lbx-line);border-radius:var(--lbx-radius-2);padding:10px 12px;min-width:0}
.lbx-kpis b{display:block;font-size:1.3rem;color:var(--lbx-deep)}
.lbx-kpis span{font-size:.8rem;color:var(--lbx-hint)}
.lbx-hero-art{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lbx-hero-tile{display:flex;align-items:center;justify-content:center;min-height:86px;border-radius:var(--lbx-radius);color:#fff8ea;background:var(--lbx-th-egypt)}
.lbx-hero-tile .lbx-ic{width:32px;height:32px;stroke-width:1.4}
@media(min-width:620px){.lbx-kpis{grid-template-columns:repeat(4,1fr)}}
@media(min-width:900px){.lbx-hero-in{grid-template-columns:1.5fr 1fr;align-items:center}}
/* On the narrowest phones the secondary hero CTA becomes full width so the two
   buttons never sit side by side in a squeezed half-width column. */
@media(max-width:379px){
  .lbx-hero-a{flex-direction:column;align-items:stretch}
  .lbx-btn{width:100%}
  .lbx-hero-art{gap:8px}
  .lbx-hero-tile{min-height:68px}
}

/* sections */
.lbx-sec{padding:26px 0}
.lbx-sec-alt{background:var(--lbx-bg-2);border-top:1px solid var(--lbx-line);border-bottom:1px solid var(--lbx-line)}
.lbx-sec-flat{padding-top:6px}
.lbx-sec-h{margin-bottom:16px}
.lbx-sec-h p{color:var(--lbx-hint);font-size:.88rem;margin:4px 0 0;max-width:70ch}
.lbx-more{display:inline-block;margin-top:8px;font-weight:700;color:var(--lbx-amber);font-size:.88rem}
.lbx-more:hover{text-decoration:underline}
@media(min-width:760px){.lbx-sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}.lbx-more{margin:0}}

/* page head */
.lbx-phead{padding:6px 0 22px}
.lbx-phead-sm{padding-bottom:16px}

/* hub tiles */
.lbx-hubs{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.lbx-hub{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:2px 12px;align-items:center;
  background:var(--lbx-bg-2);border:1px solid var(--lbx-line);border-radius:var(--lbx-radius);padding:13px;color:var(--lbx-ink);min-height:56px}
.lbx-hub .lbx-ic{grid-row:1/3;width:26px;height:26px;color:var(--lbx-amber)}
.lbx-hub b{font-size:.98rem}
.lbx-hub span{font-size:.8rem;color:var(--lbx-hint)}
.lbx-hub:hover{border-color:var(--lbx-amber);background:var(--lbx-amber-soft)}
@media(min-width:620px){.lbx-hubs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.lbx-hubs{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* card grid — one column on every phone width up to 539px */
.lbx-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media(min-width:540px){.lbx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:840px){.lbx-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1080px){.lbx-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* .lbx-grid-4 is the dense entity grid. It used to be hard-coded to two columns
   at every width below 1000px, which squeezed titles and tags on phones; now it
   is a single column until there is genuinely room for two. */
.lbx-grid-4{grid-template-columns:minmax(0,1fr)}
@media(min-width:520px){.lbx-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.lbx-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* dense catalogue card */
.lbx-card{background:var(--lbx-bg-2);border:1px solid var(--lbx-line);border-radius:var(--lbx-radius);overflow:hidden;
  content-visibility:auto;contain-intrinsic-size:280px;transition:all .2s ease;min-width:0}
.lbx-card-l{display:flex;flex-direction:column;height:100%;min-width:0}
.lbx-card:hover{border-color:var(--lbx-amber);box-shadow:0 8px 22px rgba(74,42,18,.12);transform:translateY(-2px)}
.lbx-card-media{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;
  width:100%;min-width:0;background:var(--lbx-th-egypt);color:#fff8ea}
.lbx-card-media .lbx-ic{width:34px;height:34px;stroke-width:1.3}
.lbx-card-badge{position:absolute;right:7px;top:7px;z-index:2;background:rgba(36,26,16,.72);color:#fff6e2;font-size:.68rem;
  font-weight:700;padding:3px 6px;border-radius:6px;letter-spacing:.02em;max-width:calc(100% - 14px);
  overflow-wrap:break-word}
.lbx-th-egypt{background:var(--lbx-th-egypt)} .lbx-th-greek{background:var(--lbx-th-greek)}
.lbx-th-norse{background:var(--lbx-th-norse)} .lbx-th-asia{background:var(--lbx-th-asia)}
.lbx-th-aztec{background:var(--lbx-th-aztec)} .lbx-th-adventure{background:var(--lbx-th-adventure)}
.lbx-th-fruit{background:var(--lbx-th-fruit)} .lbx-th-sweets{background:var(--lbx-th-sweets)}
.lbx-th-animals{background:var(--lbx-th-animals)} .lbx-th-ocean{background:var(--lbx-th-ocean)}
.lbx-th-space{background:var(--lbx-th-space)} .lbx-th-horror{background:var(--lbx-th-horror)}
.lbx-th-holidays{background:var(--lbx-th-holidays)} .lbx-th-music{background:var(--lbx-th-music)}
.lbx-th-sport{background:var(--lbx-th-sport)} .lbx-th-crime{background:var(--lbx-th-crime)}
.lbx-th-retro{background:var(--lbx-th-retro)} .lbx-th-magic{background:var(--lbx-th-magic)}
.lbx-th-military{background:var(--lbx-th-military)} .lbx-th-party{background:var(--lbx-th-party)}
.lbx-th-slot,.lbx-th-provider,.lbx-th-mechanic,.lbx-th-theme,.lbx-th-bonus,.lbx-th-payment,
.lbx-th-guide,.lbx-th-security,.lbx-th-jackpot,.lbx-th-tournament,.lbx-th-mobile,
.lbx-th-category,.lbx-th-feature,.lbx-th-faq{background:linear-gradient(135deg,#f3e3c6,#e3cda3);color:var(--lbx-amber)}
.lbx-card-b{padding:10px 11px 12px;display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.lbx-card-t{font-size:.94rem;font-weight:750;line-height:1.25}
.lbx-card-p{font-size:.8rem;color:var(--lbx-hint)}
.lbx-card-m{display:flex;flex-wrap:wrap;gap:4px}
.lbx-card-m i{font-style:normal;font-size:.72rem;background:var(--lbx-bg-3);color:var(--lbx-ink-2);
  padding:2px 6px;border-radius:5px}
.lbx-card-tags{display:flex;flex-wrap:wrap;gap:4px}
.lbx-card-tags em{font-style:normal;font-size:.7rem;color:var(--lbx-amber);border:1px solid var(--lbx-amber-soft);
  background:var(--lbx-bg-2);padding:1px 5px;border-radius:5px}
.lbx-card-go{margin-top:auto;font-size:.8rem;font-weight:700;color:var(--lbx-amber);min-height:44px;display:flex;align-items:center}

/* toolbar */
.lbx-toolbar{display:flex;flex-direction:column;gap:10px;background:var(--lbx-bg-2);border:1px solid var(--lbx-line);
  border-radius:var(--lbx-radius);padding:12px;min-width:0}
.lbx-search{display:flex;align-items:center;gap:8px;background:var(--lbx-bg-2);border:1px solid var(--lbx-line-2);
  border-radius:var(--lbx-radius-2);padding:0 10px;height:46px;color:var(--lbx-hint);width:100%;min-width:0}
.lbx-search input{border:0;outline:0;background:transparent;font:inherit;font-size:1rem;width:100%;min-width:0;color:var(--lbx-ink)}
.lbx-filters{display:flex;flex-wrap:wrap;gap:6px}
.lbx-filters button{font:inherit;font-size:.82rem;font-weight:650;background:var(--lbx-bg-2);border:1px solid var(--lbx-line-2);
  color:var(--lbx-ink-2);padding:10px 12px;min-height:44px;border-radius:8px;cursor:pointer}
.lbx-filters button[aria-pressed=true]{background:var(--lbx-amber);border-color:var(--lbx-amber);color:#fff}
.lbx-count{font-size:.8rem;color:var(--lbx-hint)}
@media(min-width:760px){.lbx-toolbar{flex-direction:row;align-items:center}.lbx-search{width:290px}.lbx-count{margin-left:auto}}

.lbx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.lbx-chips a{font-size:.82rem;font-weight:600;background:var(--lbx-bg-2);border:1px solid var(--lbx-line);
  padding:10px 12px;min-height:44px;display:inline-flex;align-items:center;border-radius:8px;color:var(--lbx-ink-2)}
.lbx-chips a:hover{border-color:var(--lbx-amber);color:var(--lbx-amber)}
.lbx-empty{text-align:center;color:var(--lbx-hint);padding:26px 0}

/* split content */
.lbx-split{display:grid;gap:20px;min-width:0}
@media(min-width:900px){.lbx-split{grid-template-columns:1.6fr 1fr;align-items:start}}
.lbx-body h2{margin-top:1.1em}
.lbx-body h2:first-child{margin-top:0}
.lbx-body,.lbx-body p,.lbx-body ul,.lbx-body ol{min-width:0;max-width:100%}
.lbx-facts{background:var(--lbx-bg-2);border:1px solid var(--lbx-line);border-radius:var(--lbx-radius);padding:15px;min-width:0}
.lbx-facts h2{margin-bottom:10px}
.lbx-facts dl{margin:0;display:grid;gap:8px}
.lbx-facts dl>div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--lbx-line);padding-bottom:7px;min-width:0}
.lbx-facts dl>div:last-child{border:0;padding-bottom:0}
.lbx-facts dt{font-size:.8rem;color:var(--lbx-hint);min-width:0;flex:0 1 auto}
.lbx-facts dd{margin:0;font-size:.86rem;font-weight:650;text-align:right;min-width:0;flex:1 1 auto}
.lbx-facts a{color:var(--lbx-amber);text-decoration:underline}
.lbx-steps{padding-left:1.35em}
.lbx-steps li{margin-bottom:.5em}

/* Wide data tables have no fixed layout in this build, but any table dropped
   into a page must scroll inside its own box rather than widen the document. */
.lbx-wrap table,.lbx-body table{display:block;width:100%;max-width:100%;overflow-x:auto;
  -webkit-overflow-scrolling:touch;border-collapse:collapse}
.lbx-wrap table th,.lbx-wrap table td,.lbx-body table th,.lbx-body table td{padding:8px 10px;text-align:left;white-space:normal}

/* note block */
.lbx-note{background:var(--lbx-bg-2);border:1px solid var(--lbx-line);border-radius:var(--lbx-radius);padding:16px;min-width:0}
.lbx-note-2{display:grid;gap:14px}
@media(min-width:820px){.lbx-note-2{grid-template-columns:1fr 1fr}}
.lbx-note-2 p{margin:0;color:var(--lbx-ink-2);font-size:.94rem}
.lbx-disclaimer{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--lbx-line);font-size:.82rem;color:var(--lbx-hint)}

/* faq */
.lbx-faq{display:grid;gap:8px}
.lbx-faq details{background:var(--lbx-bg-2);border:1px solid var(--lbx-line);border-radius:var(--lbx-radius-2);min-width:0}
.lbx-faq summary{cursor:pointer;padding:14px;min-height:46px;display:flex;align-items:center;font-weight:650;font-size:.94rem;list-style:none;position:relative;padding-right:38px}
.lbx-faq summary::-webkit-details-marker{display:none}
.lbx-faq summary::after{content:"+";position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:var(--lbx-amber);font-weight:800;font-size:1.05rem;pointer-events:none}
.lbx-faq details[open] summary::after{content:"–"}
.lbx-faq-a{padding:0 14px 13px;color:var(--lbx-ink-2);font-size:.92rem}
@media(min-width:820px){.lbx-faq{grid-template-columns:1fr 1fr}.lbx-faq details{break-inside:avoid}}

/* mini links */
.lbx-mini{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.lbx-mini-i{display:block;background:var(--lbx-bg-2);border:1px solid var(--lbx-line);border-left:3px solid var(--lbx-amber);
  border-radius:var(--lbx-radius-2);padding:12px 13px;min-height:56px;min-width:0}
.lbx-mini-i b{display:block;font-size:.92rem;margin-bottom:3px}
.lbx-mini-i span{font-size:.8rem;color:var(--lbx-hint)}
.lbx-mini-i:hover{background:var(--lbx-amber-soft)}
@media(min-width:700px){.lbx-mini{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.lbx-mini{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* footer — single column on phones, three link columns only from 760px up */
.lbx-foot{background:var(--lbx-deep);color:#e8d6b6;margin-top:30px;padding:26px 0 14px;font-size:.88rem}
.lbx-foot-in{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
.lbx-foot-brand b{color:#fbeccd;font-size:1.04rem}
.lbx-foot-brand p{font-size:.86rem;color:#cbb08a;margin:8px 0}
.lbx-age{display:inline-block;border:1.5px solid var(--lbx-amber-2);color:var(--lbx-amber-2);border-radius:7px;
  padding:3px 8px;font-weight:800;font-size:.82rem}
.lbx-foot-col{display:flex;flex-direction:column;gap:6px}
.lbx-foot-col h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.09em;color:var(--lbx-amber-2);margin-bottom:4px}
.lbx-foot-col a{color:#e8d6b6;font-size:.88rem;padding:10px 0;min-height:44px;display:flex;align-items:center}
.lbx-foot-col a:hover{color:#fff;text-decoration:underline}
.lbx-foot-bot{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;border-top:1px solid #6b4520;
  margin-top:20px;padding-top:12px;font-size:.8rem;color:#b39a76}
@media(min-width:760px){.lbx-foot-in{grid-template-columns:1.6fr 1fr 1fr 1fr}}

/* Card artwork: real generated WebP behind each slot card. The themed gradient
   stays as the backdrop so a slow or blocked image never leaves an empty box. */
.lbx-card-img{
  position:absolute;inset:0;width:100%;height:100%;max-width:100%;object-fit:cover;
  opacity:.92;transition:opacity .18s ease;
}
.lbx-card-media{overflow:hidden}
.lbx-card:hover .lbx-card-img{opacity:1}
@media(prefers-reduced-motion:reduce){.lbx-card-img{transition:none}}

/* ---------------------------------------------------------------- phones */
/* Under 520px the wrapping gutters tighten and every multi-column block is
   forced to a single column so nothing can be squeezed below a usable width. */
@media(max-width:520px){
  .lbx-wrap{padding:0 12px}
  .lbx-sec{padding:22px 0}
  .lbx-sec-h p{font-size:.92rem}
  .lbx-hero-in{padding:16px 12px 24px}
  .lbx-grid,.lbx-grid-4,.lbx-hubs,.lbx-mini{grid-template-columns:minmax(0,1fr)}
  .lbx-note{padding:14px}
  .lbx-facts{padding:13px}
  .lbx-foot{padding:22px 0 12px}
  .lbx-foot-col a{padding:9px 0}
}

/* --------------------------------------------------------- very narrow */
/* 320–380px: the sticky header is the tightest row on the page. The wrapped
   header is kept to two short lines and the nav drawer gets wider touch rows. */
@media(max-width:380px){
  .lbx-topbar{font-size:.78rem}
  .lbx-topbar-in{justify-content:flex-start}
  .lbx-brand{padding:4px 0}
  .lbx-burger{width:42px;height:42px}
  .lbx-btn-tg{min-width:42px;min-height:42px;padding:6px 10px}
  .lbx-btn-reg{min-height:42px}
  .lbx-nav a{min-height:48px;font-size:.94rem;padding:12px 8px}
  .lbx-nav{max-height:min(58vh,300px)}
  .lbx-hub{padding:12px;gap:2px 10px}
  .lbx-card-b{padding:10px}
  .lbx-chips a,.lbx-filters button{font-size:.84rem;padding:10px}
  .lbx-foot-in{gap:16px}
  .lbx-foot-bot{font-size:.82rem}
}