/* =========================================================
   v2.5.0 — Mobile overflow + menu fit hotfix
   ---------------------------------------------------------
   Last CSS layer. Prevents the category menu from taking page
   height on phones, removes horizontal overflow, makes the
   first screen compact, and improves mobile product text.
   ========================================================= */

@media (max-width: 900px) {
  html,
  body.vlg-theme {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  body.vlg-theme *,
  body.vlg-theme *::before,
  body.vlg-theme *::after {
    box-sizing: border-box !important;
  }

  body.vlg-theme .vlg-container,
  body.vlg-theme .site-main,
  body.vlg-theme .vlg-home,
  body.vlg-theme .vlg-shop-page,
  body.vlg-theme .vlg-main-header-inner,
  body.vlg-theme .vlg-nav-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.vlg-theme .vlg-container {
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
  }

  body.vlg-theme img,
  body.vlg-theme svg,
  body.vlg-theme video,
  body.vlg-theme iframe {
    max-width: 100% !important;
  }

  /* Mobile menu must not live in the normal page flow. */
  body.vlg-theme .vlg-nav {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 9200 !important;
  }

  body.vlg-theme:not(.vlg-menu-open) .vlg-nav,
  body.vlg-theme .vlg-nav:not(.is-open) {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0, 100%, 0) !important;
  }

  body.vlg-theme:not(.vlg-menu-open) .vlg-category-menu,
  body.vlg-theme:not(.vlg-menu-open) .vlg-category-dropdown,
  body.vlg-theme:not(.vlg-menu-open) .vlg-category-menu.is-open .vlg-category-dropdown {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.vlg-theme.vlg-menu-open .vlg-nav.is-open {
    display: block !important;
    height: auto !important;
    max-height: min(82dvh, 680px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  body.vlg-theme.vlg-menu-open .vlg-nav.is-open .vlg-nav-inner {
    max-height: min(82dvh, 680px) !important;
    padding: 10px 12px max(14px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body.vlg-theme.vlg-menu-open .vlg-nav.is-open .vlg-category-menu,
  body.vlg-theme.vlg-menu-open .vlg-nav.is-open .vlg-category-dropdown {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  body.vlg-theme.vlg-menu-open .vlg-nav.is-open .vlg-category-dropdown > ul,
  body.vlg-theme.vlg-menu-open .vlg-nav.is-open .vlg-category-dropdown > .vlg-cat-dropdown-list {
    max-height: min(36dvh, 320px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Compact homepage first screen. */
  body.vlg-theme .vlg-home .vlg-container {
    overflow: hidden !important;
  }

  body.vlg-theme .vlg-hero {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin: 12px 0 12px !important;
    padding: 24px 16px 26px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  body.vlg-theme .vlg-hero .vlg-hero-content,
  body.vlg-theme .vlg-hero-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.vlg-theme .vlg-hero .vlg-kicker {
    max-width: 100% !important;
    white-space: normal !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }

  body.vlg-theme .vlg-hero h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
    font-size: clamp(28px, 8.4vw, 34px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  body.vlg-theme .vlg-hero p {
    max-width: 100% !important;
    margin-bottom: 16px !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  body.vlg-theme .vlg-hero-actions,
  body.vlg-theme .vlg-hero-actions .vlg-btn,
  body.vlg-theme .vlg-hero-actions .vlg-btn-primary,
  body.vlg-theme .vlg-hero .vlg-btn {
    width: 100% !important;
  }

  body.vlg-theme .vlg-hero-actions .vlg-btn,
  body.vlg-theme .vlg-hero .vlg-btn {
    min-height: 50px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    justify-content: center !important;
  }

  /* Trust cards: no single-letter overflow like "kohaletoimetamin e". */
  body.vlg-theme .vlg-trust-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 10px 0 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.vlg-theme .vlg-trust-item {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 104px !important;
    padding: 12px 10px !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  body.vlg-theme .vlg-trust-item > span {
    width: 46px !important;
    height: 46px !important;
    margin: 0 auto 6px !important;
  }

  body.vlg-theme .vlg-trust-item div,
  body.vlg-theme .vlg-trust-item strong,
  body.vlg-theme .vlg-trust-item small {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.vlg-theme .vlg-trust-item strong {
    display: block !important;
    color: #071224 !important;
    font-size: 14px !important;
    line-height: 1.14 !important;
    letter-spacing: -.015em !important;
    font-weight: 900 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: auto !important;
  }

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

  body.vlg-theme .vlg-section,
  body.vlg-theme .vlg-section-head,
  body.vlg-theme .vlg-category-grid,
  body.vlg-theme .vlg-products-grid,
  body.vlg-theme .vlg-shop-products,
  body.vlg-theme ul.products {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.vlg-theme .vlg-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.vlg-theme .vlg-category-card {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.vlg-theme .vlg-category-card strong {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: auto !important;
  }

  /* Smaller cookie notice so it does not cover half of the screen. */
  body.vlg-theme .vlg-cookie-notice {
    left: 12px !important;
    right: 12px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    gap: 10px !important;
    padding: 14px !important;
    border-radius: 20px !important;
  }

  body.vlg-theme .vlg-cookie-notice p {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  body.vlg-theme .vlg-cookie-notice__button {
    min-height: 48px !important;
    border-radius: 15px !important;
  }
}

@media (max-width: 380px) {
  body.vlg-theme .vlg-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.vlg-theme .vlg-hero {
    padding: 22px 14px 24px !important;
  }

  body.vlg-theme .vlg-hero h1 {
    font-size: clamp(26px, 8vw, 31px) !important;
  }

  body.vlg-theme .vlg-trust-grid {
    gap: 8px !important;
  }

  body.vlg-theme .vlg-trust-item {
    min-height: 96px !important;
    padding: 10px 8px !important;
  }

  body.vlg-theme .vlg-trust-item strong {
    font-size: 13px !important;
  }
}


/* v2.5.1: empty category rows are removed in PHP; this keeps legacy cached markup from showing obvious zero badges. */
.vlg-cat-count:empty,
.vlg-category-card small:empty {
  display: none !important;
}