/* v790: one geometry contract for every compact application icon. */

:is(
    .app-shell .topbar,
    body[data-theme] .app-shell .topbar,
    html.native-layout-guard .app-shell .topbar,
    html.native-layout-guard body[data-theme] .app-shell .topbar
  ) {
  grid-template-columns: 42px minmax(0, 1fr) 40px 44px !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 4px !important;
}

:is(
    .app-shell .topbar > .brand,
    body[data-theme] .app-shell .topbar > .brand,
    html.native-layout-guard .app-shell .topbar > .brand,
    html.native-layout-guard body[data-theme] .app-shell .topbar > .brand
  ) {
  display: grid !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  place-items: center !important;
  width: 42px !important;
  overflow: hidden !important;
}

:is(
    .app-shell .topbar > .brand > span,
    .app-shell .topbar > .brand > small,
    body[data-theme] .app-shell .topbar > .brand > span,
    body[data-theme] .app-shell .topbar > .brand > small,
    html.native-layout-guard .app-shell .topbar > .brand > span,
    html.native-layout-guard .app-shell .topbar > .brand > small
  ) {
  display: none !important;
}

:is(
    .app-shell .topbar > .active-view-chip,
    body[data-theme] .app-shell .topbar > .active-view-chip,
    html.native-layout-guard .app-shell .topbar > .active-view-chip,
    html.native-layout-guard body[data-theme] .app-shell .topbar > .active-view-chip
  ) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

