/* =========================================================
   Gymsessed Real Exercise Card Slider - PWA Safe
   ========================================================= */

html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100% !important;
  touch-action: manipulation !important;
}

.gys-app-shell,
.gys-app-shell * {
  box-sizing: border-box !important;
  -webkit-tap-highlight-color: transparent !important;
}

.gys-app-shell {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

.gys-app-shell button,
.gys-app-shell a,
.gys-app-shell [role="button"],
.gys-app-shell .gys-btn,
.gys-app-shell .gys-set-adjuster button,
.gys-app-shell .gys-exercise-info-trigger {
  touch-action: manipulation !important;
}

.gys-app-shell .gys-active-workout-view {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

.gys-app-shell .gys-active-workout-stage {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.gys-app-shell #gys-active-workout-render {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  contain: layout style !important;
}

.gys-app-shell .gys-exercise-slider-viewport {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  touch-action: pan-y !important;
  overscroll-behavior-x: contain !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.gys-app-shell .gys-exercise-slider-track {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translate3d(0, 0, 0);
}

.gys-app-shell .gys-exercise-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}

.gys-app-shell .gys-exercise-slide .gys-live-exercise-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}

.gys-app-shell .gys-live-exercise-card,
.gys-app-shell .gys-live-exercise-card *,
.gys-app-shell .gys-live-section,
.gys-app-shell .gys-live-set-list,
.gys-app-shell .gys-live-set-card,
.gys-app-shell .gys-live-nav,
.gys-app-shell .gys-live-title-row,
.gys-app-shell .gys-live-meta,
.gys-app-shell .gys-overload-banner,
.gys-app-shell .gys-bodyweight-note {
  max-width: 100% !important;
  min-width: 0 !important;
}

.gys-app-shell .gys-live-title-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.gys-app-shell .gys-live-title-row h2 {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

.gys-app-shell .gys-exercise-info-trigger {
  flex: 0 0 auto !important;
}

.gys-app-shell .gys-dial-group {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px !important;
}

.gys-app-shell .gys-dial-box {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.gys-app-shell .gys-dial,
.gys-app-shell [data-gys-dial] {
  max-width: 100% !important;
  min-width: 0 !important;
}

.gys-app-shell .gys-live-set-list {
  width: 100% !important;
}

.gys-app-shell .gys-live-set-card {
  width: 100% !important;
}

.gys-app-shell .gys-live-nav {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
}

.gys-app-shell .gys-live-nav .gys-btn {
  width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

.gys-app-shell .gys-exercise-slider-viewport.is-dragging {
  cursor: grabbing !important;
}

.gys-app-shell .gys-exercise-slider-viewport.is-dragging .gys-live-exercise-card {
  pointer-events: none !important;
}

.gys-app-shell .gys-live-exercise-card-mirror {
  pointer-events: none !important;
}

.gys-app-shell .gys-live-exercise-card-mirror button,
.gys-app-shell .gys-live-exercise-card-mirror a,
.gys-app-shell .gys-live-exercise-card-mirror [data-gys-dial] {
  pointer-events: none !important;
}

.gys-app-shell .gys-live-exercise-card-placeholder {
  min-height: 520px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 390px) {
  .gys-app-shell .gys-dial-group {
    gap: 8px !important;
  }

  .gys-app-shell .gys-live-nav {
    gap: 8px !important;
  }

  .gys-app-shell .gys-live-nav .gys-btn {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gys-app-shell .gys-exercise-slider-track,
  .gys-app-shell .gys-live-exercise-card,
  .gys-app-shell .gys-live-exercise-card * {
    animation: none !important;
    transition: none !important;
  }
}

.gys-app-shell .gys-exercise-slider-viewport {
  isolation: isolate !important;
  contain: layout paint style !important;
}

.gys-app-shell .gys-exercise-slider-track {
  transition-property: transform !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
}

.gys-app-shell .gys-exercise-slide {
  contain: layout paint style !important;
}

.gys-app-shell .gys-exercise-slider-viewport.is-dragging .gys-exercise-slider-track {
  transition: none !important;
}

.gys-app-shell .gys-live-exercise-card {
  will-change: transform !important;
}