/*
   OUJI skincare mobile paper integration
   ---------------------------------------
   Mobile-only background integration. The XP control panel stays owned by
   skincare-match.css and skincare-modes.css, including its copy and states.
*/

@media (max-width: 959px) {
  .skincare-booth--mobile .skincare-booth__cats {
    height: 92px !important;
    margin-top: 0;
    padding: 8px 4px;
  }
  .skincare-booth--mobile .skincare-booth__cat {
    height: 76px;
  }
  .skincare-booth--mobile .skincare-booth__cat:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 6px;
    right: 0;
    width: 1px;
    background: #cbd8e7;
    pointer-events: none;
  }
  /* Temporary launch switch: hide the skincare questionnaire on mobile. */
  #skincare-match {
    display: none !important;
  }

  .skincare-booth,
  #skincare-match {
    --skincare-paper: #f7f9f9;
  }

  .skincare-booth,
  #skincare-match,
  #skincare-match .dl {
    background: var(--skincare-paper);
  }

  /* Match the category rail to the product section below. */
  .skincare-booth__cats {
    background: var(--skincare-paper);
  }

  /* Remove only the old sky/grass bridge behind the XP window. */
  #skincare-match.sm::before,
  #skincare-match.sm::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /* The small hero meta is intentionally not shown on mobile. */
  .skincare-booth .skincare-booth__meta {
    display: none;
  }

  /* Keep the watercolor mask, changing only its footprint and opacity. */
  .skincare-booth__cat::before {
    width: 82%;
    height: 30px;
    opacity: .42;
  }

  .skincare-booth__cat,
  .skincare-booth__cat:hover,
  .skincare-booth__cat:active,
  .skincare-booth__cat[data-active],
  .skincare-booth__cat:focus-visible {
    background: transparent;
    box-shadow: none;
  }
}