:is(
    .app-shell .topbar > #commandButton,
    body[data-theme] .app-shell .topbar > #commandButton,
    html.native-layout-guard .app-shell .topbar > #commandButton,
    html.native-layout-guard body[data-theme] .app-shell .topbar > #commandButton
  ) {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

:is(
    .app-shell .topbar > #settingsButton,
    body[data-theme] .app-shell .topbar > #settingsButton,
    html.native-layout-guard .app-shell .topbar > #settingsButton,
    html.native-layout-guard body[data-theme] .app-shell .topbar > #settingsButton
  ) {
  grid-column: 4 !important;
  grid-row: 1 !important;
  justify-self: center !important;
}

.command-button-label,
.settings-button-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:is(
    #commandButton,
    body[data-theme] #commandButton,
    html.native-layout-guard #commandButton,
    html.native-layout-guard body[data-theme] #commandButton
  ) {
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  line-height: 0 !important;
}

:is(
    #settingsButton,
    body[data-theme] #settingsButton,
    html.native-layout-guard #settingsButton,
    html.native-layout-guard body[data-theme] #settingsButton
  ) {
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: visible !important;
  line-height: 0 !important;
}

:is(
    .command-button-icon,
    body[data-theme] .command-button-icon,
    html.native-layout-guard .command-button-icon,
    html.native-layout-guard body[data-theme] .command-button-icon
  ) {
  display: grid !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  line-height: 0 !important;
}

:is(
    .command-button-icon svg,
    #settingsButton svg,
    body[data-theme] .command-button-icon svg,
    body[data-theme] #settingsButton svg,
    html.native-layout-guard .command-button-icon svg,
    html.native-layout-guard #settingsButton svg
  ) {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  transform: none !important;
  transform-origin: center !important;
  stroke-width: 2 !important;
  vector-effect: non-scaling-stroke;
}

:is(.brand-logo, body[data-theme] .brand-logo, html.native-layout-guard .brand-logo) {
  display: block !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0 auto !important;
  object-position: center !important;
  transform: none !important;
}

:is(
    .mobile-dock > a,
    body[data-theme] .mobile-dock > a,
    html.native-layout-guard .mobile-dock > a,
    html.native-layout-guard body[data-theme] .mobile-dock > a,
    .mobile-dock > a.active,
    body[data-theme] .mobile-dock > a.active,
    html.native-layout-guard .mobile-dock > a.active
  ) {
  display: grid !important;
  grid-template-rows: 30px 16px !important;
  place-items: center !important;
  align-content: center !important;
}

:is(
    .mobile-dock .dock-icon,
    body[data-theme] .mobile-dock .dock-icon,
    html.native-layout-guard .mobile-dock .dock-icon,
    html.native-layout-guard body[data-theme] .mobile-dock .dock-icon,
    .mobile-dock a.active .dock-icon,
    body[data-theme] .mobile-dock a.active .dock-icon,
    html.native-layout-guard .mobile-dock a.active .dock-icon,
    .mobile-dock a:focus-visible .dock-icon
  ) {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  transform: none !important;
  transform-origin: center !important;
  box-sizing: border-box !important;
}

:is(
    .mobile-dock .dock-icon svg,
    body[data-theme] .mobile-dock .dock-icon svg,
    html.native-layout-guard .mobile-dock .dock-icon svg,
    html.native-layout-guard body[data-theme] .mobile-dock .dock-icon svg
  ) {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  overflow: visible !important;
  stroke-width: 2.1 !important;
  transform: none !important;
  transform-origin: center !important;
  vector-effect: non-scaling-stroke;
}

:is(
    .mobile-dock a[href="#coach"] .dock-icon svg,
    body[data-theme] .mobile-dock a[href="#coach"] .dock-icon svg,
    html.native-layout-guard .mobile-dock a[href="#coach"] .dock-icon svg,
    html.native-layout-guard body[data-theme] .mobile-dock a[href="#coach"] .dock-icon svg
  ) {
  transform: translateY(0.5px) !important;
}

:is(
    .mobile-dock a[href="#inventory"] .dock-icon svg,
    body[data-theme] .mobile-dock a[href="#inventory"] .dock-icon svg,
    html.native-layout-guard .mobile-dock a[href="#inventory"] .dock-icon svg,
    html.native-layout-guard body[data-theme] .mobile-dock a[href="#inventory"] .dock-icon svg
  ) {
  transform: translateY(-0.5px) !important;
}

.quick-action-grid button::before {
  content: none !important;
  display: none !important;
}

.quick-action-grid button {
  grid-template-columns: 36px minmax(0, 1fr) !important;
  align-items: center !important;
}

.quick-action-icon {
  display: grid !important;
  grid-row: 1 / span 2 !important;
  place-items: center !important;
  align-self: center !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: #0d0f13 !important;
  color: #fffaf2 !important;
  line-height: 0 !important;
  font-style: normal !important;
  box-sizing: border-box !important;
}

.quick-action-icon svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transform: none !important;
  transform-origin: center !important;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 600px) {
  .quick-action-grid,
  body[data-theme] .quick-action-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .quick-action-grid button,
  body[data-theme] .quick-action-grid button {
    min-height: 70px !important;
    padding: 12px 14px !important;
  }

  .quick-action-grid strong,
  .quick-action-grid span,
  body[data-theme] .quick-action-grid strong,
  body[data-theme] .quick-action-grid span {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

:is(
    #settingsCloseButton,
    body[data-theme] #settingsCloseButton,
    html.native-layout-guard #settingsCloseButton,
    html.native-layout-guard body[data-theme] #settingsCloseButton
  ) {
  justify-self: center !important;
  align-self: center !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
}

.mobile-collapse-toggle {
  position: relative !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.mobile-collapse-toggle::before {
  content: "" !important;
  display: block !important;
  grid-area: 1 / 1 !important;
  width: 10px !important;
  height: 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: translateY(-2px) rotate(45deg) !important;
  transform-origin: center !important;
  box-sizing: border-box !important;
}

.mobile-collapse-toggle[data-icon-direction="up"]::before {
  transform: translateY(2px) rotate(225deg) !important;
}

.inventory-compare-remove > span {
  display: none !important;
}

.inventory-compare-remove::before,
.inventory-compare-remove::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 14px !important;
  height: 2px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform-origin: center !important;
}

.inventory-compare-remove::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

.inventory-compare-remove::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.style-pulse-actions button > svg {
  display: block !important;
  flex: 0 0 auto !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.paywall-product[aria-busy="true"] .paywall-plan-cta::after,
body[data-theme] .paywall-product[aria-busy="true"] .paywall-plan-cta::after {
  margin-top: 0 !important;
  transform: translateY(-50%) !important;
}

#studio .upload-zone #photoUploadProgress,
body[data-theme] #studio .upload-zone #photoUploadProgress,
html.native-layout-guard #studio .upload-zone #photoUploadProgress,
html.native-layout-guard body[data-theme] #studio .upload-zone #photoUploadProgress {
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.25 !important;
}

@media (max-width: 900px) {
  :is(
      #settingsButton,
      body[data-theme] #settingsButton,
      html.native-layout-guard #settingsButton,
      html.native-layout-guard body[data-theme] #settingsButton
    ) {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  :is(
      .mobile-dock > a,
      body[data-theme] .mobile-dock > a,
      html.native-layout-guard .mobile-dock > a,
      html.native-layout-guard body[data-theme] .mobile-dock > a,
      .mobile-dock > a.active,
      body[data-theme] .mobile-dock > a.active,
      html.native-layout-guard .mobile-dock > a.active
    ) {
    grid-template-rows: 24px 13px !important;
    align-content: center !important;
  }

  :is(
      .mobile-dock .dock-icon,
      body[data-theme] .mobile-dock .dock-icon,
      html.native-layout-guard .mobile-dock .dock-icon,
      html.native-layout-guard body[data-theme] .mobile-dock .dock-icon,
      .mobile-dock a.active .dock-icon,
      body[data-theme] .mobile-dock a.active .dock-icon,
      html.native-layout-guard .mobile-dock a.active .dock-icon
    ) {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
  }

  :is(
      .mobile-dock .dock-icon svg,
      body[data-theme] .mobile-dock .dock-icon svg,
      html.native-layout-guard .mobile-dock .dock-icon svg,
      html.native-layout-guard body[data-theme] .mobile-dock .dock-icon svg
    ) {
    width: 17px !important;
    height: 17px !important;
    stroke-width: 2 !important;
  }
}