/* SVC-MOBILE · 20260805-svcmobile1
 * Phone Services: bottom sheet + backdrop · touch≥44 · safe-area ·
 * FAB/toast park while open · cascade-last (does NOT edit product-switcher.*).
 * Coord: svc-overlay owns closed ghost/z; this fold owns open mobile UX. */
html[data-vy-svcmobile="20260805-svcmobile1"] {
  --vy-svc-sheet-max: min(82dvh, 720px);
  --vy-svc-backdrop-z: 2147482400;
  --vy-svc-sheet-z: 2147482500;
}

/* Backdrop — only while Services open */
#vy-svc-mobile-backdrop[data-vy-svcmobile-backdrop="1"] {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--vy-svc-backdrop-z);
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.42);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
html[data-vy-svcmobile="20260805-svcmobile1"] body.vy-product-panel-open #vy-svc-mobile-backdrop[data-vy-svcmobile-backdrop="1"] {
  display: block !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 640px) {
  /* Bottom sheet — beat product-switcher full-inset + eco-sheet partial */
  html[data-vy-svcmobile="20260805-svcmobile1"] body.vy-product-panel-open > .vy-product-panel:not([hidden]),
  html[data-vy-svcmobile="20260805-svcmobile1"] body.vy-product-panel-open .vy-product-panel[data-vy-portaled="1"]:not([hidden]),
  html[data-vy-svcmobile="20260805-svcmobile1"] .vy-product-switcher.is-open > .vy-product-panel:not([hidden]),
  html[data-vy-svcmobile="20260805-svcmobile1"] .vy-product-switcher[data-open="true"] > .vy-product-panel:not([hidden]) {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: var(--vy-svc-sheet-max) !important;
    height: auto !important;
    transform: none !important;
    z-index: var(--vy-svc-sheet-z) !important;
    border-radius: 22px 22px 0 0 !important;
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow: 0 -18px 48px rgba(15, 47, 104, 0.2) !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
  }

  /* Drag handle affordance */
  html[data-vy-svcmobile="20260805-svcmobile1"] body.vy-product-panel-open .vy-product-panel__head {
    position: relative;
    padding-top: 10px;
    min-height: 44px;
  }
  html[data-vy-svcmobile="20260805-svcmobile1"] body.vy-product-panel-open .vy-product-panel__head::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto 12px;
    border-radius: 999px;
    background: color-mix(in srgb, #94a3b8 55%, transparent);
  }

  /* Touch ≥44 */
  html[data-vy-svcmobile="20260805-svcmobile1"] .vy-product-panel__close,
  html[data-vy-svcmobile="20260805-svcmobile1"] .vy-product-launcher,
  html[data-vy-svcmobile="20260805-svcmobile1"] .vy-product-assist {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  html[data-vy-svcmobile="20260805-svcmobile1"] .vy-product-card {
    min-height: 108px !important;
    min-width: 0 !important;
    touch-action: manipulation;
  }
  html[data-vy-svcmobile="20260805-svcmobile1"] .vy-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* While open: park FAB/toast so they don't fight the sheet */
  html[data-vy-svcmobile="20260805-svcmobile1"] body.vy-product-panel-open .toast-host,
  html[data-vy-svcmobile="20260805-svcmobile1"] body.vy-product-panel-open #toastHost,
  html[data-vy-svcmobile="20260805-svcmobile1"] body.vy-product-panel-open .vy-eco-assist:not(:focus-within),
  html[data-vy-svcmobile="20260805-svcmobile1"] body.vy-product-panel-open .vy-eco-assist__fab {
    pointer-events: none !important;
    z-index: 100 !important;
  }
  /* Keep chrome-burger launcher PE-none when closed (W3); when open allow API path only */
  html[data-vy-svcmobile="20260805-svcmobile1"] body.vy-product-panel-open > .vy-product-switcher.vy-product-switcher--chrome-burger:not([data-open="true"]):not(.is-open) {
    pointer-events: none !important;
  }
  html[data-vy-svcmobile="20260805-svcmobile1"] body.vy-product-panel-open > .vy-product-switcher.is-open,
  html[data-vy-svcmobile="20260805-svcmobile1"] body.vy-product-panel-open > .vy-product-switcher[data-open="true"] {
    z-index: var(--vy-svc-sheet-z) !important;
    pointer-events: none !important; /* panel is portaled; root must not capture */
  }
  html[data-vy-svcmobile="20260805-svcmobile1"] body.vy-product-panel-open > .vy-product-panel {
    pointer-events: auto !important;
  }

  /* Closed: never leave a full-bleed invisible capture from this fold */
  html[data-vy-svcmobile="20260805-svcmobile1"] body:not(.vy-product-panel-open) #vy-svc-mobile-backdrop {
    display: none !important;
    pointer-events: none !important;
  }
}

@media (min-width: 641px) {
  /* Desktop: backdrop optional dim behind centered panel */
  html[data-vy-svcmobile="20260805-svcmobile1"] body.vy-product-panel-open #vy-svc-mobile-backdrop[data-vy-svcmobile-backdrop="1"] {
    display: block !important;
  }
}