/* MEASURED 2026-09-13: this <style> tag lands after the theme's app.css, and every rule below
     that sets display: on a class also toggled via the hidden attribute (.irm__done) beats the
     UA/theme [hidden] { display: none } rule at equal specificity — so a guest with no
     subscription saw the "already subscribed" banner. Restore [hidden] with !important, scoped
     to this widget's own root class so the guard cannot leak into unrelated [hidden] elements
     elsewhere on the product page. Covers every hidden-toggled element in this component
     (.irm__done, .irm__panel, .irm__msg), not just the one measured live. */
  .irm [hidden] { display: none !important; }
  /* Everything below styles only what is INSIDE the row (picker, LINE button, done line).
     The row's own chrome — title typography, padding, borders, the collapse icon — is the
     theme's app.css alone; none of it is restyled here. See the row-chrome test below. */
  .irm__lead { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
  .irm__picker { position: relative; }
  .irm__picker::before, .irm__picker::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 48px; pointer-events: none; z-index: 2;
  }
  .irm__picker::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
  .irm__picker::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
  .irm__track {
    display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 6px calc(50% - 36px); -webkit-overflow-scrolling: touch;
  }
  .irm__track::-webkit-scrollbar { display: none; }
  .irm__day {
    flex: none; scroll-snap-align: center; width: 72px; height: 64px; border-radius: 12px;
    cursor: pointer; border: 1.5px solid #e3e5e8; background: #fff; color: #7c8890; font: inherit;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    line-height: 1.1; transition: transform 0.15s, color 0.15s, border-color 0.15s;
  }
  .irm__day b { font-size: 22px; font-weight: 700; }
  .irm__day span { font-size: 12px; }
  .irm__day.is-selected {
    color: #fff; background: var(--color-accent, #f48579);
    border-color: var(--color-accent, #f48579); transform: scale(1.06);
  }
  .irm__next { font-size: 13px; color: #6b7075; margin: 8px 0 12px; text-align: center; }
  .irm__line {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; box-sizing: border-box; cursor: pointer;
    font: inherit; font-weight: 700; font-size: 15px;
    background: #06C755; color: #fff; border: none; border-radius: 8px; padding: 12px 18px;
  }
  .irm__line:hover { opacity: 0.88; }
  .irm__line[disabled] { opacity: 0.6; cursor: wait; }
  .irm__form { margin: 0; }
  .irm__done {
    display: flex; align-items: center; gap: 10px;
    background: rgba(76, 175, 80, 0.12); color: #256d29; border-radius: 12px;
    font-size: 14px; font-weight: 600; padding: 12px 16px; margin: 0 0 12px;
  }
  .irm__done svg { flex: none; }
  .irm__done a {
    margin-left: auto; color: #256d29; font-weight: 600; font-size: 13px;
    text-decoration: underline; white-space: nowrap; cursor: pointer;
  }
  .irm__msg { font-size: 13px; color: #c0392b; margin: 8px 0 0; }