/* =========================================================
   v2.2.7 — Mobile UX screenshot polish
   Based on real mobile screenshot feedback: reduce first-screen height,
   remove noisy hero effects, keep cookie notice inside viewport, and
   make category section easier to read on phones.
   ========================================================= */

@media (max-width: 767px) {
  /* Header: keep the first screen compact without breaking desktop layout. */
  body.vlg-theme .vlg-site-header {
    position: relative !important;
    z-index: 3000 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(219, 229, 241, .9) !important;
    background: rgba(255, 255, 255, .98) !important;
  }

  body.vlg-theme .vlg-main-header-inner {
    width: calc(100% - 20px) !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 7px 0 8px !important;
    min-height: 56px !important;
  }

  body.vlg-theme .vlg-header-brand-row {
    grid-column: 1 / 3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  body.vlg-theme .vlg-header-actions {
    grid-column: 3 / 4 !important;
    justify-self: end !important;
    min-width: 0 !important;
    gap: 0 !important;
  }

  body.vlg-theme .vlg-header-actions > *:not(.vlg-cart-link),
  body.vlg-theme .vlg-account-link,
  body.vlg-theme .vlg-wishlist-link,
  body.vlg-theme .vlg-header-language-slot {
    display: none !important;
  }

  body.vlg-theme .vlg-header-search {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
  }

  body.vlg-theme .vlg-search {
    min-height: 42px !important;
    padding: 4px 5px 4px 11px !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .045) !important;
  }

  body.vlg-theme .vlg-search input[type="search"] {
    min-width: 0 !important;
    height: 32px !important;
    font-size: 14px !important;
    text-overflow: ellipsis !important;
  }

  body.vlg-theme .vlg-search button,
  body.vlg-theme .vlg-search-submit {
    min-width: 58px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 13px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
  }

  body.vlg-theme .vlg-mobile-toggle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 14px !important;
  }

  body.vlg-theme .vlg-brand .custom-logo,
  body.vlg-theme .custom-logo {
    max-width: min(190px, 48vw) !important;
    max-height: 40px !important;
  }

  body.vlg-theme .vlg-cart-link {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  /* Mobile menu: stay compact and never reserve a blank white block when closed. */
  body.vlg-theme .vlg-nav:not(.is-open) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  body.vlg-theme .vlg-nav.is-open {
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 108px) !important;
    left: 10px !important;
    right: 10px !important;
    max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - 122px) !important;
    border-radius: 18px !important;
    overflow: auto !important;
  }

  body.admin-bar.vlg-theme .vlg-nav.is-open {
    top: calc(var(--wp-admin--admin-bar--height, 46px) + 108px) !important;
    max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 46px) - 122px) !important;
  }

  /* Hero: cleaner premium panel, less visual noise, less vertical height. */
  body.vlg-theme .vlg-home > .vlg-container,
  body.vlg-theme .site-main.vlg-home > .vlg-container {
    width: calc(100% - 20px) !important;
    padding-top: 12px !important;
  }

  body.vlg-theme .vlg-home .vlg-hero,
  body.vlg-theme .site-main.vlg-home .vlg-hero,
  body.vlg-theme .vlg-hero {
    min-height: 0 !important;
    margin: 0 0 14px !important;
    padding: 18px 16px 17px !important;
    border-radius: 22px !important;
    background-color: #071224 !important;
    background-image:
      radial-gradient(circle at 100% 100%, rgba(242, 138, 0, .34), transparent 34%),
      linear-gradient(137deg, #071224 0%, #0b1830 55%, #111f35 100%) !important;
    background-position: center !important;
    box-shadow: 0 14px 30px rgba(7, 18, 36, .16) !important;
  }

  body.vlg-theme .vlg-hero::before,
  body.vlg-theme .vlg-hero::after,
  body.vlg-theme .vlg-hero [class*="decor"],
  body.vlg-theme .vlg-hero [class*="glow"],
  body.vlg-theme .vlg-hero [class*="blob"] {
    display: none !important;
    opacity: 0 !important;
  }

  body.vlg-theme .vlg-hero .vlg-kicker {
    max-width: 100% !important;
    margin-bottom: 9px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .10) !important;
    color: #ffbf6b !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    letter-spacing: .10em !important;
  }

  body.vlg-theme .vlg-hero h1 {
    max-width: 100% !important;
    margin: 0 0 10px !important;
    font-size: clamp(30px, 7.9vw, 38px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.055em !important;
    text-wrap: balance !important;
  }

  body.vlg-theme .vlg-hero p {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    color: rgba(241, 245, 249, .92) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body.vlg-theme .vlg-hero-actions {
    margin-top: 13px !important;
  }

  body.vlg-theme .vlg-hero-actions .vlg-btn,
  body.vlg-theme .vlg-hero-actions .vlg-btn-primary,
  body.vlg-theme .vlg-hero .vlg-btn {
    min-height: 44px !important;
    border-radius: 15px !important;
  }

  /* Trust cards: readable but less bulky. */
  body.vlg-theme .vlg-trust-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 0 20px !important;
  }

  body.vlg-theme .vlg-trust-item {
    min-height: 74px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  body.vlg-theme .vlg-trust-item h3,
  body.vlg-theme .vlg-trust-item strong {
    font-size: 14px !important;
    line-height: 1.18 !important;
  }

  body.vlg-theme .vlg-trust-item p,
  body.vlg-theme .vlg-trust-item small {
    display: none !important;
  }

  /* Category section: no collision with hero/cookie; title stays readable. */
  body.vlg-theme .vlg-section,
  body.vlg-theme .vlg-home-section {
    scroll-margin-top: 118px !important;
  }

  body.vlg-theme .vlg-section-title,
  body.vlg-theme .vlg-home-section-title,
  body.vlg-theme .vlg-section-header h2,
  body.vlg-theme .vlg-home h2 {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.045em !important;
    text-wrap: balance !important;
  }

  /* Cookie notice: in screenshot it was too wide and got clipped. Keep it inside viewport. */
  body.vlg-theme .vlg-cookie-notice {
    left: 12px !important;
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(34dvh, 260px) !important;
    transform: none !important;
    margin: 0 !important;
    padding: 13px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 11px !important;
    border-radius: 18px !important;
    overflow: auto !important;
    z-index: 99999 !important;
    box-shadow: 0 18px 45px rgba(7, 18, 36, .18) !important;
  }

  body.vlg-theme .vlg-cookie-notice p {
    max-height: 88px !important;
    margin: 0 !important;
    overflow: auto !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
  }

  body.vlg-theme .vlg-cookie-notice__button {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 14px !important;
    padding: 0 16px !important;
  }

  body.vlg-theme .vlg-cookie-notice[hidden],
  body.vlg-theme .vlg-cookie-notice[data-vlg-cookie-dismissed="1"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

}

@media (max-width: 380px) {
  body.vlg-theme .vlg-hero h1 {
    font-size: clamp(27px, 8.1vw, 32px) !important;
  }

  body.vlg-theme .vlg-hero p {
    font-size: 14px !important;
  }

  body.vlg-theme .vlg-brand .custom-logo,
  body.vlg-theme .custom-logo {
    max-width: 155px !important;
  }
}