/* ═══════════════════════════════════════════════════════════════════
   LI GAMING BD — DESKTOP / PC LAYOUT (≥ 1100px only)
   Loaded last. Phones and tablets keep the existing layout untouched.
   Header: logo + GAMING hug the left corner, Wallet · Profile · Cart hug the right corner,
   nav links sit dead-centre. Content below spans the screen with an even gutter.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1100px) {
  :root {
    --dp-edge: clamp(24px, 2vw, 40px);       /* header: distance from the screen corners */
    --dp-gutter: clamp(36px, 3.4vw, 72px);   /* page content: free space on each side */
    --dp-max: 1760px;                        /* content never stretches beyond this on ultra-wide screens */
    --ls-gap: 30px;
  }

  /* ───────────── HEADER ───────────── */
  html body #siteHeader#siteHeader:not(#zz) { height: 66px !important; min-height: 66px !important; }
  html body #siteHeader#siteHeader:not(#zz) .nav,
  html body #siteHeader#siteHeader:not(#zz) .wrap.nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    grid-template-rows: 100% !important;
    align-items: center !important;
    column-gap: 28px !important;
    width: 100% !important;
    max-width: none !important;
    height: 66px !important;
    min-height: 66px !important;
    margin: 0 !important;
    padding: 0 var(--dp-edge) !important;
  }
  /* logo + GAMING: tight together, pinned to the left corner */
  html body #siteHeader#siteHeader:not(#zz) .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    justify-content: flex-start !important;
    width: max-content !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    transform: none !important;
    margin: 0 !important;
    gap: 8px !important;
  }
  html body #siteHeader#siteHeader:not(#zz) .brand-logo {
    position: relative !important;
    width: 86px !important;
    max-width: none !important;
    height: 44px !important;
    margin: 0 !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
  }
  html body #siteHeader#siteHeader:not(#zz) .brand-logo img {
    position: absolute !important;
    left: 0 !important;
    top: -44.87% !important;
    width: 100% !important;
    height: 194.7% !important;
    max-width: none !important;
    object-fit: fill !important;
  }
  html body #siteHeader#siteHeader:not(#zz) .brand-gaming-text { margin: 0 !important; }
  html body #siteHeader#siteHeader:not(#zz) .gaming-letters-row { font-size: 19px !important; }
  /* nav links: centre column (they used to be absolutely positioned, which pushed the buttons to the middle) */
  html body #siteHeader#siteHeader:not(#zz) .navlinks {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    margin: 0 !important;
    gap: 6px !important;
  }
  html body #siteHeader#siteHeader:not(#zz) .navlinks a { padding: 12px 20px !important; font-size: 13.5px !important; }
  html body #siteHeader#siteHeader:not(#zz) .navlinks a::after { left: 20px !important; right: 20px !important; }
  /* Wallet · Profile · Cart: right corner */
  html body #siteHeader#siteHeader:not(#zz) .actions,
  html body #siteHeader#siteHeader:not(#zz) .header-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    margin: 0 !important;
    transform: none !important;
    gap: 14px !important;
  }
  html body #siteHeader#siteHeader:not(#zz) .nav-wallet-btn,
  html body #siteHeader#siteHeader:not(#zz) .profile-nav,
  html body #siteHeader#siteHeader:not(#zz) .cart-nav { height: 42px !important; }
  html body #siteHeader#siteHeader:not(#zz) .profile-nav,
  html body #siteHeader#siteHeader:not(#zz) .cart-nav { width: 42px !important; min-width: 42px !important; }
  html body #siteHeader#siteHeader:not(#zz) .nav-wallet-btn { padding: 0 18px 0 11px !important; }
  html body #siteHeader#siteHeader:not(#zz) .nav-wallet-btn .nav-search-icon img { width: 28px; }

  /* ───────────── HOME ───────────── */
  html body #serviceIntro#serviceIntro:not(#zz) { padding: 18px 0 14px !important; }
  /* shell = grid: heading + cards span everything, Search and Contact Us sit side by side, centred */
  html body #serviceIntro#serviceIntro:not(#zz) .li-service-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 600px) minmax(0, 500px) minmax(0, 1fr) !important;
    column-gap: 22px !important;
    align-items: stretch !important;
    width: min(calc(100% - 2 * var(--dp-gutter)), var(--dp-max)) !important;
    max-width: none !important;
    margin: 0 auto !important;
  }
  html body #serviceIntro#serviceIntro:not(#zz) .li-service-header,
  html body #serviceIntro#serviceIntro:not(#zz) .li-service-grid { grid-column: 1 / -1 !important; }
  html body #serviceIntro#serviceIntro:not(#zz) .li-search-wrap { grid-column: 2 !important; margin: 28px 0 0 !important; max-width: none !important; }
  html body #serviceIntro#serviceIntro:not(#zz) .li-contact-bar,
  html body #serviceIntro#serviceIntro:not(#zz) .li-search-wrap + .li-contact-bar {
    grid-column: 3 !important;
    max-width: none !important;
    margin: 28px 0 0 !important;
    min-height: 62px !important;
    box-sizing: border-box !important;
    align-self: stretch !important;
    border-radius: 21px !important;
  }

  /* heading: compact, 3D gold lettering, no glow */
  html body #serviceIntro#serviceIntro:not(#zz) .li-service-header { margin: 0 0 20px !important; }
  html body #serviceIntro#serviceIntro:not(#zz) .lsh-wrap { gap: 4px !important; padding: 0 !important; }
  html body #serviceIntro#serviceIntro:not(#zz) .lsh-wrap::before { content: none !important; display: none !important; }
  html body #serviceIntro#serviceIntro:not(#zz) .lsh-eyebrow { padding: 7px 16px !important; }
  html body #serviceIntro#serviceIntro:not(#zz) .li-service-header h1.lsh-title { gap: 0 !important; }
  html body #serviceIntro#serviceIntro:not(#zz) .li-service-header h1.lsh-title::after { content: none !important; display: none !important; }
  html body #serviceIntro#serviceIntro:not(#zz) .lsh-t2 {
    padding: 0 4px;
    font: 800 clamp(32px, 2.3vw, 44px)/1.1 'Sora', 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    /* chrome-gold 3D lettering: bevel bands + rim light, no shadow */
    background:
      linear-gradient(180deg, #fffef5 0%, #fff0b3 16%, #ffd75a 36%, #f7b520 49%, #8f5600 50%, #c98408 52%, #f3b826 70%, #ffe27a 88%, #fff4c4 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: .8px rgba(255, 238, 170, .75) !important;
    filter: none !important;
    text-shadow: none !important;
  }  html body #serviceIntro#serviceIntro:not(#zz) .lsh-sub { margin: 2px 0 0 !important; font-size: 13.5px !important; }

  /* service cards: 3 across the content width, a notch smaller */
  html body #serviceIntro#serviceIntro:not(#zz) .li-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    max-width: none !important;
    margin: 0 !important;
  }
  html body #serviceIntro#serviceIntro:not(#zz) .li-service-card,
  html body #serviceIntro#serviceIntro:not(#zz) .li-service-card:hover {
    grid-template-columns: 78px minmax(0, 1fr) 40px !important;
    gap: 18px !important;
    min-height: 112px !important;
    padding: 16px 22px 16px 20px !important;
    border-radius: 22px !important;
  }
  html body #serviceIntro#serviceIntro:not(#zz) .li-service-logo { width: 78px !important; height: 78px !important; border-radius: 21px !important; }
  html body #serviceIntro#serviceIntro:not(#zz) .li-service-logo img { width: 48px !important; height: 48px !important; }
  html body #serviceIntro#serviceIntro:not(#zz) .li-service-logo.pool-logo img { width: 100% !important; height: 100% !important; }
  html body #serviceIntro#serviceIntro:not(#zz) .li-service-logo.pubg-logo img { width: 56px !important; height: 56px !important; }
  html body #serviceIntro#serviceIntro:not(#zz) .li-service-logo.ai-openai-logo img { width: 68px !important; height: 68px !important; }
  html body #serviceIntro#serviceIntro:not(#zz) .li-service-copy b { font-size: 18.5px !important; }
  html body #serviceIntro#serviceIntro:not(#zz) .li-service-copy small { margin-top: 5px !important; font-size: 12.5px !important; }
  html body #serviceIntro#serviceIntro:not(#zz) .li-service-copy em { margin-top: 6px !important; font-size: 12px !important; }
  html body #serviceIntro#serviceIntro:not(#zz) .li-service-arrow { width: 38px !important; height: 38px !important; }
  html body #serviceIntro#serviceIntro:not(#zz) .li-service-arrow .pp-i { width: 17px !important; height: 17px !important; }

  /* search bar: compact (same height as the Contact Us bar beside it) */
  html body #serviceIntro#serviceIntro:not(#zz) .li-search-bar { min-height: 62px; height: 100%; padding: 9px 10px 9px 9px; border-radius: 21px; gap: 10px; }
  html body #serviceIntro#serviceIntro:not(#zz) .li-search-bar .lsb-tile { width: 44px; height: 44px; border-radius: 15px; }
  html body #serviceIntro#serviceIntro:not(#zz) .li-search-bar .lsb-tile .pp-i { width: 22px; height: 22px; }
  html body #serviceIntro#serviceIntro:not(#zz) .li-search-bar .lsb-field { height: 44px; padding: 0 8px 0 18px; border-radius: 15px; }
  html body #serviceIntro#serviceIntro:not(#zz) .li-search-bar .lsb-input { font-size: 16px; }
  html body #serviceIntro#serviceIntro:not(#zz) .li-search-bar .lsb-go { height: 44px; padding: 0 24px; border-radius: 15px; font-size: 13px; }

  /* ───────────── FOOTER ───────────── */
  html body #siteFooter#siteFooter:not(#zz) { margin-top: 0 !important; padding-top: var(--ls-gap, 30px) !important; padding-bottom: 30px !important; }
  html body #siteFooter#siteFooter:not(#zz) > .wrap {
    width: min(calc(100% - 2 * var(--dp-gutter)), var(--dp-max)) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  html body #siteFooter#siteFooter:not(#zz) .footer-legal-card { width: 100% !important; max-width: none !important; }
  html body #siteFooter#siteFooter:not(#zz) .footer-legal-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
  html body #siteFooter#siteFooter:not(#zz) .footer-legal-btn { min-height: 66px !important; border-radius: 22px !important; }
  html body #siteFooter#siteFooter:not(#zz) .footer-legal-btn b { font-size: 15.5px !important; }
  html body #siteFooter#siteFooter:not(#zz) .payment-methods-banner {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 26px auto 0 !important;
  }
  html body #siteFooter#siteFooter:not(#zz) .payment-methods-banner img.payment-banner-desktop {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  html body #siteFooter#siteFooter:not(#zz) .foot { margin-top: 22px !important; }
}